Move test file to Jest to make CI pass

This also switches the `initMouseEvent` stuff to not
use the deprecated API. In the process, I stopped
explicitly defining values that default to the same thing.

spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js → spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { compileToFunctions } from 'vue-template-compiler';
+import { mount } from '@vue/test-utils';
+
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
 import imageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue';
 
@@ -14,50 +16,45 @@ describe('ImageDiffViewer', () => {
     oldSize: 2048,
     newSize: 1024,
   };
+  let wrapper;
   let vm;
 
   function createComponent(props) {
     const ImageDiffViewer = Vue.extend(imageDiffViewer);
-    vm = mountComponent(ImageDiffViewer, props);
+    wrapper = mount(ImageDiffViewer, { propsData: props });
+    vm = wrapper.vm;
   }
 
   const triggerEvent = (eventName, el = vm.$el, clientX = 0) => {
-    const event = document.createEvent('MouseEvents');
-    event.initMouseEvent(
-      eventName,
-      true,
-      true,
-      window,
-      1,
-      clientX,
-      0,
+    const event = new MouseEvent(eventName, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      detail: 1,
+      screenX: clientX,
       clientX,
-      0,
-      false,
-      false,
-      false,
-      false,
-      0,
-      null,
-    );
+    });
+
+    // JSDOM does not implement experimental APIs
+    event.pageX = clientX;
 
     el.dispatchEvent(event);
   };
 
-  const dragSlider = (sliderElement, dragPixel = 20) => {
+  const dragSlider = (sliderElement, doc, dragPixel) => {
     triggerEvent('mousedown', sliderElement);
-    triggerEvent('mousemove', document.body, dragPixel);
-    triggerEvent('mouseup', document.body);
+    triggerEvent('mousemove', doc.body, dragPixel);
+    triggerEvent('mouseup', doc.body);
   };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders image diff for replaced', done => {
     createComponent({ ...allProps });
 
-    setTimeout(() => {
+    vm.$nextTick(() => {
       const metaInfoElements = vm.$el.querySelectorAll('.image-info');
 
       expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
@@ -84,7 +81,7 @@ describe('ImageDiffViewer', () => {
   it('renders image diff for new', done => {
     createComponent({ ...allProps, diffMode: 'new', oldPath: '' });
 
-    setTimeout(() => {
+    setImmediate(() => {
       const metaInfoElement = vm.$el.querySelector('.image-info');
 
       expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
@@ -97,7 +94,7 @@ describe('ImageDiffViewer', () => {
   it('renders image diff for deleted', done => {
     createComponent({ ...allProps, diffMode: 'deleted', newPath: '' });
 
-    setTimeout(() => {
+    setImmediate(() => {
       const metaInfoElement = vm.$el.querySelector('.image-info');
 
       expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(RED_BOX_IMAGE_URL);
@@ -116,7 +113,7 @@ describe('ImageDiffViewer', () => {
         ...allProps,
         diffMode: 'renamed',
       },
-      template: `
+      ...compileToFunctions(`
         <image-diff-viewer
           :diff-mode="diffMode"
           :new-path="newPath"
@@ -126,10 +123,10 @@ describe('ImageDiffViewer', () => {
         >
           <span slot="image-overlay" class="overlay">test</span>
         </image-diff-viewer>
-      `,
+      `),
     }).$mount();
 
-    setTimeout(() => {
+    setImmediate(() => {
       const metaInfoElement = vm.$el.querySelector('.image-info');
 
       expect(vm.$el.querySelector('img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL);
@@ -145,7 +142,7 @@ describe('ImageDiffViewer', () => {
     beforeEach(done => {
       createComponent({ ...requiredProps });
 
-      setTimeout(() => {
+      setImmediate(() => {
         done();
       });
     });
@@ -164,7 +161,7 @@ describe('ImageDiffViewer', () => {
     beforeEach(done => {
       createComponent({ ...requiredProps });
 
-      setTimeout(() => {
+      setImmediate(() => {
         done();
       });
     });
@@ -184,7 +181,7 @@ describe('ImageDiffViewer', () => {
       vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click();
 
       vm.$nextTick(() => {
-        dragSlider(vm.$el.querySelector('.dragger'));
+        dragSlider(vm.$el.querySelector('.dragger'), document, 20);
 
         vm.$nextTick(() => {
           expect(vm.$el.querySelector('.dragger').style.left).toBe('20px');