Merge branch '212261-jest-helpers-jquery' into 'master'

Jest refactor jquery setup and add import commons

See merge request gitlab-org/gitlab!27862

spec/frontend/blob/blob_file_dropzone_spec.js

@@ -5,10 +5,6 @@ describe('BlobFileDropzone', () => {
   preloadFixtures('blob/show.html');
   let dropzone;
   let replaceFileButton;
-  const jQueryMock = {
-    enable: jest.fn(),
-    disable: jest.fn(),
-  };
 
   beforeEach(() => {
     loadFixtures('blob/show.html');
@@ -18,7 +14,6 @@ describe('BlobFileDropzone', () => {
     dropzone = $('.js-upload-blob-form .dropzone').get(0).dropzone;
     dropzone.processQueue = jest.fn();
     replaceFileButton = $('#submit-all');
-    $.fn.extend(jQueryMock);
   });
 
   describe('submit button', () => {
@@ -43,7 +38,7 @@ describe('BlobFileDropzone', () => {
       replaceFileButton.click();
 
       expect(window.alert).not.toHaveBeenCalled();
-      expect(jQueryMock.enable).toHaveBeenCalled();
+      expect(replaceFileButton.is(':disabled')).toEqual(true);
       expect(dropzone.processQueue).toHaveBeenCalled();
     });
   });

spec/frontend/boards/board_new_issue_spec.js

 /* global List */
 
-import $ from 'jquery';
 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -15,9 +14,6 @@ describe('Issue boards new issue form', () => {
   let list;
   let mock;
   let newIssueMock;
-  const jQueryMock = {
-    enable: jest.fn(),
-  };
   const promiseReturn = {
     data: {
       iid: 100,
@@ -53,8 +49,6 @@ describe('Issue boards new issue form', () => {
       },
     }).$mount(document.querySelector('.test-container'));
 
-    $.fn.extend(jQueryMock);
-
     return Vue.nextTick();
   });
 
@@ -118,7 +112,7 @@ describe('Issue boards new issue form', () => {
       return Vue.nextTick()
         .then(submitIssue)
         .then(() => {
-          expect(jQueryMock.enable).toHaveBeenCalled();
+          expect(vm.$el.querySelector('.btn-success').disabled).toBe(false);
         });
     });
 

spec/frontend/helpers/jquery.js

 import $ from 'jquery';
 
+// Expose jQuery so specs using jQuery plugins can be imported nicely.
+// Here is an issue to explore better alternatives:
+// https://gitlab.com/gitlab-org/gitlab/issues/12448
 global.$ = $;
 global.jQuery = $;
 
+// Fail tests for unmocked requests
+$.ajax = () => {
+  const err = new Error(
+    'Unexpected unmocked jQuery.ajax() call! Make sure to mock jQuery.ajax() in tests.',
+  );
+  global.fail(err);
+  throw err;
+};
+
 export default $;

spec/frontend/mocks/node/jquery.js

-/* eslint-disable import/no-commonjs */
-
-const $ = jest.requireActual('jquery');
-
-// Fail tests for unmocked requests
-$.ajax = () => {
-  const err = new Error(
-    'Unexpected unmocked jQuery.ajax() call! Make sure to mock jQuery.ajax() in tests.',
-  );
-  global.fail(err);
-  throw err;
-};
-
-// jquery is not an ES6 module
-module.exports = $;

spec/frontend/notes/components/notes_app_spec.js

-import $ from 'helpers/jquery';
+import $ from 'jquery';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';

spec/frontend/test_setup.js

 import Vue from 'vue';
 import * as jqueryMatchers from 'custom-jquery-matchers';
-import $ from 'jquery';
 import { config as testUtilsConfig } from '@vue/test-utils';
 import Translate from '~/vue_shared/translate';
 import { initializeTestTimeout } from './helpers/timeout';
@@ -9,11 +8,9 @@ import { setupManualMocks } from './mocks/mocks_helper';
 import customMatchers from './matchers';
 
 import './helpers/dom_shims';
-
-// Expose jQuery so specs using jQuery plugins can be imported nicely.
-// Here is an issue to explore better alternatives:
-// https://gitlab.com/gitlab-org/gitlab/issues/12448
-window.jQuery = $;
+import './helpers/jquery';
+import '~/commons/jquery';
+import '~/commons/bootstrap';
 
 process.on('unhandledRejection', global.promiseRejectionHandler);