Merge branch 'himkp-jest-last-few' into 'master'

Migrate last few tests to Jest

Closes #194247 and #194248

See merge request gitlab-org/gitlab!34416

package.json

@@ -210,6 +210,7 @@
     "timezone-mock": "^1.0.8",
     "vue-jest": "^4.0.0-beta.2",
     "webpack-dev-server": "^3.10.3",
+    "xhr-mock": "^2.5.1",
     "yarn-check-webpack-plugin": "^1.2.0",
     "yarn-deduplicate": "^1.1.1"
   },

spec/javascripts/dropzone_input_spec.js → spec/frontend/dropzone_input_spec.js

 import $ from 'jquery';
+import mock from 'xhr-mock';
 import { TEST_HOST } from 'spec/test_constants';
 import dropzoneInput from '~/dropzone_input';
 import PasteMarkdownTable from '~/behaviors/markdown/paste_markdown_table';
+import waitForPromises from 'helpers/wait_for_promises';
 
 const TEST_FILE = new File([], 'somefile.jpg');
 TEST_FILE.upload = {};
@@ -38,14 +40,16 @@ describe('dropzone_input', () => {
     it('pastes Markdown tables', () => {
       const event = $.Event('paste');
       const origEvent = new Event('paste');
-      const pasteData = new DataTransfer();
-      pasteData.setData('text/plain', 'Hello World');
-      pasteData.setData('text/html', '<table><tr><td>Hello World</td></tr></table>');
-      origEvent.clipboardData = pasteData;
+
+      origEvent.clipboardData = {
+        types: ['text/plain', 'text/html'],
+        getData: () => '<table><tr><td>Hello World</td></tr></table>',
+        items: [],
+      };
       event.originalEvent = origEvent;
 
-      spyOn(PasteMarkdownTable.prototype, 'isTable').and.callThrough();
-      spyOn(PasteMarkdownTable.prototype, 'convertToTableMarkdown').and.callThrough();
+      jest.spyOn(PasteMarkdownTable.prototype, 'isTable');
+      jest.spyOn(PasteMarkdownTable.prototype, 'convertToTableMarkdown');
 
       $('.js-gfm-input').trigger(event);
 
@@ -57,53 +61,37 @@ describe('dropzone_input', () => {
   describe('shows error message', () => {
     let form;
     let dropzone;
-    let xhr;
-    let oldXMLHttpRequest;
 
     beforeEach(() => {
+      mock.setup();
+
       form = $(TEMPLATE);
 
       dropzone = dropzoneInput(form);
-
-      xhr = jasmine.createSpyObj(Object.keys(XMLHttpRequest.prototype));
-      oldXMLHttpRequest = window.XMLHttpRequest;
-      window.XMLHttpRequest = () => xhr;
     });
 
     afterEach(() => {
-      window.XMLHttpRequest = oldXMLHttpRequest;
+      mock.teardown();
     });
 
-    it('when AJAX fails with json', () => {
-      xhr = {
-        ...xhr,
-        statusCode: 400,
-        readyState: 4,
-        responseText: JSON.stringify({ message: TEST_ERROR_MESSAGE }),
-        getResponseHeader: () => 'application/json',
-      };
-
-      dropzone.processFile(TEST_FILE);
-
-      xhr.onload();
-
-      expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
-    });
+    beforeEach(() => {});
 
-    it('when AJAX fails with text', () => {
-      xhr = {
-        ...xhr,
-        statusCode: 400,
-        readyState: 4,
-        responseText: TEST_ERROR_MESSAGE,
-        getResponseHeader: () => 'text/plain',
-      };
+    it.each`
+      responseType          | responseBody
+      ${'application/json'} | ${JSON.stringify({ message: TEST_ERROR_MESSAGE })}
+      ${'text/plain'}       | ${TEST_ERROR_MESSAGE}
+    `('when AJAX fails with json', ({ responseType, responseBody }) => {
+      mock.post(TEST_UPLOAD_PATH, {
+        status: 400,
+        body: responseBody,
+        headers: { 'Content-Type': responseType },
+      });
 
       dropzone.processFile(TEST_FILE);
 
-      xhr.onload();
-
-      expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+      return waitForPromises().then(() => {
+        expect(form.find('.uploading-error-message').text()).toEqual(TEST_ERROR_MESSAGE);
+      });
     });
   });
 });

spec/javascripts/pdf/index_spec.js → spec/frontend/pdf/index_spec.js

@@ -3,6 +3,10 @@ import Vue from 'vue';
 import { FIXTURES_PATH } from 'spec/test_constants';
 import PDFLab from '~/pdf/index.vue';
 
+jest.mock('pdfjs-dist/webpack', () => {
+  return { default: jest.requireActual('pdfjs-dist/build/pdf') };
+});
+
 const pdf = `${FIXTURES_PATH}/blob/pdf/test.pdf`;
 
 const Component = Vue.extend(PDFLab);

spec/javascripts/pdf/page_spec.js → spec/frontend/pdf/page_spec.js

 import Vue from 'vue';
-import pdfjsLib from 'pdfjs-dist/webpack';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { FIXTURES_PATH } from 'spec/test_constants';
 import PageComponent from '~/pdf/page/index.vue';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
-const testPDF = `${FIXTURES_PATH}/blob/pdf/test.pdf`;
+jest.mock('pdfjs-dist/webpack', () => {
+  return { default: jest.requireActual('pdfjs-dist/build/pdf') };
+});
 
 describe('Page component', () => {
   const Component = Vue.extend(PageComponent);
   let vm;
-  let testPage;
-
-  beforeEach(done => {
-    pdfjsLib
-      .getDocument(testPDF)
-      .promise.then(pdf => pdf.getPage(1))
-      .then(page => {
-        testPage = page;
-      })
-      .then(done)
-      .catch(done.fail);
-  });
 
   afterEach(() => {
     vm.$destroy();
@@ -29,7 +16,10 @@ describe('Page component', () => {
 
   it('renders the page when mounting', done => {
     const promise = Promise.resolve();
-    spyOn(testPage, 'render').and.returnValue({ promise });
+    const testPage = {
+      render: jest.fn().mockReturnValue({ promise: Promise.resolve() }),
+      getViewport: jest.fn().mockReturnValue({}),
+    };
 
     vm = mountComponent(Component, {
       page: testPage,

spec/javascripts/performance_bar/index_spec.js → spec/frontend/performance_bar/index_spec.js

@@ -9,6 +9,11 @@ describe('performance bar wrapper', () => {
   let vm;
 
   beforeEach(() => {
+    URL.createObjectURL = jest.fn();
+    performance.getEntriesByType = jest.fn().mockReturnValue([]);
+
+    // clear html so that elements from previous tests don't mess with this test
+    document.body.innerHTML = '';
     const peekWrapper = document.createElement('div');
 
     peekWrapper.setAttribute('id', 'js-peek');
@@ -49,11 +54,11 @@ describe('performance bar wrapper', () => {
 
   describe('loadRequestDetails', () => {
     beforeEach(() => {
-      spyOn(vm.store, 'addRequest').and.callThrough();
+      jest.spyOn(vm.store, 'addRequest');
     });
 
     it('does nothing if the request cannot be tracked', () => {
-      spyOn(vm.store, 'canTrackRequest').and.callFake(() => false);
+      jest.spyOn(vm.store, 'canTrackRequest').mockImplementation(() => false);
 
       vm.loadRequestDetails('123', 'https://gitlab.com/');
 
@@ -67,7 +72,7 @@ describe('performance bar wrapper', () => {
     });
 
     it('makes an HTTP request for the request details', () => {
-      spyOn(PerformanceBarService, 'fetchRequestDetails').and.callThrough();
+      jest.spyOn(PerformanceBarService, 'fetchRequestDetails');
 
       vm.loadRequestDetails('456', 'https://gitlab.com/');
 

yarn.lock

@@ -4013,6 +4013,11 @@ dom-serializer@0, dom-serializer@^0.2.1:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -5354,6 +5359,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -7905,6 +7918,13 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
+  dependencies:
+    dom-walk "^0.1.0"
+
 minify@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/minify/-/minify-4.1.2.tgz#88755f4faa5f7ab6d0c64fdd659aa34ea658f180"
@@ -12302,6 +12322,14 @@ xdg-basedir@^4.0.0:
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
   integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
 
+xhr-mock@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/xhr-mock/-/xhr-mock-2.5.1.tgz#c591498a8269cc1ce5fefac20d590357affd348b"
+  integrity sha512-UKOjItqjFgPUwQGPmRAzNBn8eTfIhcGjBVGvKYAWxUQPQsXNGD6KEckGTiHwyaAUp9C9igQlnN1Mp79KWCg7CQ==
+  dependencies:
+    global "^4.3.0"
+    url "^0.11.0"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"