Migrate dropzone_input_spec.js to Jest

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);
+      });
     });
   });
 });

yarn.lock

@@ -3959,6 +3959,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"
@@ -5300,6 +5305,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"
@@ -7851,6 +7864,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"
@@ -12237,6 +12257,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"