Merge branch 'leipert-enable-asyncawait-in-jest' into 'master'

Enable async/await in Jest

See merge request gitlab-org/gitlab!23606

app/assets/javascripts/filtered_search/services/recent_searches_service_error.js

 import { __ } from '~/locale';
 
-class RecentSearchesServiceError {
+class RecentSearchesServiceError extends Error {
   constructor(message) {
+    super(message || __('Recent Searches Service is unavailable'));
     this.name = 'RecentSearchesServiceError';
-    this.message = message || __('Recent Searches Service is unavailable');
   }
 }
 
-// Can't use `extends` for builtin prototypes and get true inheritance yet
-RecentSearchesServiceError.prototype = Error.prototype;
-
 export default RecentSearchesServiceError;

babel.config.js

@@ -2,7 +2,7 @@
 
 const BABEL_ENV = process.env.BABEL_ENV || process.env.NODE_ENV || null;
 
-const presets = [
+let presets = [
   [
     '@babel/preset-env',
     {
@@ -49,6 +49,17 @@ if (isJest) {
   https://gitlab.com/gitlab-org/gitlab-foss/issues/58390
   */
   plugins.push('babel-plugin-dynamic-import-node');
+
+  presets = [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ];
 }
 
 module.exports = { presets, plugins, sourceType: 'unambiguous' };

ee/spec/frontend/approvals/components/branches_select_spec.js

@@ -38,7 +38,6 @@ describe('Branches Select', () => {
 
   const search = (term = '') => {
     $input.select2('search', term);
-    jest.runAllTimers();
   };
 
   beforeEach(() => {
@@ -48,7 +47,6 @@ describe('Branches Select', () => {
   });
 
   afterEach(() => {
-    jest.clearAllTimers();
     wrapper.destroy();
   });
 

ee/spec/frontend/approvals/components/mr_edit/mr_rules_spec.js

@@ -17,6 +17,7 @@ describe('EE Approvals MRRules', () => {
   let wrapper;
   let store;
   let approvalRules;
+  let OriginalMutationObserver;
 
   const factory = () => {
     if (approvalRules) {
@@ -51,6 +52,11 @@ describe('EE Approvals MRRules', () => {
   };
 
   beforeEach(() => {
+    OriginalMutationObserver = global.MutationObserver;
+    global.MutationObserver = jest
+      .fn()
+      .mockImplementation(args => new OriginalMutationObserver(args));
+
     store = createStoreOptions(MREditModule());
     store.modules.approvals.state = {
       hasLoaded: true,
@@ -64,16 +70,14 @@ describe('EE Approvals MRRules', () => {
     wrapper = null;
     store = null;
     approvalRules = null;
+    global.MutationObserver = OriginalMutationObserver;
   });
 
   describe('when editing a MR', () => {
     const initialTargetBranch = 'master';
     let targetBranchInputElement;
-    let MutationObserverSpy;
 
     beforeEach(() => {
-      MutationObserverSpy = jest.spyOn(global, 'MutationObserver');
-
       targetBranchInputElement = document.createElement('input');
       targetBranchInputElement.id = 'merge_request_target_branch';
       targetBranchInputElement.value = initialTargetBranch;
@@ -91,7 +95,6 @@ describe('EE Approvals MRRules', () => {
 
     afterEach(() => {
       targetBranchInputElement.parentNode.removeChild(targetBranchInputElement);
-      MutationObserverSpy.mockClear();
     });
 
     it('sets the target branch data to be the same value as the target branch dropdown', () => {
@@ -103,20 +106,20 @@ describe('EE Approvals MRRules', () => {
     it('updates the target branch data when the target branch dropdown is changed', () => {
       factory();
       const newValue = setTargetBranchInputValue();
-      callTargetBranchHandler(MutationObserverSpy);
+      callTargetBranchHandler(global.MutationObserver);
       expect(wrapper.vm.targetBranch).toBe(newValue);
     });
 
     it('re-fetches rules when target branch has changed', () => {
       factory();
       setTargetBranchInputValue();
-      callTargetBranchHandler(MutationObserverSpy);
+      callTargetBranchHandler(global.MutationObserver);
       expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalled();
     });
 
     it('disconnects MutationObserver when component gets destroyed', () => {
       const mockDisconnect = jest.fn();
-      MutationObserverSpy.mockImplementation(() => ({
+      global.MutationObserver.mockImplementation(() => ({
         disconnect: mockDisconnect,
         observe: jest.fn(),
       }));

ee/spec/frontend/related_issues/components/related_issuable_input_spec.js

@@ -3,15 +3,14 @@ import { TEST_HOST } from 'helpers/test_constants';
 import { issuableTypesMap, PathIdSeparator } from 'ee/related_issues/constants';
 import RelatedIssuableInput from 'ee/related_issues/components/related_issuable_input.vue';
 
-jest.mock('ee_else_ce/gfm_auto_complete', () => ({
-  __esModule: true,
-  default() {
+jest.mock('ee_else_ce/gfm_auto_complete', () => {
+  return function gfmAutoComplete() {
     return {
       constructor() {},
       setup() {},
     };
-  },
-}));
+  };
+});
 
 describe('RelatedIssuableInput', () => {
   let propsData;

spec/frontend/blob/components/blob_header_filepath_spec.js

@@ -4,9 +4,8 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import { Blob as MockBlob } from './mock_data';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 
-const mockHumanReadableSize = 'a lot';
 jest.mock('~/lib/utils/number_utils', () => ({
-  numberToHumanSize: jest.fn(() => mockHumanReadableSize),
+  numberToHumanSize: jest.fn(() => 'a lot'),
 }));
 
 describe('Blob Header Filepath', () => {
@@ -57,7 +56,7 @@ describe('Blob Header Filepath', () => {
     it('renders filesize in a human-friendly format', () => {
       createComponent();
       expect(numberToHumanSize).toHaveBeenCalled();
-      expect(wrapper.vm.blobSize).toBe(mockHumanReadableSize);
+      expect(wrapper.vm.blobSize).toBe('a lot');
     });
 
     it('renders a slot and prepends its contents to the existing one', () => {

spec/frontend/helpers/dom_shims/index.js

@@ -4,6 +4,7 @@ import './element_scroll_to';
 import './form_element';
 import './get_client_rects';
 import './inner_text';
+import './mutation_observer';
 import './window_scroll_to';
 import './scroll_by';
 import './size_properties';

spec/frontend/helpers/dom_shims/mutation_observer.js

+/* eslint-disable class-methods-use-this */
+class MutationObserverStub {
+  disconnect() {}
+  observe() {}
+}
+
+global.MutationObserver = MutationObserverStub;

spec/frontend/ide/components/commit_sidebar/form_spec.js

@@ -69,24 +69,19 @@ describe('IDE commit form', () => {
       });
     });
 
-    it('collapses if lastCommitMsg is set to empty and current view is not commit view', () => {
+    it('collapses if lastCommitMsg is set to empty and current view is not commit view', async () => {
       store.state.lastCommitMsg = 'abc';
       store.state.currentActivityView = leftSidebarViews.edit.name;
+      await vm.$nextTick();
 
-      return vm
-        .$nextTick()
-        .then(() => {
-          // if commit message is set, form is uncollapsed
-          expect(vm.isCompact).toBe(false);
+      // if commit message is set, form is uncollapsed
+      expect(vm.isCompact).toBe(false);
 
-          store.state.lastCommitMsg = '';
+      store.state.lastCommitMsg = '';
+      await vm.$nextTick();
 
-          return vm.$nextTick();
-        })
-        .then(() => {
-          // collapsed when set to empty
-          expect(vm.isCompact).toBe(true);
-        });
+      // collapsed when set to empty
+      expect(vm.isCompact).toBe(true);
     });
   });
 

spec/frontend/monitoring/components/embeds/metric_embed_spec.js

@@ -4,6 +4,7 @@ import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 import { groups, initialState, metricsData, metricsWithData } from './mock_data';
+import { setHTMLFixture } from 'helpers/fixtures';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -25,6 +26,8 @@ describe('MetricEmbed', () => {
   }
 
   beforeEach(() => {
+    setHTMLFixture('<div class="layout-page"></div>');
+
     actions = {
       setInitialState: jest.fn(),
       setShowErrorBanner: jest.fn(),

spec/frontend/pipelines/graph/graph_component_spec.js

@@ -7,6 +7,7 @@ import linkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines
 import graphJSON from './mock_data';
 import linkedPipelineJSON from './linked_pipelines_mock_data';
 import PipelinesMediator from '~/pipelines/pipeline_details_mediator';
+import { setHTMLFixture } from 'helpers/fixtures';
 
 describe('graph component', () => {
   const store = new PipelineStore();
@@ -15,6 +16,10 @@ describe('graph component', () => {
 
   let wrapper;
 
+  beforeEach(() => {
+    setHTMLFixture('<div class="layout-page"></div>');
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;

spec/frontend/test_setup.js

@@ -43,15 +43,6 @@ Object.assign(global, {
   preloadFixtures() {},
 });
 
-Object.assign(global, {
-  MutationObserver() {
-    return {
-      disconnect() {},
-      observe() {},
-    };
-  },
-});
-
 // custom-jquery-matchers was written for an old Jest version, we need to make it compatible
 Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
   // Don't override existing Jest matcher
@@ -69,12 +60,6 @@ expect.extend(customMatchers);
 // Tech debt issue TBD
 testUtilsConfig.logModifiedComponents = false;
 
-// Basic stub for MutationObserver
-global.MutationObserver = () => ({
-  disconnect: () => {},
-  observe: () => {},
-});
-
 Object.assign(global, {
   requestIdleCallback(cb) {
     const start = Date.now();