diff options
Diffstat (limited to 'spec/frontend/content_editor/components/toolbar_button_spec.js')
-rw-r--r-- | spec/frontend/content_editor/components/toolbar_button_spec.js | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/spec/frontend/content_editor/components/toolbar_button_spec.js b/spec/frontend/content_editor/components/toolbar_button_spec.js new file mode 100644 index 00000000000..a49efa34017 --- /dev/null +++ b/spec/frontend/content_editor/components/toolbar_button_spec.js @@ -0,0 +1,98 @@ +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); + }); + }); +}); |