Fix MetricEmbed spec with a HTML fixture

- Fix MutationObserver
- Fix ES6 mock in RelatedIssuableInput spec
- Fix GraphComponent spec with a HTML fixture
- Remove redundant timers in branches_select_spec
- Fix eslint warning about unnamed function
- Remove unneeded regenerator-runtime
- Refactor setup and teardown in mr_rules_spec
- Add MutationObserver to DOM shims
- Fix Jest mock for hoisted variable

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) {
@@ -50,16 +51,12 @@ describe('EE Approvals MRRules', () => {
     return onTargetBranchMutationHandler();
   };
 
-  let OriginalMutationObserver;
-  beforeAll(() => {
+  beforeEach(() => {
     OriginalMutationObserver = global.MutationObserver;
-  });
-
-  afterAll(() => {
-    global.MutationObserver = OriginalMutationObserver;
-  });
+    global.MutationObserver = jest
+      .fn()
+      .mockImplementation(args => new OriginalMutationObserver(args));
 
-  beforeEach(() => {
     store = createStoreOptions(MREditModule());
     store.modules.approvals.state = {
       hasLoaded: true,
@@ -73,19 +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 MutationObserverMock;
 
     beforeEach(() => {
-      MutationObserverMock = jest
-        .fn()
-        .mockImplementation(args => new OriginalMutationObserver(args));
-      global.MutationObserver = MutationObserverMock;
-
       targetBranchInputElement = document.createElement('input');
       targetBranchInputElement.id = 'merge_request_target_branch';
       targetBranchInputElement.value = initialTargetBranch;
@@ -103,7 +95,6 @@ describe('EE Approvals MRRules', () => {
 
     afterEach(() => {
       targetBranchInputElement.parentNode.removeChild(targetBranchInputElement);
-      MutationObserverMock.mockClear();
     });
 
     it('sets the target branch data to be the same value as the target branch dropdown', () => {
@@ -115,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(MutationObserverMock);
+      callTargetBranchHandler(global.MutationObserver);
       expect(wrapper.vm.targetBranch).toBe(newValue);
     });
 
     it('re-fetches rules when target branch has changed', () => {
       factory();
       setTargetBranchInputValue();
-      callTargetBranchHandler(MutationObserverMock);
+      callTargetBranchHandler(global.MutationObserver);
       expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalled();
     });
 
     it('disconnects MutationObserver when component gets destroyed', () => {
       const mockDisconnect = jest.fn();
-      MutationObserverMock.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;

package.json

@@ -199,7 +199,6 @@
     "postcss": "^7.0.14",
     "prettier": "1.18.2",
     "readdir-enhanced": "^2.2.4",
-    "regenerator-runtime": "^0.13.5",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-scss": "^3.9.2",

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/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();

yarn.lock

@@ -9647,11 +9647,6 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@^0.13.5:
-  version "0.13.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
-  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
-
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"