1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import { GlPopover, GlLink, GlButton } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { POPOVER_TARGET_ID } from '~/feature_highlight/constants';
import { dismiss } from '~/feature_highlight/feature_highlight_helper';
import FeatureHighlightPopover from '~/feature_highlight/feature_highlight_popover.vue';
jest.mock('~/feature_highlight/feature_highlight_helper');
describe('feature_highlight/feature_highlight_popover', () => {
let wrapper;
const props = {
autoDevopsHelpPath: '/help/autodevops',
highlightId: '123',
dismissEndpoint: '/api/dismiss',
};
const buildWrapper = (propsData = props) => {
wrapper = mount(FeatureHighlightPopover, {
propsData,
});
};
const findPopoverTarget = () => wrapper.find(`#${POPOVER_TARGET_ID}`);
const findPopover = () => wrapper.findComponent(GlPopover);
const findAutoDevopsHelpLink = () => wrapper.findComponent(GlLink);
const findDismissButton = () => wrapper.findComponent(GlButton);
beforeEach(() => {
buildWrapper();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('renders popover target', () => {
expect(findPopoverTarget().exists()).toBe(true);
});
it('renders popover', () => {
expect(findPopover().props()).toMatchObject({
target: POPOVER_TARGET_ID,
cssClasses: ['feature-highlight-popover'],
triggers: 'hover',
container: 'body',
placement: 'right',
boundary: 'viewport',
});
});
it('renders link that points to the autodevops help page', () => {
expect(findAutoDevopsHelpLink().attributes().href).toBe(props.autoDevopsHelpPath);
expect(findAutoDevopsHelpLink().text()).toBe('Auto DevOps');
});
it('renders dismiss button', () => {
expect(findDismissButton().props()).toMatchObject({
size: 'small',
icon: 'thumb-up',
variant: 'confirm',
});
});
it('dismisses popover when dismiss button is clicked', async () => {
await findDismissButton().trigger('click');
expect(findPopover().emitted('close')).toHaveLength(1);
expect(dismiss).toHaveBeenCalledWith(props.dismissEndpoint, props.highlightId);
});
describe('when popover is dismissed and hidden', () => {
it('hides the popover target', async () => {
await findDismissButton().trigger('click');
findPopover().vm.$emit('hidden');
await wrapper.vm.$nextTick();
expect(findPopoverTarget().exists()).toBe(false);
});
});
});
|
