Test the selection of a text style

spec/frontend/content_editor/components/toolbar_text_style_dropdown_spec.js

@@ -2,16 +2,22 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarTextStyleDropdown from '~/content_editor/components/toolbar_text_style_dropdown.vue';
 import { TEXT_STYLE_DROPDOWN_ITEMS } from '~/content_editor/constants';
-import { createContentEditor } from '~/content_editor/services/create_content_editor';
+import { createTestContentEditorExtension, createTestEditor } from '../test_utils';
 
 describe('content_editor/components/toolbar_headings_dropdown', () => {
   let wrapper;
   let tiptapEditor;
+  let commandMocks;
 
   const buildEditor = () => {
-    tiptapEditor = createContentEditor({
-      renderMarkdown: () => true,
-    }).tiptapEditor;
+    const testExtension = createTestContentEditorExtension({
+      commands: TEXT_STYLE_DROPDOWN_ITEMS.map((item) => item.editorCommand),
+    });
+
+    commandMocks = testExtension.commandMocks;
+    tiptapEditor = createTestEditor({
+      extensions: [testExtension.tiptapExtension],
+    });
 
     jest.spyOn(tiptapEditor, 'isActive');
   };
@@ -41,8 +47,8 @@ describe('content_editor/components/toolbar_headings_dropdown', () => {
   it('renders all text styles as dropdown items', () => {
     buildWrapper();
 
-    TEXT_STYLE_DROPDOWN_ITEMS.forEach((heading) => {
-      expect(wrapper.findByText(heading.label).exists()).toBe(true);
+    TEXT_STYLE_DROPDOWN_ITEMS.forEach((textStyle) => {
+      expect(wrapper.findByText(textStyle.label).exists()).toBe(true);
     });
   });
 
@@ -91,4 +97,35 @@ describe('content_editor/components/toolbar_headings_dropdown', () => {
       expect(findDropdown().props().text).toBe('Text style');
     });
   });
+
+  describe('when a text style is selected', () => {
+    it('executes the tiptap command related to that text style', () => {
+      buildWrapper();
+
+      TEXT_STYLE_DROPDOWN_ITEMS.forEach((textStyle, index) => {
+        const { editorCommand, commandParams } = textStyle;
+
+        wrapper.findAllComponents(GlDropdownItem).at(index).vm.$emit('click');
+        expect(commandMocks[editorCommand]).toHaveBeenCalledWith(commandParams || {});
+      });
+    });
+
+    it('emits execute event with contentType and value params that indicates the heading level', () => {
+      TEXT_STYLE_DROPDOWN_ITEMS.forEach((textStyle, index) => {
+        buildWrapper();
+        const { contentType, commandParams } = textStyle;
+
+        wrapper.findAllComponents(GlDropdownItem).at(index).vm.$emit('click');
+        expect(wrapper.emitted('execute')).toEqual([
+          [
+            {
+              contentType,
+              value: commandParams?.level,
+            },
+          ],
+        ]);
+        wrapper.destroy();
+      });
+    });
+  });
 });

spec/frontend/content_editor/test_utils.js

 import { Node } from '@tiptap/core';
+import { Document } from '@tiptap/extension-document';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Text } from '@tiptap/extension-text';
+import { Editor } from '@tiptap/vue-2';
 
-export const createTestContentEditorExtension = () => ({
-  tiptapExtension: Node.create({
-    name: 'label',
-    priority: 101,
-    inline: true,
-    group: 'inline',
-    addAttributes() {
-      return {
-        labelName: {
-          default: null,
-          parseHTML: (element) => {
-            return { labelName: element.dataset.labelName };
+/**
+ * Creates an instance of the Tiptap Editor class
+ * with a minimal configuration for testing purposes.
+ *
+ * It only includes the Document, Text, and Paragraph
+ * extensions.
+ *
+ * @param {Array} config.extensions One or more extensions to
+ * include in the editor
+ * @returns An instance of a Tiptap’s Editor class
+ */
+export const createTestEditor = ({ extensions = [] }) => {
+  return new Editor({
+    extensions: [Document, Text, Paragraph, ...extensions],
+  });
+};
+
+/**
+ * Creates a Content Editor extension for testing
+ * purposes.
+ *
+ * @param {Array} config.commands A list of command names
+ * to include in the test extension. This utility will create
+ * Jest mock functions for each command name.
+ * @returns An object with the following properties:
+ *
+ * tiptapExtension A Node tiptap extension
+ * commandMocks Jest mock functions for each created command
+ * serializer A markdown serializer for the extension
+ */
+export const createTestContentEditorExtension = ({ commands = [] } = {}) => {
+  const commandMocks = commands.reduce(
+    (accum, commandName) => ({
+      ...accum,
+      [commandName]: jest.fn(),
+    }),
+    {},
+  );
+
+  return {
+    commandMocks,
+    tiptapExtension: Node.create({
+      name: 'label',
+      priority: 101,
+      inline: true,
+      group: 'inline',
+      addCommands() {
+        return commands.reduce(
+          (accum, commandName) => ({
+            ...accum,
+            [commandName]: (...params) => () => commandMocks[commandName](...params),
+          }),
+          {},
+        );
+      },
+      addAttributes() {
+        return {
+          labelName: {
+            default: null,
+            parseHTML: (element) => {
+              return { labelName: element.dataset.labelName };
+            },
           },
-        },
-      };
-    },
-    parseHTML() {
-      return [
-        {
-          tag: 'span[data-reference="label"]',
-        },
-      ];
-    },
-    renderHTML({ HTMLAttributes }) {
-      return ['span', HTMLAttributes, 0];
+        };
+      },
+      parseHTML() {
+        return [
+          {
+            tag: 'span[data-reference="label"]',
+          },
+        ];
+      },
+      renderHTML({ HTMLAttributes }) {
+        return ['span', HTMLAttributes, 0];
+      },
+    }),
+    serializer: (state, node) => {
+      state.write(`~${node.attrs.labelName}`);
+      state.closeBlock(node);
     },
-  }),
-  serializer: (state, node) => {
-    state.write(`~${node.attrs.labelName}`);
-    state.closeBlock(node);
-  },
-});
+  };
+};