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
|
import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
import { nextTick } from 'vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import BubbleMenu from '~/content_editor/components/bubble_menus/bubble_menu.vue';
import { createTestEditor } from '../../test_utils';
jest.mock('@tiptap/extension-bubble-menu');
describe('content_editor/components/bubble_menus/bubble_menu', () => {
let wrapper;
let tiptapEditor;
const pluginKey = 'key';
const shouldShow = jest.fn();
const tippyOptions = { placement: 'bottom' };
const pluginInitializationResult = {};
const buildEditor = () => {
tiptapEditor = createTestEditor();
};
const createWrapper = (propsData = {}) => {
wrapper = shallowMountExtended(BubbleMenu, {
provide: {
tiptapEditor,
},
propsData: {
pluginKey,
shouldShow,
tippyOptions,
...propsData,
},
slots: {
default: '<div>menu content</div>',
},
});
};
const setupMocks = () => {
BubbleMenuPlugin.mockReturnValueOnce(pluginInitializationResult);
jest.spyOn(tiptapEditor, 'registerPlugin').mockImplementationOnce(() => true);
};
const invokeTippyEvent = (eventName, eventArgs) => {
const pluginConfig = BubbleMenuPlugin.mock.calls[0][0];
pluginConfig.tippyOptions[eventName](eventArgs);
};
beforeEach(() => {
buildEditor();
setupMocks();
});
afterEach(() => {
wrapper.destroy();
});
it('initializes BubbleMenuPlugin', async () => {
createWrapper({});
await nextTick();
expect(BubbleMenuPlugin).toHaveBeenCalledWith({
pluginKey,
editor: tiptapEditor,
shouldShow,
element: wrapper.vm.$el,
tippyOptions: expect.objectContaining({
onHidden: expect.any(Function),
onShow: expect.any(Function),
...tippyOptions,
}),
});
expect(tiptapEditor.registerPlugin).toHaveBeenCalledWith(pluginInitializationResult);
});
it('does not render default slot by default', async () => {
createWrapper({});
await nextTick();
expect(wrapper.text()).not.toContain('menu content');
});
describe('when onShow event handler is invoked', () => {
const onShowArgs = {};
beforeEach(async () => {
createWrapper({});
await nextTick();
invokeTippyEvent('onShow', onShowArgs);
});
it('displays the menu content', () => {
expect(wrapper.text()).toContain('menu content');
});
it('emits show event', () => {
expect(wrapper.emitted('show')).toEqual([[onShowArgs]]);
});
});
describe('when onHidden event handler is invoked', () => {
const onHiddenArgs = {};
beforeEach(async () => {
createWrapper({});
await nextTick();
invokeTippyEvent('onShow', onHiddenArgs);
invokeTippyEvent('onHidden', onHiddenArgs);
});
it('displays the menu content', () => {
expect(wrapper.text()).not.toContain('menu content');
});
it('emits show event', () => {
expect(wrapper.emitted('hidden')).toEqual([[onHiddenArgs]]);
});
});
});
|
