2021-09-30 23:02:18 +05:30
|
|
|
import { GlBanner } from '@gitlab/ui';
|
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2021-11-11 11:23:49 +05:30
|
|
|
import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
|
|
|
|
import { mockTracking } from 'helpers/tracking_helper';
|
2021-09-30 23:02:18 +05:30
|
|
|
import TerraformNotification from '~/projects/terraform_notification/components/terraform_notification.vue';
|
2021-11-11 11:23:49 +05:30
|
|
|
import {
|
|
|
|
EVENT_LABEL,
|
|
|
|
DISMISS_EVENT,
|
|
|
|
CLICK_EVENT,
|
|
|
|
} from '~/projects/terraform_notification/constants';
|
2021-09-30 23:02:18 +05:30
|
|
|
|
2021-10-27 15:23:28 +05:30
|
|
|
const terraformImagePath = '/path/to/image';
|
2021-09-30 23:02:18 +05:30
|
|
|
|
|
|
|
describe('TerraformNotificationBanner', () => {
|
|
|
|
let wrapper;
|
2021-11-11 11:23:49 +05:30
|
|
|
let trackingSpy;
|
|
|
|
let userCalloutDismissSpy;
|
2021-09-30 23:02:18 +05:30
|
|
|
|
2021-10-27 15:23:28 +05:30
|
|
|
const provideData = {
|
|
|
|
terraformImagePath,
|
2021-09-30 23:02:18 +05:30
|
|
|
};
|
|
|
|
const findBanner = () => wrapper.findComponent(GlBanner);
|
|
|
|
|
2021-11-11 11:23:49 +05:30
|
|
|
const createComponent = ({ shouldShowCallout = true } = {}) => {
|
|
|
|
userCalloutDismissSpy = jest.fn();
|
|
|
|
|
2021-09-30 23:02:18 +05:30
|
|
|
wrapper = shallowMount(TerraformNotification, {
|
2021-10-27 15:23:28 +05:30
|
|
|
provide: provideData,
|
2021-11-11 11:23:49 +05:30
|
|
|
stubs: {
|
|
|
|
GlBanner,
|
|
|
|
UserCalloutDismisser: makeMockUserCalloutDismisser({
|
|
|
|
dismiss: userCalloutDismissSpy,
|
|
|
|
shouldShowCallout,
|
|
|
|
}),
|
|
|
|
},
|
2021-09-30 23:02:18 +05:30
|
|
|
});
|
2021-11-11 11:23:49 +05:30
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent();
|
|
|
|
trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
|
2021-09-30 23:02:18 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
2021-11-11 11:23:49 +05:30
|
|
|
describe('when user has already dismissed the banner', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent({
|
|
|
|
shouldShowCallout: false,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
it('should not render the banner', () => {
|
|
|
|
expect(findBanner().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe("when user hasn't yet dismissed the banner", () => {
|
2021-09-30 23:02:18 +05:30
|
|
|
it('should render the banner', () => {
|
|
|
|
expect(findBanner().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when close button is clicked', () => {
|
2021-11-11 11:23:49 +05:30
|
|
|
beforeEach(() => {
|
|
|
|
wrapper.vm.$refs.calloutDismisser.dismiss = userCalloutDismissSpy;
|
|
|
|
findBanner().vm.$emit('close');
|
|
|
|
});
|
|
|
|
it('should send the dismiss event', () => {
|
|
|
|
expect(trackingSpy).toHaveBeenCalledWith(undefined, DISMISS_EVENT, {
|
|
|
|
label: EVENT_LABEL,
|
|
|
|
});
|
2021-09-30 23:02:18 +05:30
|
|
|
});
|
2021-11-11 11:23:49 +05:30
|
|
|
it('should call the dismiss callback', () => {
|
|
|
|
expect(userCalloutDismissSpy).toHaveBeenCalledTimes(1);
|
|
|
|
});
|
|
|
|
});
|
2021-09-30 23:02:18 +05:30
|
|
|
|
2021-11-11 11:23:49 +05:30
|
|
|
describe('when docs link is clicked', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
findBanner().vm.$emit('primary');
|
2021-09-30 23:02:18 +05:30
|
|
|
});
|
|
|
|
|
2021-11-11 11:23:49 +05:30
|
|
|
it('should send button click event', () => {
|
|
|
|
expect(trackingSpy).toHaveBeenCalledWith(undefined, CLICK_EVENT, {
|
|
|
|
label: EVENT_LABEL,
|
|
|
|
});
|
2021-09-30 23:02:18 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|