1 files changed, 146 insertions, 0 deletions
diff --git a/spec/frontend/editor/components/source_editor_toolbar_button_spec.js b/spec/frontend/editor/components/source_editor_toolbar_button_spec.js
new file mode 100644
index 00000000000..5135091af4a
--- /dev/null
+++ b/spec/frontend/editor/components/source_editor_toolbar_button_spec.js
@@ -0,0 +1,146 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import SourceEditorToolbarButton from '~/editor/components/source_editor_toolbar_button.vue';
+import getToolbarItemQuery from '~/editor/graphql/get_item.query.graphql';
+import updateToolbarItemMutation from '~/editor/graphql/update_item.mutation.graphql';
+import { buildButton } from './helpers';
+
+Vue.use(VueApollo);
+
+describe('Source Editor Toolbar button', () => {
+  let wrapper;
+  let mockApollo;
+  const defaultBtn = buildButton();
+
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  const createComponentWithApollo = ({ propsData } = {}) => {
+    mockApollo = createMockApollo();
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: getToolbarItemQuery,
+      variables: { id: defaultBtn.id },
+      data: {
+        item: {
+          ...defaultBtn,
+        },
+      },
+    });
+
+    wrapper = shallowMount(SourceEditorToolbarButton, {
+      propsData,
+      apolloProvider: mockApollo,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    mockApollo = null;
+  });
+
+  describe('default', () => {
+    const defaultProps = {
+      category: 'primary',
+      variant: 'default',
+    };
+    const customProps = {
+      category: 'secondary',
+      variant: 'info',
+    };
+    it('renders a default button without props', async () => {
+      createComponentWithApollo();
+      const btn = findButton();
+      expect(btn.exists()).toBe(true);
+      expect(btn.props()).toMatchObject(defaultProps);
+    });
+
+    it('renders a button based on the props passed', async () => {
+      createComponentWithApollo({
+        propsData: {
+          button: customProps,
+        },
+      });
+      const btn = findButton();
+      expect(btn.props()).toMatchObject(customProps);
+    });
+  });
+
+  describe('button updates', () => {
+    it('it properly updates button on Apollo cache update', async () => {
+      const { id } = defaultBtn;
+
+      createComponentWithApollo({
+        propsData: {
+          button: {
+            id,
+          },
+        },
+      });
+
+      expect(findButton().props('selected')).toBe(false);
+
+      mockApollo.clients.defaultClient.cache.writeQuery({
+        query: getToolbarItemQuery,
+        variables: { id },
+        data: {
+          item: {
+            ...defaultBtn,
+            selected: true,
+          },
+        },
+      });
+
+      jest.runOnlyPendingTimers();
+      await nextTick();
+
+      expect(findButton().props('selected')).toBe(true);
+    });
+  });
+
+  describe('click handler', () => {
+    it('fires the click handler on the button when available', () => {
+      const spy = jest.fn();
+      createComponentWithApollo({
+        propsData: {
+          button: {
+            onClick: spy,
+          },
+        },
+      });
+      expect(spy).not.toHaveBeenCalled();
+      findButton().vm.$emit('click');
+      expect(spy).toHaveBeenCalled();
+    });
+    it('emits the "click" event', () => {
+      createComponentWithApollo();
+      jest.spyOn(wrapper.vm, '$emit');
+      expect(wrapper.vm.$emit).not.toHaveBeenCalled();
+      findButton().vm.$emit('click');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('click');
+    });
+    it('triggers the mutation exposing the changed "selected" prop', () => {
+      const { id } = defaultBtn;
+      createComponentWithApollo({
+        propsData: {
+          button: {
+            id,
+          },
+        },
+      });
+      jest.spyOn(wrapper.vm.$apollo, 'mutate');
+      expect(wrapper.vm.$apollo.mutate).not.toHaveBeenCalled();
+      findButton().vm.$emit('click');
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: updateToolbarItemMutation,
+        variables: {
+          id,
+          propsToUpdate: {
+            selected: true,
+          },
+        },
+      });
+    });
+  });
+});