diff options
Diffstat (limited to 'spec/frontend/content_editor/components')
4 files changed, 226 insertions, 10 deletions
diff --git a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap new file mode 100644 index 00000000000..35c02911e27 --- /dev/null +++ b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`content_editor/components/toolbar_button displays tertiary, small button with a provided label and icon 1`] = ` +"<b-button-stub size=\\"sm\\" variant=\\"default\\" type=\\"button\\" tag=\\"button\\" aria-label=\\"Bold\\" title=\\"Bold\\" class=\\"gl-mx-2 gl-button btn-default-tertiary btn-icon\\"> + <!----> + <gl-icon-stub name=\\"bold\\" size=\\"16\\" class=\\"gl-button-icon\\"></gl-icon-stub> + <!----> +</b-button-stub>" +`; diff --git a/spec/frontend/content_editor/components/content_editor_spec.js b/spec/frontend/content_editor/components/content_editor_spec.js index f055a49135b..e3741032bf4 100644 --- a/spec/frontend/content_editor/components/content_editor_spec.js +++ b/spec/frontend/content_editor/components/content_editor_spec.js @@ -1,26 +1,59 @@ +import { EditorContent } from '@tiptap/vue-2'; import { shallowMount } from '@vue/test-utils'; -import { EditorContent } from 'tiptap'; import ContentEditor from '~/content_editor/components/content_editor.vue'; -import createEditor from '~/content_editor/services/create_editor'; - -jest.mock('~/content_editor/services/create_editor'); +import TopToolbar from '~/content_editor/components/top_toolbar.vue'; +import { createContentEditor } from '~/content_editor/services/create_content_editor'; describe('ContentEditor', () => { let wrapper; + let editor; - const buildWrapper = () => { - wrapper = shallowMount(ContentEditor); + const createWrapper = async (contentEditor) => { + wrapper = shallowMount(ContentEditor, { + propsData: { + contentEditor, + }, + }); }; + beforeEach(() => { + editor = createContentEditor({ renderMarkdown: () => true }); + }); + afterEach(() => { wrapper.destroy(); }); it('renders editor content component and attaches editor instance', () => { - const editor = {}; + createWrapper(editor); + + expect(wrapper.findComponent(EditorContent).props().editor).toBe(editor.tiptapEditor); + }); + + it('renders top toolbar component and attaches editor instance', () => { + createWrapper(editor); + + expect(wrapper.findComponent(TopToolbar).props().contentEditor).toBe(editor); + }); + + it.each` + isFocused | classes + ${true} | ${['md', 'md-area', 'is-focused']} + ${false} | ${['md', 'md-area']} + `( + 'has $classes class selectors when tiptapEditor.isFocused = $isFocused', + ({ isFocused, classes }) => { + editor.tiptapEditor.isFocused = isFocused; + createWrapper(editor); + + expect(wrapper.classes()).toStrictEqual(classes); + }, + ); + + it('adds isFocused class when tiptapEditor is focused', () => { + editor.tiptapEditor.isFocused = true; + createWrapper(editor); - createEditor.mockReturnValueOnce(editor); - buildWrapper(); - expect(wrapper.findComponent(EditorContent).props().editor).toBe(editor); + expect(wrapper.classes()).toContain('is-focused'); }); }); 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); + }); + }); +}); diff --git a/spec/frontend/content_editor/components/top_toolbar_spec.js b/spec/frontend/content_editor/components/top_toolbar_spec.js new file mode 100644 index 00000000000..8f47be3f489 --- /dev/null +++ b/spec/frontend/content_editor/components/top_toolbar_spec.js @@ -0,0 +1,76 @@ +import { shallowMount } from '@vue/test-utils'; +import { mockTracking } from 'helpers/tracking_helper'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import TopToolbar from '~/content_editor/components/top_toolbar.vue'; +import { + TOOLBAR_CONTROL_TRACKING_ACTION, + CONTENT_EDITOR_TRACKING_LABEL, +} from '~/content_editor/constants'; +import { createContentEditor } from '~/content_editor/services/create_content_editor'; + +describe('content_editor/components/top_toolbar', () => { + let wrapper; + let contentEditor; + let trackingSpy; + const buildEditor = () => { + contentEditor = createContentEditor({ renderMarkdown: () => true }); + }; + + const buildWrapper = () => { + wrapper = extendedWrapper( + shallowMount(TopToolbar, { + propsData: { + contentEditor, + }, + }), + ); + }; + + beforeEach(() => { + trackingSpy = mockTracking(undefined, null, jest.spyOn); + }); + + beforeEach(() => { + buildEditor(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe.each` + testId | buttonProps + ${'bold'} | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold' }} + ${'italic'} | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic' }} + ${'code'} | ${{ contentType: 'code', iconName: 'code', label: 'Code', editorCommand: 'toggleCode' }} + ${'blockquote'} | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }} + ${'bullet-list'} | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }} + ${'ordered-list'} | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }} + `('given a $testId toolbar control', ({ testId, buttonProps }) => { + beforeEach(() => { + buildWrapper(); + }); + + it('renders the toolbar control with the provided properties', () => { + expect(wrapper.findByTestId(testId).props()).toEqual({ + ...buttonProps, + tiptapEditor: contentEditor.tiptapEditor, + }); + }); + + it.each` + control | eventData + ${'bold'} | ${{ contentType: 'bold' }} + ${'blockquote'} | ${{ contentType: 'blockquote', value: 1 }} + `('tracks the execution of toolbar controls', ({ control, eventData }) => { + const { contentType, value } = eventData; + wrapper.findByTestId(control).vm.$emit('execute', eventData); + + expect(trackingSpy).toHaveBeenCalledWith(undefined, TOOLBAR_CONTROL_TRACKING_ACTION, { + label: CONTENT_EDITOR_TRACKING_LABEL, + property: contentType, + value, + }); + }); + }); +}); |