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');
   });
 });