108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
import { shallowMount } from '@vue/test-utils';
|
|
import { GlBanner } from '@gitlab/ui';
|
|
import MockAdapter from 'axios-mock-adapter';
|
|
import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
|
|
import CustomizeHomepageBanner from '~/pages/dashboard/projects/index/components/customize_homepage_banner.vue';
|
|
import axios from '~/lib/utils/axios_utils';
|
|
|
|
const svgPath = '/illustrations/background';
|
|
const provide = {
|
|
svgPath,
|
|
preferencesBehaviorPath: 'some/behavior/path',
|
|
calloutsPath: 'call/out/path',
|
|
calloutsFeatureId: 'some-feature-id',
|
|
trackLabel: 'home_page',
|
|
};
|
|
|
|
const createComponent = () => {
|
|
return shallowMount(CustomizeHomepageBanner, { provide, stubs: { GlBanner } });
|
|
};
|
|
|
|
describe('CustomizeHomepageBanner', () => {
|
|
let trackingSpy;
|
|
let mockAxios;
|
|
let wrapper;
|
|
|
|
beforeEach(() => {
|
|
mockAxios = new MockAdapter(axios);
|
|
document.body.dataset.page = 'some:page';
|
|
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
|
|
wrapper = createComponent();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
mockAxios.restore();
|
|
unmockTracking();
|
|
});
|
|
|
|
it('should render the banner when not dismissed', () => {
|
|
expect(wrapper.find(GlBanner).exists()).toBe(true);
|
|
});
|
|
|
|
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');
|
|
|
|
await wrapper.vm.$nextTick();
|
|
expect(wrapper.find(GlBanner).exists()).toBe(false);
|
|
});
|
|
|
|
it('includes the body text from options', () => {
|
|
expect(wrapper.html()).toContain(wrapper.vm.$options.i18n.body);
|
|
});
|
|
|
|
describe('tracking', () => {
|
|
const preferencesTrackingEvent = 'click_go_to_preferences';
|
|
const mockTrackingOnWrapper = () => {
|
|
unmockTracking();
|
|
trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
|
|
};
|
|
|
|
it('sets the needed data attributes for tracking button', async () => {
|
|
await wrapper.vm.$nextTick();
|
|
const button = wrapper.find(`[href='${wrapper.vm.preferencesBehaviorPath}']`);
|
|
|
|
expect(button.attributes('data-track-event')).toEqual(preferencesTrackingEvent);
|
|
expect(button.attributes('data-track-label')).toEqual(provide.trackLabel);
|
|
});
|
|
|
|
it('sends a tracking event when the banner is shown', () => {
|
|
const trackCategory = undefined;
|
|
const trackEvent = 'show_home_page_banner';
|
|
|
|
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, trackEvent, {
|
|
label: provide.trackLabel,
|
|
});
|
|
});
|
|
|
|
it('sends a tracking event when the banner is dismissed', async () => {
|
|
mockTrackingOnWrapper();
|
|
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
|
|
const trackCategory = undefined;
|
|
const trackEvent = 'click_dismiss';
|
|
|
|
wrapper.find(GlBanner).vm.$emit('close');
|
|
|
|
await wrapper.vm.$nextTick();
|
|
expect(trackingSpy).toHaveBeenCalledWith(trackCategory, trackEvent, {
|
|
label: provide.trackLabel,
|
|
});
|
|
});
|
|
|
|
it('sends a tracking event when the button is clicked', async () => {
|
|
mockTrackingOnWrapper();
|
|
mockAxios.onPost(provide.calloutsPath).replyOnce(200);
|
|
const button = wrapper.find(`[href='${wrapper.vm.preferencesBehaviorPath}']`);
|
|
|
|
triggerEvent(button.element);
|
|
|
|
await wrapper.vm.$nextTick();
|
|
expect(trackingSpy).toHaveBeenCalledWith('_category_', preferencesTrackingEvent, {
|
|
label: provide.trackLabel,
|
|
});
|
|
});
|
|
});
|
|
});
|