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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
import { GlButton, GlPopover } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import HelpPopover from '~/vue_shared/components/help_popover.vue';
describe('HelpPopover', () => {
let wrapper;
const title = 'popover <strong>title</strong>';
const content = 'popover <b>content</b>';
const findQuestionButton = () => wrapper.findComponent(GlButton);
const findPopover = () => wrapper.findComponent(GlPopover);
const createComponent = ({ props, ...opts } = {}) => {
wrapper = mount(HelpPopover, {
propsData: {
options: {
title,
content,
},
...props,
},
...opts,
});
};
describe('with title and content', () => {
beforeEach(() => {
createComponent();
});
it('renders a link button with an icon question', () => {
expect(findQuestionButton().props()).toMatchObject({
icon: 'question-o',
variant: 'link',
});
});
it('renders popover that uses the question button as target', () => {
expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
});
it('shows title and content', () => {
expect(findPopover().html()).toContain(title);
expect(findPopover().html()).toContain(content);
});
it('allows rendering title with HTML tags', () => {
expect(findPopover().find('strong').exists()).toBe(true);
});
it('allows rendering content with HTML tags', () => {
expect(findPopover().find('b').exists()).toBe(true);
});
});
describe('without title', () => {
beforeEach(() => {
createComponent({
props: {
options: {
title: null,
content,
},
},
});
});
it('does not show title', () => {
expect(findPopover().html()).not.toContain(title);
});
it('shows content', () => {
expect(findPopover().html()).toContain(content);
});
});
describe('with other options', () => {
const placement = 'bottom';
beforeEach(() => {
createComponent({
props: {
options: {
placement,
},
},
});
});
it('options bind to the popover', () => {
expect(findPopover().props().placement).toBe(placement);
});
});
describe('with alternative icon', () => {
beforeEach(() => {
createComponent({
props: {
icon: 'information-o',
},
});
});
it('uses the given icon', () => {
expect(findQuestionButton().props('icon')).toBe('information-o');
});
});
describe('with custom slots', () => {
const titleSlot = '<h1>title</h1>';
const defaultSlot = '<strong>content</strong>';
beforeEach(() => {
createComponent({
slots: {
title: titleSlot,
default: defaultSlot,
},
});
});
it('shows title slot', () => {
expect(findPopover().html()).toContain(titleSlot);
});
it('shows default content slot', () => {
expect(findPopover().html()).toContain(defaultSlot);
});
it('overrides title and content from options', () => {
expect(findPopover().html()).not.toContain(title);
expect(findPopover().html()).toContain(content);
});
});
});
|
