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