Commit a659e955 authored by Jackie Fraser's avatar Jackie Fraser Committed by Olena Horal-Koretska

Add cookie to dismiss button on invite group banner

parent a7116428
<script>
import { GlBanner } from '@gitlab/ui';
import { s__ } from '~/locale';
import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils';
export default {
components: {
GlBanner,
},
inject: ['svgPath', 'inviteMembersPath'],
inject: ['svgPath', 'inviteMembersPath', 'isDismissedKey'],
data() {
return {
visible: true,
isDismissed: parseBoolean(getCookie(this.isDismissedKey)),
};
},
methods: {
handleClose() {
this.visible = false;
setCookie(this.isDismissedKey, true);
this.isDismissed = true;
},
},
i18n: {
......@@ -29,7 +31,7 @@ export default {
<template>
<gl-banner
v-if="visible"
v-if="!isDismissed"
ref="banner"
:title="$options.i18n.title"
:button-text="$options.i18n.button_text"
......
......@@ -8,13 +8,14 @@ export default function initInviteMembersBanner() {
return false;
}
const { svgPath, inviteMembersPath } = el.dataset;
const { svgPath, inviteMembersPath, isDismissedKey } = el.dataset;
return new Vue({
el,
provide: {
svgPath,
inviteMembersPath,
isDismissedKey,
},
render: createElement => createElement(InviteMembersBanner),
});
......
......@@ -6,6 +6,7 @@
= content_for :group_invite_members_banner do
.container-fluid.container-limited{ class: "gl-pb-2! gl-pt-6! #{@content_class}" }
.js-group-invite-members-banner{ data: { svg_path: image_path('illustrations/merge_requests.svg'),
is_dismissed_key: "invite_#{@group.id}_#{current_user.id}",
invite_members_path: group_group_members_path(@group) } }
= content_for :meta_tags do
......
import { shallowMount } from '@vue/test-utils';
import { GlBanner } from '@gitlab/ui';
import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
const expectedTitle = 'Collaborate with your team';
const expectedBody =
jest.mock('~/lib/utils/common_utils');
const isDismissedKey = 'invite_99_1';
const title = 'Collaborate with your team';
const body =
"We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge";
const expectedSvgPath = '/illustrations/background';
const expectedInviteMembersPath = 'groups/members';
const expectedButtonText = 'Invite your colleagues';
const svgPath = '/illustrations/background';
const inviteMembersPath = 'groups/members';
const buttonText = 'Invite your colleagues';
const createComponent = (stubs = {}) => {
return shallowMount(InviteMembersBanner, {
provide: {
svgPath: expectedSvgPath,
inviteMembersPath: expectedInviteMembersPath,
svgPath,
inviteMembersPath,
isDismissedKey,
},
stubs,
});
......@@ -37,23 +42,23 @@ describe('InviteMembersBanner', () => {
});
it('uses the svgPath for the banner svgpath', () => {
expect(findBanner().attributes('svgpath')).toBe(expectedSvgPath);
expect(findBanner().attributes('svgpath')).toBe(svgPath);
});
it('uses the title from options for title', () => {
expect(findBanner().attributes('title')).toBe(expectedTitle);
expect(findBanner().attributes('title')).toBe(title);
});
it('includes the body text from options', () => {
expect(findBanner().html()).toContain(expectedBody);
expect(findBanner().html()).toContain(body);
});
it('uses the button_text text from options for buttontext', () => {
expect(findBanner().attributes('buttontext')).toBe(expectedButtonText);
expect(findBanner().attributes('buttontext')).toBe(buttonText);
});
it('uses the href from inviteMembersPath for buttonlink', () => {
expect(findBanner().attributes('buttonlink')).toBe(expectedInviteMembersPath);
expect(findBanner().attributes('buttonlink')).toBe(inviteMembersPath);
});
});
......@@ -61,16 +66,35 @@ describe('InviteMembersBanner', () => {
const findButton = () => {
return wrapper.find('button');
};
const stubs = {
GlBanner,
};
it('sets visible to false', () => {
wrapper = createComponent(stubs);
beforeEach(() => {
wrapper = createComponent({ GlBanner });
findButton().trigger('click');
});
it('sets iDismissed to true', () => {
expect(wrapper.vm.isDismissed).toBe(true);
});
it('sets the cookie with the isDismissedKey', () => {
expect(setCookie).toHaveBeenCalledWith(isDismissedKey, true);
});
});
describe('when a dismiss cookie exists', () => {
beforeEach(() => {
parseBoolean.mockReturnValue(true);
wrapper = createComponent({ GlBanner });
});
it('sets isDismissed to true', () => {
expect(wrapper.vm.isDismissed).toBe(true);
});
expect(wrapper.vm.visible).toBe(false);
it('does not render the banner', () => {
expect(wrapper.contains(GlBanner)).toBe(false);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment