debian-mirror-gitlab/spec/frontend/groups/components/invite_members_banner_spec.js
2022-10-11 01:57:18 +05:30

147 lines
4.4 KiB
JavaScript

import { GlBanner } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import { nextTick } from 'vue';
import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
import eventHub from '~/invite_members/event_hub';
import axios from '~/lib/utils/axios_utils';
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';
const provide = {
svgPath: '/illustrations/background',
inviteMembersPath: 'groups/members',
trackLabel: 'invite_members_banner',
calloutsPath: 'call/out/path',
calloutsFeatureId: 'some-feature-id',
groupId: '1',
};
const createComponent = (stubs = {}) => {
return shallowMount(InviteMembersBanner, {
provide,
stubs,
});
};
describe('InviteMembersBanner', () => {
let wrapper;
let trackingSpy;
let mockAxios;
beforeEach(() => {
mockAxios = new MockAdapter(axios);
document.body.dataset.page = 'any:page';
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
mockAxios.restore();
unmockTracking();
});
describe('tracking', () => {
const mockTrackingOnWrapper = () => {
unmockTracking();
trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
};
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
const trackCategory = undefined;
const buttonClickEvent = 'invite_members_banner_button_clicked';
it('sends the displayEvent when the banner is displayed', () => {
const displayEvent = 'invite_members_banner_displayed';
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, displayEvent, {
label: provide.trackLabel,
});
});
describe('when the button is clicked', () => {
beforeEach(() => {
jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
wrapper.findComponent(GlBanner).vm.$emit('primary');
});
it('calls openModal through the eventHub', () => {
expect(eventHub.$emit).toHaveBeenCalledWith('openModal', {
source: 'invite_members_banner',
});
});
it('sends the buttonClickEvent with correct trackCategory and trackLabel', () => {
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, buttonClickEvent, {
label: provide.trackLabel,
});
});
});
it('sends the dismissEvent when the banner is dismissed', () => {
mockTrackingOnWrapper();
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
const dismissEvent = 'invite_members_banner_dismissed';
wrapper.findComponent(GlBanner).vm.$emit('close');
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, dismissEvent, {
label: provide.trackLabel,
});
});
});
describe('rendering', () => {
const findBanner = () => {
return wrapper.findComponent(GlBanner);
};
beforeEach(() => {
wrapper = createComponent();
});
it('uses the svgPath for the banner svgpath', () => {
expect(findBanner().attributes('svgpath')).toBe(provide.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', () => {
beforeEach(() => {
wrapper = createComponent({ GlBanner });
});
it('should render the banner when not dismissed', () => {
expect(wrapper.findComponent(GlBanner).exists()).toBe(true);
});
it('should close the banner when dismiss is clicked', async () => {
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
expect(wrapper.findComponent(GlBanner).exists()).toBe(true);
wrapper.findComponent(GlBanner).vm.$emit('close');
await nextTick();
expect(wrapper.findComponent(GlBanner).exists()).toBe(false);
});
});
});