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
146
147
148
149
150
151
152
153
154
155
156
|
import Vue from 'vue';
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import SourceEditorToolbar from '~/editor/components/source_editor_toolbar.vue';
import { ToolbarExtension } from '~/editor/extensions/source_editor_toolbar_ext';
import EditorInstance from '~/editor/source_editor_instance';
import { apolloProvider } from '~/editor/components/source_editor_toolbar_graphql';
import { buildButton, warmUpCacheWithItems } from '../components/helpers';
describe('Source Editor Toolbar Extension', () => {
let instance;
const createInstance = (baseInstance = {}) => {
return new EditorInstance(baseInstance);
};
const getDefaultEl = () => document.getElementById('editor-toolbar');
const getCustomEl = () => document.getElementById('custom-toolbar');
const item1 = buildButton('foo');
const item2 = buildButton('bar');
beforeEach(() => {
setHTMLFixture('<div id="editor-toolbar"></div><div id="custom-toolbar"></div>');
});
afterEach(() => {
apolloProvider.defaultClient.clearStore();
resetHTMLFixture();
});
describe('onSetup', () => {
beforeEach(() => {
instance = createInstance();
});
it.each`
id | type | prefix | expectedElFn
${undefined} | ${'default'} | ${'Sets up'} | ${getDefaultEl}
${'custom-toolbar'} | ${'custom'} | ${'Sets up'} | ${getCustomEl}
${'non-existing'} | ${'default'} | ${'Does not set up'} | ${getDefaultEl}
`('Sets up the Vue application on $type node when node is $id', ({ id, expectedElFn }) => {
jest.spyOn(Vue, 'extend');
jest.spyOn(ToolbarExtension, 'setupVue');
const el = document.getElementById(id);
const expectedEl = expectedElFn();
instance.use({ definition: ToolbarExtension, setupOptions: { el } });
if (expectedEl) {
expect(ToolbarExtension.setupVue).toHaveBeenCalledWith(expectedEl);
expect(Vue.extend).toHaveBeenCalledWith(SourceEditorToolbar);
} else {
expect(ToolbarExtension.setupVue).not.toHaveBeenCalled();
}
});
});
describe('public API', () => {
beforeEach(async () => {
await warmUpCacheWithItems();
instance = createInstance();
instance.use({ definition: ToolbarExtension });
});
describe('getAllItems', () => {
it('returns the list of all toolbar items', async () => {
await expect(instance.toolbar.getAllItems()).toEqual([]);
await warmUpCacheWithItems([item1, item2]);
await expect(instance.toolbar.getAllItems()).toEqual([item1, item2]);
});
});
describe('getItem', () => {
it('returns a toolbar item by id', async () => {
await expect(instance.toolbar.getItem(item1.id)).toEqual(undefined);
await warmUpCacheWithItems([item1]);
await expect(instance.toolbar.getItem(item1.id)).toEqual(item1);
});
});
describe('addItems', () => {
it.each`
idsToAdd | itemsToAdd | expectedResult
${'empty array'} | ${[]} | ${[]}
${'undefined'} | ${undefined} | ${[]}
${item2.id} | ${[item2]} | ${[item2]}
${item1.id} | ${[item1]} | ${[item1]}
${[item1.id, item2.id]} | ${[item1, item2]} | ${[item1, item2]}
`('adds $idsToAdd item(s) to cache', async ({ itemsToAdd, expectedResult }) => {
await instance.toolbar.addItems(itemsToAdd);
await expect(instance.toolbar.getAllItems()).toEqual(expectedResult);
});
it('correctly adds items to the pre-populated cache', async () => {
await warmUpCacheWithItems([item1]);
await instance.toolbar.addItems([item2]);
await expect(instance.toolbar.getAllItems()).toEqual([item1, item2]);
});
it('does not fail if the item is an Object', async () => {
await instance.toolbar.addItems(item1);
await expect(instance.toolbar.getAllItems()).toEqual([item1]);
});
});
describe('removeItems', () => {
beforeEach(async () => {
await warmUpCacheWithItems([item1, item2]);
});
it.each`
idsToRemove | expectedResult
${undefined} | ${[item1, item2]}
${[]} | ${[item1, item2]}
${[item1.id]} | ${[item2]}
${[item2.id]} | ${[item1]}
${[item1.id, item2.id]} | ${[]}
`(
'successfully removes $idsToRemove from [foo, bar]',
async ({ idsToRemove, expectedResult }) => {
await instance.toolbar.removeItems(idsToRemove);
await expect(instance.toolbar.getAllItems()).toEqual(expectedResult);
},
);
});
describe('updateItem', () => {
const updatedProp = {
icon: 'book',
};
beforeEach(async () => {
await warmUpCacheWithItems([item1, item2]);
});
it.each`
itemsToUpdate | idToUpdate | propsToUpdate | expectedResult
${undefined} | ${'undefined'} | ${undefined} | ${[item1, item2]}
${item2.id} | ${item2.id} | ${undefined} | ${[item1, item2]}
${item2.id} | ${item2.id} | ${{}} | ${[item1, item2]}
${[item1]} | ${item1.id} | ${updatedProp} | ${[{ ...item1, ...updatedProp }, item2]}
${[item2]} | ${item2.id} | ${updatedProp} | ${[item1, { ...item2, ...updatedProp }]}
`(
'updates $idToUpdate item in cache with $propsToUpdate',
async ({ idToUpdate, propsToUpdate, expectedResult }) => {
await instance.toolbar.updateItem(idToUpdate, propsToUpdate);
await expect(instance.toolbar.getAllItems()).toEqual(expectedResult);
if (propsToUpdate) {
await expect(instance.toolbar.getItem(idToUpdate)).toEqual(
expect.objectContaining(propsToUpdate),
);
}
},
);
});
});
});
|
