Add support for multiple tooltips in the same Vue component33223-multiple-tooltips-on-the-same-vue-component

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/33223

1 files changed, 62 insertions, 0 deletions

diff --git a/spec/javascripts/vue_shared/mixins/tooltip_spec.js b/spec/javascripts/vue_shared/mixins/tooltip_spec.js
new file mode 100644
index 00000000000..ad11dca4052
--- /dev/null
+++ b/spec/javascripts/vue_shared/mixins/tooltip_spec.js
@@ -0,0 +1,62 @@
+import Vue from 'vue';
+import tooltipMixin from '~/vue_shared/mixins/tooltip';
+
+describe('Tooltip mixin', () => {
+  let vm;
+
+  afterEach(() => {
+    if (vm) {
+      vm.$destroy();
+    }
+  });
+
+  describe('with a single tooltip', () => {
+    beforeEach(() => {
+      const SomeComponent = Vue.extend({
+        mixins: [
+          tooltipMixin,
+        ],
+        template: `
+          <div
+            class="js-vue-tooltip"
+            title="foo">
+          </div>
+        `,
+      });
+
+      vm = new SomeComponent().$mount();
+    });
+
+    it('should have tooltip plugin applied', () => {
+      expect($(vm.$el).data('bs.tooltip')).toBeDefined();
+    });
+  });
+
+  describe('with multiple tooltips', () => {
+    beforeEach(() => {
+      const SomeComponent = Vue.extend({
+        mixins: [
+          tooltipMixin,
+        ],
+        template: `
+          <div>
+            <div
+              class="js-vue-tooltip"
+              title="foo">
+            </div>
+            <div
+              class="js-vue-tooltip"
+              title="bar">
+            </div>
+          </div>
+        `,
+      });
+
+      vm = new SomeComponent().$mount();
+    });
+
+    it('should have tooltip plugin applied to all instances', () => {
+      expect($(vm.$el).find('.js-vue-tooltip').data('bs.tooltip')).toBeDefined();
+    });
+  });
+});