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
136
137
138
139
140
141
142
143
144
145
|
import { nextTick } from 'vue';
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import SourceEditorToolbarButton from '~/editor/components/source_editor_toolbar_button.vue';
import { buildButton } from './helpers';
describe('Source Editor Toolbar button', () => {
let wrapper;
const defaultBtn = buildButton();
const findButton = () => wrapper.findComponent(GlButton);
const createComponent = (props = { button: defaultBtn }) => {
wrapper = shallowMount(SourceEditorToolbarButton, {
propsData: {
...props,
},
stubs: {
GlButton,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('default', () => {
const defaultProps = {
category: 'primary',
variant: 'default',
};
const customProps = {
category: 'secondary',
variant: 'info',
};
it('does not render the button if the props have not been passed', () => {
createComponent({});
expect(findButton().vm).toBeUndefined();
});
it('renders a default button without props', async () => {
createComponent();
const btn = findButton();
expect(btn.exists()).toBe(true);
expect(btn.props()).toMatchObject(defaultProps);
});
it('renders a button based on the props passed', async () => {
createComponent({
button: customProps,
});
const btn = findButton();
expect(btn.props()).toMatchObject(customProps);
});
describe('CSS class', () => {
let blueprintClasses;
beforeEach(() => {
createComponent();
blueprintClasses = findButton().element.classList;
});
it.each`
cssClass | expectedExtraClasses
${undefined} | ${['']}
${''} | ${['']}
${'foo'} | ${['foo']}
${'foo bar'} | ${['foo', 'bar']}
`(
'does set CSS class correctly when `class` is "$cssClass"',
({ cssClass, expectedExtraClasses }) => {
createComponent({
button: {
...defaultBtn,
class: cssClass,
},
});
const btn = findButton().element;
expectedExtraClasses.forEach((c) => {
if (c) {
expect(btn.classList.contains(c)).toBe(true);
} else {
expect(btn.classList).toEqual(blueprintClasses);
}
});
},
);
});
});
describe('data attributes', () => {
it.each`
description | data | expectedDataset
${'does not set any attribute'} | ${undefined} | ${{}}
${'does not set any attribute'} | ${[]} | ${{}}
${'does not set any attribute'} | ${['foo']} | ${{}}
${'does not set any attribute'} | ${'bar'} | ${{}}
${'does set single attribute correctly'} | ${{ qaSelector: 'foo' }} | ${{ qaSelector: 'foo' }}
${'does set multiple attributes correctly'} | ${{ qaSelector: 'foo', youCanSeeMe: true }} | ${{ qaSelector: 'foo', youCanSeeMe: 'true' }}
`('$description when data="$data"', ({ data, expectedDataset }) => {
createComponent({
button: {
data,
},
});
expect(findButton().element.dataset).toEqual(expect.objectContaining(expectedDataset));
});
});
describe('click handler', () => {
let clickEvent;
beforeEach(() => {
clickEvent = new Event('click');
});
it('fires the click handler on the button when available', async () => {
const spy = jest.fn();
createComponent({
button: {
onClick: spy,
},
});
expect(spy).not.toHaveBeenCalled();
findButton().vm.$emit('click', clickEvent);
await nextTick();
expect(spy).toHaveBeenCalledWith(clickEvent);
});
it('emits the "click" event, passing the event itself', async () => {
createComponent();
jest.spyOn(wrapper.vm, '$emit');
expect(wrapper.vm.$emit).not.toHaveBeenCalled();
findButton().vm.$emit('click', clickEvent);
await nextTick();
expect(wrapper.vm.$emit).toHaveBeenCalledWith('click', clickEvent);
});
});
});
|
