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
|
import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import { GlButtonGroup } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import createMockApollo from 'helpers/mock_apollo_helper';
import SourceEditorToolbar from '~/editor/components/source_editor_toolbar.vue';
import SourceEditorToolbarButton from '~/editor/components/source_editor_toolbar_button.vue';
import { EDITOR_TOOLBAR_LEFT_GROUP, EDITOR_TOOLBAR_RIGHT_GROUP } from '~/editor/constants';
import getToolbarItemsQuery from '~/editor/graphql/get_items.query.graphql';
import { buildButton } from './helpers';
Vue.use(VueApollo);
describe('Source Editor Toolbar', () => {
let wrapper;
let mockApollo;
const findButtons = () => wrapper.findAllComponents(SourceEditorToolbarButton);
const createApolloMockWithCache = (items = []) => {
mockApollo = createMockApollo();
mockApollo.clients.defaultClient.cache.writeQuery({
query: getToolbarItemsQuery,
data: {
items: {
nodes: items,
},
},
});
};
const createComponentWithApollo = (items = []) => {
createApolloMockWithCache(items);
wrapper = shallowMount(SourceEditorToolbar, {
apolloProvider: mockApollo,
stubs: {
GlButtonGroup,
},
});
};
afterEach(() => {
wrapper.destroy();
mockApollo = null;
});
describe('groups', () => {
it.each`
group | expectedGroup
${EDITOR_TOOLBAR_LEFT_GROUP} | ${EDITOR_TOOLBAR_LEFT_GROUP}
${EDITOR_TOOLBAR_RIGHT_GROUP} | ${EDITOR_TOOLBAR_RIGHT_GROUP}
${undefined} | ${EDITOR_TOOLBAR_RIGHT_GROUP}
${'non-existing'} | ${EDITOR_TOOLBAR_RIGHT_GROUP}
`('puts item with group="$group" into $expectedGroup group', ({ group, expectedGroup }) => {
const item = buildButton('first', {
group,
});
createComponentWithApollo([item]);
expect(findButtons()).toHaveLength(1);
[EDITOR_TOOLBAR_RIGHT_GROUP, EDITOR_TOOLBAR_LEFT_GROUP].forEach((g) => {
if (g === expectedGroup) {
expect(wrapper.vm.getGroupItems(g)).toEqual([expect.objectContaining({ id: 'first' })]);
} else {
expect(wrapper.vm.getGroupItems(g)).toHaveLength(0);
}
});
});
});
describe('buttons update', () => {
it('properly updates buttons on Apollo cache update', async () => {
const item = buildButton('first', {
group: EDITOR_TOOLBAR_RIGHT_GROUP,
});
createComponentWithApollo();
expect(findButtons()).toHaveLength(0);
mockApollo.clients.defaultClient.cache.writeQuery({
query: getToolbarItemsQuery,
data: {
items: {
nodes: [item],
},
},
});
jest.runOnlyPendingTimers();
await nextTick();
expect(findButtons()).toHaveLength(1);
});
});
describe('click handler', () => {
it('emits the "click" event when a button is clicked', () => {
const item1 = buildButton('first', {
group: EDITOR_TOOLBAR_LEFT_GROUP,
});
const item2 = buildButton('second', {
group: EDITOR_TOOLBAR_RIGHT_GROUP,
});
createComponentWithApollo([item1, item2]);
jest.spyOn(wrapper.vm, '$emit');
expect(wrapper.vm.$emit).not.toHaveBeenCalled();
findButtons().at(0).vm.$emit('click');
expect(wrapper.vm.$emit).toHaveBeenCalledWith('click', item1);
findButtons().at(1).vm.$emit('click');
expect(wrapper.vm.$emit).toHaveBeenCalledWith('click', item2);
expect(wrapper.vm.$emit.mock.calls).toHaveLength(2);
});
});
});
|
