99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
|
import { GlButton } from '@gitlab/ui';
|
||
|
import { Extension } from '@tiptap/core';
|
||
|
import { shallowMount } from '@vue/test-utils';
|
||
|
import ToolbarButton from '~/content_editor/components/toolbar_button.vue';
|
||
|
import { createContentEditor } from '~/content_editor/services/create_content_editor';
|
||
|
|
||
|
describe('content_editor/components/toolbar_button', () => {
|
||
|
let wrapper;
|
||
|
let tiptapEditor;
|
||
|
let toggleFooSpy;
|
||
|
const CONTENT_TYPE = 'bold';
|
||
|
const ICON_NAME = 'bold';
|
||
|
const LABEL = 'Bold';
|
||
|
|
||
|
const buildEditor = () => {
|
||
|
toggleFooSpy = jest.fn();
|
||
|
tiptapEditor = createContentEditor({
|
||
|
extensions: [
|
||
|
{
|
||
|
tiptapExtension: Extension.create({
|
||
|
addCommands() {
|
||
|
return {
|
||
|
toggleFoo: () => toggleFooSpy,
|
||
|
};
|
||
|
},
|
||
|
}),
|
||
|
},
|
||
|
],
|
||
|
renderMarkdown: () => true,
|
||
|
}).tiptapEditor;
|
||
|
|
||
|
jest.spyOn(tiptapEditor, 'isActive');
|
||
|
};
|
||
|
|
||
|
const buildWrapper = (propsData = {}) => {
|
||
|
wrapper = shallowMount(ToolbarButton, {
|
||
|
stubs: {
|
||
|
GlButton,
|
||
|
},
|
||
|
propsData: {
|
||
|
tiptapEditor,
|
||
|
contentType: CONTENT_TYPE,
|
||
|
iconName: ICON_NAME,
|
||
|
label: LABEL,
|
||
|
...propsData,
|
||
|
},
|
||
|
});
|
||
|
};
|
||
|
const findButton = () => wrapper.findComponent(GlButton);
|
||
|
|
||
|
beforeEach(() => {
|
||
|
buildEditor();
|
||
|
});
|
||
|
|
||
|
afterEach(() => {
|
||
|
wrapper.destroy();
|
||
|
});
|
||
|
|
||
|
it('displays tertiary, small button with a provided label and icon', () => {
|
||
|
buildWrapper();
|
||
|
|
||
|
expect(findButton().html()).toMatchSnapshot();
|
||
|
});
|
||
|
|
||
|
it.each`
|
||
|
editorState | outcomeDescription | outcome
|
||
|
${{ isActive: true, isFocused: true }} | ${'button is active'} | ${true}
|
||
|
${{ isActive: false, isFocused: true }} | ${'button is not active'} | ${false}
|
||
|
${{ isActive: true, isFocused: false }} | ${'button is not active '} | ${false}
|
||
|
`('$outcomeDescription when when editor state is $editorState', ({ editorState, outcome }) => {
|
||
|
tiptapEditor.isActive.mockReturnValueOnce(editorState.isActive);
|
||
|
tiptapEditor.isFocused = editorState.isFocused;
|
||
|
buildWrapper();
|
||
|
|
||
|
expect(findButton().classes().includes('active')).toBe(outcome);
|
||
|
expect(tiptapEditor.isActive).toHaveBeenCalledWith(CONTENT_TYPE);
|
||
|
});
|
||
|
|
||
|
describe('when button is clicked', () => {
|
||
|
it('executes the content type command when executeCommand = true', async () => {
|
||
|
buildWrapper({ editorCommand: 'toggleFoo' });
|
||
|
|
||
|
await findButton().trigger('click');
|
||
|
|
||
|
expect(toggleFooSpy).toHaveBeenCalled();
|
||
|
expect(wrapper.emitted().execute).toHaveLength(1);
|
||
|
});
|
||
|
|
||
|
it('does not executes the content type command when executeCommand = false', async () => {
|
||
|
buildWrapper();
|
||
|
|
||
|
await findButton().trigger('click');
|
||
|
|
||
|
expect(toggleFooSpy).not.toHaveBeenCalled();
|
||
|
expect(wrapper.emitted().execute).toHaveLength(1);
|
||
|
});
|
||
|
});
|
||
|
});
|