1 files changed, 98 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/directives/tooltip_spec.js b/spec/frontend/vue_shared/directives/tooltip_spec.js
new file mode 100644
index 00000000000..9d3dd3c5f75
--- /dev/null
+++ b/spec/frontend/vue_shared/directives/tooltip_spec.js
@@ -0,0 +1,98 @@
+import $ from 'jquery';
+import { mount } from '@vue/test-utils';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+describe('Tooltip directive', () => {
+  let vm;
+
+  afterEach(() => {
+    if (vm) {
+      vm.$destroy();
+    }
+  });
+
+  describe('with a single tooltip', () => {
+    beforeEach(() => {
+      const wrapper = mount(
+        {
+          directives: {
+            tooltip,
+          },
+          data() {
+            return {
+              tooltip: 'some text',
+            };
+          },
+          template: '<div v-tooltip :title="tooltip"></div>',
+        },
+        { attachToDocument: true },
+      );
+
+      vm = wrapper.vm;
+    });
+
+    it('should have tooltip plugin applied', () => {
+      expect($(vm.$el).data('bs.tooltip')).toBeDefined();
+    });
+
+    it('displays the title as tooltip', () => {
+      $(vm.$el).tooltip('show');
+      jest.runOnlyPendingTimers();
+
+      const tooltipElement = document.querySelector('.tooltip-inner');
+
+      expect(tooltipElement.textContent).toContain('some text');
+    });
+
+    it('updates a visible tooltip', () => {
+      $(vm.$el).tooltip('show');
+      jest.runOnlyPendingTimers();
+
+      const tooltipElement = document.querySelector('.tooltip-inner');
+
+      vm.tooltip = 'other text';
+
+      jest.runOnlyPendingTimers();
+
+      return vm.$nextTick().then(() => {
+        expect(tooltipElement.textContent).toContain('other text');
+      });
+    });
+  });
+
+  describe('with multiple tooltips', () => {
+    beforeEach(() => {
+      const wrapper = mount(
+        {
+          directives: {
+            tooltip,
+          },
+          template: `
+            <div>
+              <div
+                v-tooltip
+                class="js-look-for-tooltip"
+                title="foo">
+              </div>
+              <div
+                v-tooltip
+                title="bar">
+              </div>
+            </div>
+          `,
+        },
+        { attachToDocument: true },
+      );
+
+      vm = wrapper.vm;
+    });
+
+    it('should have tooltip plugin applied to all instances', () => {
+      expect(
+        $(vm.$el)
+          .find('.js-look-for-tooltip')
+          .data('bs.tooltip'),
+      ).toBeDefined();
+    });
+  });
+});