1 files changed, 44 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js
new file mode 100644
index 00000000000..8545c43dc1e
--- /dev/null
+++ b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
+import ToolbarItem from '~/vue_shared/components/rich_content_editor/toolbar_item.vue';
+
+describe('Toolbar Item', () => {
+  let wrapper;
+
+  const findIcon = () => wrapper.find(GlIcon);
+  const findButton = () => wrapper.find('button');
+
+  const buildWrapper = propsData => {
+    wrapper = shallowMount(ToolbarItem, { propsData });
+  };
+
+  describe.each`
+    icon
+    ${'heading'}
+    ${'bold'}
+    ${'italic'}
+    ${'strikethrough'}
+    ${'quote'}
+    ${'link'}
+    ${'doc-code'}
+    ${'list-bulleted'}
+    ${'list-numbered'}
+    ${'list-task'}
+    ${'list-indent'}
+    ${'list-outdent'}
+    ${'dash'}
+    ${'table'}
+    ${'code'}
+  `('toolbar item component', ({ icon }) => {
+    beforeEach(() => buildWrapper({ icon }));
+
+    it('renders a toolbar button', () => {
+      expect(findButton().exists()).toBe(true);
+    });
+
+    it(`renders the ${icon} icon`, () => {
+      expect(findIcon().exists()).toBe(true);
+      expect(findIcon().props().name).toBe(icon);
+    });
+  });
+});