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

148 lines
4.4 KiB
JavaScript
Raw Normal View History

2021-11-11 11:23:49 +05:30
import { GlBanner } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2021-11-11 11:23:49 +05:30
import MockAdapter from 'axios-mock-adapter';
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-11-11 11:23:49 +05:30
import axios from '~/lib/utils/axios_utils';
2020-11-24 15:15:51 +05:30
jest.mock('~/lib/utils/common_utils');
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 buttonText = 'Invite your colleagues';
2021-11-11 11:23:49 +05:30
const provide = {
svgPath: '/illustrations/background',
inviteMembersPath: 'groups/members',
trackLabel: 'invite_members_banner',
calloutsPath: 'call/out/path',
calloutsFeatureId: 'some-feature-id',
groupId: '1',
};
2020-11-24 15:15:51 +05:30
const createComponent = (stubs = {}) => {
return shallowMount(InviteMembersBanner, {
2021-11-11 11:23:49 +05:30
provide,
2020-11-24 15:15:51 +05:30
stubs,
});
};
describe('InviteMembersBanner', () => {
let wrapper;
let trackingSpy;
2021-11-11 11:23:49 +05:30
let mockAxios;
2020-11-24 15:15:51 +05:30
beforeEach(() => {
2021-11-11 11:23:49 +05:30
mockAxios = new MockAdapter(axios);
2020-11-24 15:15:51 +05:30
document.body.dataset.page = 'any:page';
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
2021-11-11 11:23:49 +05:30
mockAxios.restore();
2020-11-24 15:15:51 +05:30
unmockTracking();
});
describe('tracking', () => {
2021-11-11 11:23:49 +05:30
const mockTrackingOnWrapper = () => {
unmockTracking();
trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
};
2020-11-24 15:15:51 +05:30
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
const trackCategory = undefined;
const buttonClickEvent = 'invite_members_banner_button_clicked';
it('sends the displayEvent when the banner is displayed', () => {
2021-11-11 11:23:49 +05:30
const displayEvent = 'invite_members_banner_displayed';
2020-11-24 15:15:51 +05:30
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, displayEvent, {
2021-11-11 11:23:49 +05:30
label: provide.trackLabel,
2020-11-24 15:15:51 +05:30
});
});
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, {
2021-11-11 11:23:49 +05:30
label: provide.trackLabel,
2021-06-08 01:23:25 +05:30
});
2020-11-24 15:15:51 +05:30
});
});
it('sends the dismissEvent when the banner is dismissed', () => {
2021-11-11 11:23:49 +05:30
mockTrackingOnWrapper();
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
const dismissEvent = 'invite_members_banner_dismissed';
2020-11-24 15:15:51 +05:30
wrapper.find(GlBanner).vm.$emit('close');
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, dismissEvent, {
2021-11-11 11:23:49 +05:30
label: provide.trackLabel,
2020-11-24 15:15:51 +05:30
});
});
});
describe('rendering', () => {
const findBanner = () => {
return wrapper.find(GlBanner);
};
beforeEach(() => {
wrapper = createComponent();
});
it('uses the svgPath for the banner svgpath', () => {
2021-11-11 11:23:49 +05:30
expect(findBanner().attributes('svgpath')).toBe(provide.svgPath);
2020-11-24 15:15:51 +05:30
});
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', () => {
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
2021-11-11 11:23:49 +05:30
it('should render the banner when not dismissed', () => {
expect(wrapper.find(GlBanner).exists()).toBe(true);
2020-11-24 15:15:51 +05:30
});
2021-11-11 11:23:49 +05:30
it('should close the banner when dismiss is clicked', async () => {
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
expect(wrapper.find(GlBanner).exists()).toBe(true);
wrapper.find(GlBanner).vm.$emit('close');
2020-11-24 15:15:51 +05:30
2021-11-11 11:23:49 +05:30
await wrapper.vm.$nextTick();
2021-03-08 18:12:59 +05:30
expect(wrapper.find(GlBanner).exists()).toBe(false);
2020-11-24 15:15:51 +05:30
});
});
});