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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
|
import { GlLink, GlForm } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import BubbleMenu from '~/content_editor/components/bubble_menus/bubble_menu.vue';
import MediaBubbleMenu from '~/content_editor/components/bubble_menus/media_bubble_menu.vue';
import { stubComponent } from 'helpers/stub_component';
import eventHubFactory from '~/helpers/event_hub_factory';
import Audio from '~/content_editor/extensions/audio';
import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
import Image from '~/content_editor/extensions/image';
import Video from '~/content_editor/extensions/video';
import { createTestEditor, emitEditorEvent, mockChainedCommands } from '../../test_utils';
import {
PROJECT_WIKI_ATTACHMENT_IMAGE_HTML,
PROJECT_WIKI_ATTACHMENT_AUDIO_HTML,
PROJECT_WIKI_ATTACHMENT_VIDEO_HTML,
PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
} from '../../test_constants';
const TIPTAP_AUDIO_HTML = `<p>
<span class="media-container audio-container"><audio src="https://gitlab.com/favicon.png" controls="true" data-setup="{}" data-title="gitlab favicon"></audio><a href="https://gitlab.com/favicon.png">gitlab favicon</a></span>
</p>`;
const TIPTAP_DIAGRAM_HTML = `<p>
<img src="https://gitlab.com/favicon.png" alt="gitlab favicon" title="gitlab favicon">
</p>`;
const TIPTAP_IMAGE_HTML = `<p>
<img src="https://gitlab.com/favicon.png" alt="gitlab favicon" title="gitlab favicon">
</p>`;
const TIPTAP_VIDEO_HTML = `<p>
<span class="media-container video-container"><video src="https://gitlab.com/favicon.png" controls="true" data-setup="{}" data-title="gitlab favicon"></video><a href="https://gitlab.com/favicon.png">gitlab favicon</a></span>
</p>`;
const createFakeEvent = () => ({ preventDefault: jest.fn(), stopPropagation: jest.fn() });
describe.each`
mediaType | mediaHTML | filePath | mediaOutputHTML
${'image'} | ${PROJECT_WIKI_ATTACHMENT_IMAGE_HTML} | ${'test-file.png'} | ${TIPTAP_IMAGE_HTML}
${'drawio_diagram'} | ${PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML} | ${'test-file.drawio.svg'} | ${TIPTAP_DIAGRAM_HTML}
${'audio'} | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML} | ${'test-file.mp3'} | ${TIPTAP_AUDIO_HTML}
${'video'} | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML} | ${'test-file.mp4'} | ${TIPTAP_VIDEO_HTML}
`(
'content_editor/components/bubble_menus/media_bubble_menu ($mediaType)',
({ mediaType, mediaHTML, filePath, mediaOutputHTML }) => {
let wrapper;
let tiptapEditor;
let contentEditor;
let bubbleMenu;
let eventHub;
const buildEditor = () => {
tiptapEditor = createTestEditor({ extensions: [Image, Audio, Video, DrawioDiagram] });
contentEditor = { resolveUrl: jest.fn() };
eventHub = eventHubFactory();
};
const buildWrapper = () => {
wrapper = mountExtended(MediaBubbleMenu, {
provide: {
tiptapEditor,
contentEditor,
eventHub,
},
stubs: {
BubbleMenu: stubComponent(BubbleMenu),
},
});
};
const selectFile = async (file) => {
const input = wrapper.findComponent({ ref: 'fileSelector' });
// override the property definition because `input.files` isn't directly modifyable
Object.defineProperty(input.element, 'files', { value: [file], writable: true });
await input.trigger('change');
};
const expectLinkButtonsToExist = (exist = true) => {
expect(wrapper.findComponent(GlLink).exists()).toBe(exist);
expect(wrapper.findByTestId('copy-media-src').exists()).toBe(exist);
expect(wrapper.findByTestId('edit-media').exists()).toBe(exist);
expect(wrapper.findByTestId('delete-media').exists()).toBe(exist);
};
beforeEach(async () => {
buildEditor();
buildWrapper();
tiptapEditor
.chain()
.insertContent(mediaHTML)
.setNodeSelection(4) // select the media
.run();
contentEditor.resolveUrl.mockResolvedValue(`/group1/project1/-/wikis/${filePath}`);
await emitEditorEvent({ event: 'transaction', tiptapEditor });
bubbleMenu = wrapper.findComponent(BubbleMenu);
});
it('renders bubble menu component', async () => {
expect(bubbleMenu.classes()).toEqual(['gl-shadow', 'gl-rounded-base', 'gl-bg-white']);
});
it('shows a clickable link to the image', async () => {
const link = wrapper.findComponent(GlLink);
expect(link.attributes()).toEqual(
expect.objectContaining({
href: `/group1/project1/-/wikis/${filePath}`,
'aria-label': filePath,
title: filePath,
target: '_blank',
}),
);
expect(link.text()).toBe(filePath);
});
describe('when BubbleMenu emits hidden event', () => {
it('resets media bubble menu state', async () => {
// Switch to edit mode to access component state in form fields
await wrapper.findByTestId('edit-media').vm.$emit('click');
const mediaSrcInput = wrapper.findByTestId('media-src').vm.$el;
const mediaAltInput = wrapper.findByTestId('media-alt').vm.$el;
expect(mediaSrcInput.value).not.toBe('');
expect(mediaAltInput.value).not.toBe('');
await wrapper.findComponent(BubbleMenu).vm.$emit('hidden');
expect(mediaSrcInput.value).toBe('');
expect(mediaAltInput.value).toBe('');
});
});
describe('copy button', () => {
it(`copies the canonical link to the ${mediaType} to clipboard`, async () => {
jest.spyOn(navigator.clipboard, 'writeText');
await wrapper.findByTestId('copy-media-src').vm.$emit('click');
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(filePath);
});
});
describe(`remove ${mediaType} button`, () => {
it(`removes the ${mediaType}`, async () => {
await wrapper.findByTestId('delete-media').vm.$emit('click');
expect(tiptapEditor.getHTML()).toBe('<p>\n \n</p>');
});
});
describe(`replace ${mediaType} button`, () => {
if (mediaType !== 'drawio_diagram') {
it('uploads and replaces the selected image when file input changes', async () => {
const commands = mockChainedCommands(tiptapEditor, [
'focus',
'deleteSelection',
'uploadAttachment',
'run',
]);
const file = new File(['foo'], 'foo.png', { type: 'image/png' });
await wrapper.findByTestId('replace-media').vm.$emit('click');
await selectFile(file);
expect(commands.focus).toHaveBeenCalled();
expect(commands.deleteSelection).toHaveBeenCalled();
expect(commands.uploadAttachment).toHaveBeenCalledWith({ file });
expect(commands.run).toHaveBeenCalled();
});
} else {
// draw.io diagrams are replaced using the edit diagram button
it('invokes editDiagram command', async () => {
const commands = mockChainedCommands(tiptapEditor, [
'focus',
'createOrEditDiagram',
'run',
]);
await wrapper.findByTestId('edit-diagram').vm.$emit('click');
expect(commands.focus).toHaveBeenCalled();
expect(commands.createOrEditDiagram).toHaveBeenCalled();
expect(commands.run).toHaveBeenCalled();
});
}
});
describe('edit button', () => {
let mediaSrcInput;
let mediaTitleInput;
let mediaAltInput;
beforeEach(async () => {
await wrapper.findByTestId('edit-media').vm.$emit('click');
mediaSrcInput = wrapper.findByTestId('media-src');
mediaTitleInput = wrapper.findByTestId('media-title');
mediaAltInput = wrapper.findByTestId('media-alt');
});
it('hides the link and copy/edit/remove link buttons', async () => {
expectLinkButtonsToExist(false);
});
it(`shows a form to edit the ${mediaType} src/title/alt`, () => {
expect(wrapper.findComponent(GlForm).exists()).toBe(true);
expect(mediaSrcInput.element.value).toBe(filePath);
expect(mediaTitleInput.element.value).toBe('');
expect(mediaAltInput.element.value).toBe('test-file');
});
describe('after making changes in the form and clicking apply', () => {
beforeEach(async () => {
mediaSrcInput.setValue('https://gitlab.com/favicon.png');
mediaAltInput.setValue('gitlab favicon');
mediaTitleInput.setValue('gitlab favicon');
contentEditor.resolveUrl.mockResolvedValue('https://gitlab.com/favicon.png');
await wrapper.findComponent(GlForm).vm.$emit('submit', createFakeEvent());
});
it(`updates prosemirror doc with new src to the ${mediaType}`, async () => {
expect(tiptapEditor.getHTML()).toBe(mediaOutputHTML);
});
it(`updates the link to the ${mediaType} in the bubble menu`, () => {
const link = wrapper.findComponent(GlLink);
expect(link.attributes()).toEqual(
expect.objectContaining({
href: 'https://gitlab.com/favicon.png',
'aria-label': 'https://gitlab.com/favicon.png',
title: 'https://gitlab.com/favicon.png',
target: '_blank',
}),
);
expect(link.text()).toBe('https://gitlab.com/favicon.png');
});
});
describe('after making changes in the form and clicking cancel', () => {
beforeEach(async () => {
mediaSrcInput.setValue('https://gitlab.com/favicon.png');
mediaAltInput.setValue('gitlab favicon');
mediaTitleInput.setValue('gitlab favicon');
await wrapper.findByTestId('cancel-editing-media').vm.$emit('click');
});
it('hides the form and shows the copy/edit/remove link buttons', () => {
expectLinkButtonsToExist();
});
it(`resets the form with old values of the ${mediaType} from prosemirror`, async () => {
// click edit once again to show the form back
await wrapper.findByTestId('edit-media').vm.$emit('click');
mediaSrcInput = wrapper.findByTestId('media-src');
mediaTitleInput = wrapper.findByTestId('media-title');
mediaAltInput = wrapper.findByTestId('media-alt');
expect(mediaSrcInput.element.value).toBe(filePath);
expect(mediaAltInput.element.value).toBe('test-file');
expect(mediaTitleInput.element.value).toBe('');
});
});
});
},
);
|