Merge branch 'himkp-jest-vue-shared-3' into 'master'

Migrate 3 specs in vue_shared to Jest

See merge request gitlab-org/gitlab!34001

spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js → spec/frontend/vue_shared/components/deprecated_modal_2_spec.js

-import $ from 'jquery';
 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 
 const modalComponent = Vue.extend(DeprecatedModal2);
@@ -86,7 +85,7 @@ describe('DeprecatedModal2', () => {
     });
   });
 
-  it('works with data-toggle="modal"', done => {
+  it('works with data-toggle="modal"', () => {
     setFixtures(`
       <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
       <div id="modal-container"></div>
@@ -101,9 +100,16 @@ describe('DeprecatedModal2', () => {
       },
       modalContainer,
     );
-    $(vm.$el).on('shown.bs.modal', () => done());
+    const modalElement = document.getElementById('my-modal');
 
     modalButton.click();
+
+    expect(modalElement).not.toHaveClass('show');
+
+    // let the modal fade in
+    jest.runOnlyPendingTimers();
+
+    expect(modalElement).toHaveClass('show');
   });
 
   describe('methods', () => {
@@ -111,7 +117,7 @@ describe('DeprecatedModal2', () => {
 
     beforeEach(() => {
       vm = mountComponent(modalComponent, {});
-      spyOn(vm, '$emit');
+      jest.spyOn(vm, '$emit').mockImplementation(() => {});
     });
 
     describe('emitCancel', () => {
@@ -149,23 +155,14 @@ describe('DeprecatedModal2', () => {
 
   describe('slots', () => {
     const slotContent = 'this should go into the slot';
-    const modalWithSlot = slotName => {
-      let template;
-      if (slotName) {
-        template = `
-          <deprecated-modal-2>
-            <template slot="${slotName}">${slotContent}</template>
-          </deprecated-modal-2>
-        `;
-      } else {
-        template = `<deprecated-modal-2>${slotContent}</deprecated-modal-2>`;
-      }
 
+    const modalWithSlot = slot => {
       return Vue.extend({
         components: {
           DeprecatedModal2,
         },
-        template,
+        render: h =>
+          h('deprecated-modal-2', [slot ? h('template', { slot }, slotContent) : slotContent]),
       });
     };
 

spec/javascripts/vue_shared/components/deprecated_modal_spec.js → spec/frontend/vue_shared/components/deprecated_modal_spec.js

-import $ from 'jquery';
 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 
 const modalComponent = Vue.extend(DeprecatedModal);
@@ -47,7 +46,7 @@ describe('DeprecatedModal', () => {
       });
     });
 
-    it('works with data-toggle="modal"', done => {
+    it('works with data-toggle="modal"', () => {
       setFixtures(`
         <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
         <div id="modal-container"></div>
@@ -63,9 +62,12 @@ describe('DeprecatedModal', () => {
         modalContainer,
       );
       const modalElement = vm.$el.querySelector('#my-modal');
-      $(modalElement).on('shown.bs.modal', () => done());
+
+      expect(modalElement).not.toHaveClass('show');
 
       modalButton.click();
+
+      expect(modalElement).toHaveClass('show');
     });
   });
 });

spec/javascripts/vue_shared/directives/tooltip_spec.js → spec/frontend/vue_shared/directives/tooltip_spec.js

 import $ from 'jquery';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 describe('Tooltip directive', () => {
@@ -13,19 +13,22 @@ describe('Tooltip directive', () => {
 
   describe('with a single tooltip', () => {
     beforeEach(() => {
-      setFixtures('<div id="dummy-element"></div>');
-      vm = new Vue({
-        el: '#dummy-element',
-        directives: {
-          tooltip,
+      const wrapper = mount(
+        {
+          directives: {
+            tooltip,
+          },
+          data() {
+            return {
+              tooltip: 'some text',
+            };
+          },
+          template: '<div v-tooltip :title="tooltip"></div>',
         },
-        data() {
-          return {
-            tooltip: 'some text',
-          };
-        },
-        template: '<div v-tooltip :title="tooltip"></div>',
-      });
+        { attachToDocument: true },
+      );
+
+      vm = wrapper.vm;
     });
 
     it('should have tooltip plugin applied', () => {
@@ -34,48 +37,54 @@ describe('Tooltip directive', () => {
 
     it('displays the title as tooltip', () => {
       $(vm.$el).tooltip('show');
+      jest.runOnlyPendingTimers();
+
       const tooltipElement = document.querySelector('.tooltip-inner');
 
-      expect(tooltipElement.innerText).toContain('some text');
+      expect(tooltipElement.textContent).toContain('some text');
     });
 
-    it('updates a visible tooltip', done => {
+    it('updates a visible tooltip', () => {
       $(vm.$el).tooltip('show');
+      jest.runOnlyPendingTimers();
+
       const tooltipElement = document.querySelector('.tooltip-inner');
 
       vm.tooltip = 'other text';
 
-      Vue.nextTick()
-        .then(() => {
-          expect(tooltipElement).toContainText('other text');
-          done();
-        })
-        .catch(done.fail);
+      jest.runOnlyPendingTimers();
+
+      return vm.$nextTick().then(() => {
+        expect(tooltipElement.textContent).toContain('other text');
+      });
     });
   });
 
   describe('with multiple tooltips', () => {
     beforeEach(() => {
-      const SomeComponent = Vue.extend({
-        directives: {
-          tooltip,
-        },
-        template: `
-          <div>
-            <div
-              v-tooltip
-              class="js-look-for-tooltip"
-              title="foo">
-            </div>
-            <div
-              v-tooltip
-              title="bar">
+      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>
-          </div>
-        `,
-      });
+          `,
+        },
+        { attachToDocument: true },
+      );
 
-      vm = new SomeComponent().$mount();
+      vm = wrapper.vm;
     });
 
     it('should have tooltip plugin applied to all instances', () => {