diff options
Diffstat (limited to 'spec/frontend/content_editor/components/content_editor_spec.js')
-rw-r--r-- | spec/frontend/content_editor/components/content_editor_spec.js | 53 |
1 files changed, 43 insertions, 10 deletions
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'); }); }); |