1 files changed, 32 insertions, 19 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
index 8545c43dc1e..2db15a71215 100644
--- 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
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { GlIcon } from '@gitlab/ui';
 import ToolbarItem from '~/vue_shared/components/rich_content_editor/toolbar_item.vue';
 
@@ -9,33 +10,45 @@ describe('Toolbar Item', () => {
   const findButton = () => wrapper.find('button');
 
   const buildWrapper = propsData => {
-    wrapper = shallowMount(ToolbarItem, { propsData });
+    wrapper = shallowMount(ToolbarItem, {
+      propsData,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
   };
 
   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 }));
+    icon               | tooltip
+    ${'heading'}       | ${'Headings'}
+    ${'bold'}          | ${'Add bold text'}
+    ${'italic'}        | ${'Add italic text'}
+    ${'strikethrough'} | ${'Add strikethrough text'}
+    ${'quote'}         | ${'Insert a quote'}
+    ${'link'}          | ${'Add a link'}
+    ${'doc-code'}      | ${'Insert a code block'}
+    ${'list-bulleted'} | ${'Add a bullet list'}
+    ${'list-numbered'} | ${'Add a numbered list'}
+    ${'list-task'}     | ${'Add a task list'}
+    ${'list-indent'}   | ${'Indent'}
+    ${'list-outdent'}  | ${'Outdent'}
+    ${'dash'}          | ${'Add a line'}
+    ${'table'}         | ${'Add a table'}
+    ${'code'}          | ${'Insert an image'}
+    ${'code'}          | ${'Insert inline code'}
+  `('toolbar item component', ({ icon, tooltip }) => {
+    beforeEach(() => buildWrapper({ icon, tooltip }));
 
     it('renders a toolbar button', () => {
       expect(findButton().exists()).toBe(true);
     });
 
+    it('renders the correct tooltip', () => {
+      const buttonTooltip = getBinding(wrapper.element, 'gl-tooltip');
+      expect(buttonTooltip).toBeDefined();
+      expect(buttonTooltip.value.title).toBe(tooltip);
+    });
+
     it(`renders the ${icon} icon`, () => {
       expect(findIcon().exists()).toBe(true);
       expect(findIcon().props().name).toBe(icon);