debian-mirror-gitlab/spec/frontend/groups/components/invite_members_banner_spec.js

151 lines
4.3 KiB
JavaScript
Raw Normal View History

2021-03-08 18:12:59 +05:30
import { GlBanner, GlButton } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2020-11-24 15:15:51 +05:30
import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
2021-06-08 01:23:25 +05:30
import eventHub from '~/invite_members/event_hub';
2021-03-11 19:13:27 +05:30
import { setCookie, parseBoolean } from '~/lib/utils/common_utils';
2020-11-24 15:15:51 +05:30
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 svgPath = '/illustrations/background';
const inviteMembersPath = 'groups/members';
const buttonText = 'Invite your colleagues';
const trackLabel = 'invite_members_banner';
const createComponent = (stubs = {}) => {
return shallowMount(InviteMembersBanner, {
provide: {
svgPath,
inviteMembersPath,
isDismissedKey,
trackLabel,
},
stubs,
});
};
describe('InviteMembersBanner', () => {
let wrapper;
let trackingSpy;
beforeEach(() => {
document.body.dataset.page = 'any:page';
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
unmockTracking();
});
describe('tracking', () => {
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
const trackCategory = undefined;
const displayEvent = 'invite_members_banner_displayed';
const buttonClickEvent = 'invite_members_banner_button_clicked';
const dismissEvent = 'invite_members_banner_dismissed';
it('sends the displayEvent when the banner is displayed', () => {
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, displayEvent, {
label: trackLabel,
});
});
2021-06-08 01:23:25 +05:30
describe('when the button is clicked', () => {
beforeEach(() => {
jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
wrapper.find(GlBanner).vm.$emit('primary');
});
it('calls openModal through the eventHub', () => {
expect(eventHub.$emit).toHaveBeenCalledWith('openModal', {
inviteeType: 'members',
source: 'invite_members_banner',
});
});
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
it('sends the buttonClickEvent with correct trackCategory and trackLabel', () => {
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, buttonClickEvent, {
label: trackLabel,
});
2020-11-24 15:15:51 +05:30
});
});
it('sends the dismissEvent when the banner is dismissed', () => {
wrapper.find(GlBanner).vm.$emit('close');
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, dismissEvent, {
label: trackLabel,
});
});
});
describe('rendering', () => {
const findBanner = () => {
return wrapper.find(GlBanner);
};
beforeEach(() => {
wrapper = createComponent();
});
it('uses the svgPath for the banner svgpath', () => {
expect(findBanner().attributes('svgpath')).toBe(svgPath);
});
it('uses the title from options for title', () => {
expect(findBanner().attributes('title')).toBe(title);
});
it('includes the body text from options', () => {
expect(findBanner().html()).toContain(body);
});
it('uses the button_text text from options for buttontext', () => {
expect(findBanner().attributes('buttontext')).toBe(buttonText);
});
});
describe('dismissing', () => {
2021-03-08 18:12:59 +05:30
const findButton = () => wrapper.findAll(GlButton).at(1);
2020-11-24 15:15:51 +05:30
beforeEach(() => {
wrapper = createComponent({ GlBanner });
2021-03-08 18:12:59 +05:30
findButton().vm.$emit('click');
2020-11-24 15:15:51 +05:30
});
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);
});
it('does not render the banner', () => {
2021-03-08 18:12:59 +05:30
expect(wrapper.find(GlBanner).exists()).toBe(false);
2020-11-24 15:15:51 +05:30
});
});
});