2022-06-16 12:09:26 +00:00
|
|
|
import { mountExtended } from 'helpers/vue_test_utils_helper';
|
|
|
|
import ToolbarMoreDropdown from '~/content_editor/components/toolbar_more_dropdown.vue';
|
|
|
|
import Diagram from '~/content_editor/extensions/diagram';
|
|
|
|
import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
|
2022-06-21 12:08:35 +00:00
|
|
|
import eventHubFactory from '~/helpers/event_hub_factory';
|
|
|
|
import { createTestEditor, mockChainedCommands, emitEditorEvent } from '../test_utils';
|
2022-06-16 12:09:26 +00:00
|
|
|
|
|
|
|
describe('content_editor/components/toolbar_more_dropdown', () => {
|
|
|
|
let wrapper;
|
|
|
|
let tiptapEditor;
|
2022-06-21 12:08:35 +00:00
|
|
|
let eventHub;
|
2022-06-16 12:09:26 +00:00
|
|
|
|
|
|
|
const buildEditor = () => {
|
|
|
|
tiptapEditor = createTestEditor({
|
|
|
|
extensions: [Diagram, HorizontalRule],
|
|
|
|
});
|
2022-06-21 12:08:35 +00:00
|
|
|
eventHub = eventHubFactory();
|
2022-06-16 12:09:26 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const buildWrapper = (propsData = {}) => {
|
|
|
|
wrapper = mountExtended(ToolbarMoreDropdown, {
|
|
|
|
provide: {
|
|
|
|
tiptapEditor,
|
2022-06-21 12:08:35 +00:00
|
|
|
eventHub,
|
2022-06-16 12:09:26 +00:00
|
|
|
},
|
|
|
|
propsData,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
buildEditor();
|
|
|
|
buildWrapper();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe.each`
|
2022-06-21 12:08:35 +00:00
|
|
|
name | contentType | command | params
|
|
|
|
${'Code block'} | ${'codeBlock'} | ${'setNode'} | ${['codeBlock']}
|
|
|
|
${'Details block'} | ${'details'} | ${'toggleList'} | ${['details', 'detailsContent']}
|
|
|
|
${'Bullet list'} | ${'bulletList'} | ${'toggleList'} | ${['bulletList', 'listItem']}
|
|
|
|
${'Ordered list'} | ${'orderedList'} | ${'toggleList'} | ${['orderedList', 'listItem']}
|
|
|
|
${'Task list'} | ${'taskList'} | ${'toggleList'} | ${['taskList', 'taskItem']}
|
|
|
|
${'Mermaid diagram'} | ${'diagram'} | ${'setNode'} | ${['diagram', { language: 'mermaid' }]}
|
|
|
|
${'PlantUML diagram'} | ${'diagram'} | ${'setNode'} | ${['diagram', { language: 'plantuml' }]}
|
|
|
|
${'Horizontal rule'} | ${'horizontalRule'} | ${'setHorizontalRule'} | ${[]}
|
|
|
|
`('when option $label is clicked', ({ name, command, contentType, params }) => {
|
|
|
|
let commands;
|
|
|
|
let btn;
|
|
|
|
|
|
|
|
beforeEach(async () => {
|
|
|
|
commands = mockChainedCommands(tiptapEditor, [command, 'focus', 'run']);
|
|
|
|
btn = wrapper.findByRole('menuitem', { name });
|
|
|
|
});
|
2022-06-16 12:09:26 +00:00
|
|
|
|
2022-06-21 12:08:35 +00:00
|
|
|
it(`inserts a ${contentType}`, async () => {
|
2022-06-16 12:09:26 +00:00
|
|
|
await btn.trigger('click');
|
2022-06-21 12:08:35 +00:00
|
|
|
await emitEditorEvent({ event: 'transaction', tiptapEditor });
|
2022-06-16 12:09:26 +00:00
|
|
|
|
|
|
|
expect(commands.focus).toHaveBeenCalled();
|
2022-06-21 12:08:35 +00:00
|
|
|
expect(commands[command]).toHaveBeenCalledWith(...params);
|
2022-06-16 12:09:26 +00:00
|
|
|
expect(commands.run).toHaveBeenCalled();
|
|
|
|
|
|
|
|
expect(wrapper.emitted('execute')).toEqual([[{ contentType }]]);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|