Migrate ee mr_widget_options_spec to Jest

- waitForPromises() was needed in the afterEach
  because otherwise mock.restore() happens first
  and we make a bunch of unmocked requests.

ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js → ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -3,8 +3,9 @@ import MockAdapter from 'axios-mock-adapter';
 import mrWidgetOptions from 'ee/vue_merge_request_widget/mr_widget_options.vue';
 import MRWidgetStore from 'ee/vue_merge_request_widget/stores/mr_widget_store';
 import filterByKey from 'ee/vue_shared/security_reports/store/utils/filter_by_key';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'spec/test_constants';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 
 import mockData, {
   baseIssues,
@@ -13,7 +14,7 @@ import mockData, {
   headPerformance,
   parsedBaseIssues,
   parsedHeadIssues,
-} from 'ee_spec/vue_mr_widget/mock_data';
+} from './mock_data';
 
 import { SUCCESS } from '~/vue_merge_request_widget/components/deployment/constants';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -25,7 +26,7 @@ import {
   containerScanningDiffSuccessMock,
   dependencyScanningDiffSuccessMock,
   secretScanningDiffSuccessMock,
-} from 'ee_spec/vue_shared/security_reports/mock_data';
+} from 'ee_jest/vue_shared/security_reports/mock_data';
 
 const SAST_SELECTOR = '.js-sast-widget';
 const DAST_SELECTOR = '.js-dast-widget';
@@ -58,9 +59,16 @@ describe('ee merge request widget options', () => {
   });
 
   afterEach(() => {
-    vm.$destroy();
-    mock.restore();
-    gon.features = {};
+    // This is needed because the `fetchInitialData` is triggered while
+    // the `mock.restore` is trying to clean up, causing a bunch of
+    // unmocked requests...
+    // This is not ideal and will be cleaned up in
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/214032
+    return waitForPromises().then(() => {
+      vm.$destroy();
+      mock.restore();
+      gon.features = {};
+    });
   });
 
   const findSecurityWidget = () => vm.$el.querySelector('.js-security-widget');
@@ -104,7 +112,7 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               findSecurityWidget().querySelector(
@@ -113,7 +121,7 @@ describe('ee merge request widget options', () => {
             ),
           ).toEqual('SAST detected 1 new, and 2 fixed vulnerabilities');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -126,7 +134,7 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               findSecurityWidget().querySelector(
@@ -135,7 +143,7 @@ describe('ee merge request widget options', () => {
             ).trim(),
           ).toEqual('SAST detected no vulnerabilities');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -148,12 +156,12 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(findSecurityWidget().querySelector(SAST_SELECTOR).textContent),
           ).toContain('SAST: Loading resulted in an error');
           done();
-        }, 0);
+        });
       });
     });
   });
@@ -196,7 +204,7 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               findSecurityWidget().querySelector(
@@ -205,7 +213,7 @@ describe('ee merge request widget options', () => {
             ),
           ).toEqual('Dependency scanning detected 2 new, and 1 fixed vulnerabilities');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -222,7 +230,7 @@ describe('ee merge request widget options', () => {
       });
 
       it('renders no new vulnerabilities message', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               findSecurityWidget().querySelector(
@@ -231,7 +239,7 @@ describe('ee merge request widget options', () => {
             ),
           ).toEqual('Dependency scanning detected no new vulnerabilities');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -244,7 +252,7 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               findSecurityWidget().querySelector(
@@ -253,7 +261,7 @@ describe('ee merge request widget options', () => {
             ),
           ).toEqual('Dependency scanning detected no vulnerabilities');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -265,14 +273,14 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               findSecurityWidget().querySelector(DEPENDENCY_SCANNING_SELECTOR).textContent,
             ),
           ).toContain('Dependency scanning: Loading resulted in an error');
           done();
-        }, 0);
+        });
       });
     });
   });
@@ -320,7 +328,7 @@ describe('ee merge request widget options', () => {
         vm.mr.codeclimate = gl.mrWidgetData.codeclimate;
 
         // mock worker response
-        spyOn(MRWidgetStore, 'doCodeClimateComparison').and.callFake(() =>
+        jest.spyOn(MRWidgetStore, 'doCodeClimateComparison').mockImplementation(() =>
           Promise.resolve({
             newIssues: filterByKey(parsedHeadIssues, parsedBaseIssues, 'fingerprint'),
             resolvedIssues: filterByKey(parsedBaseIssues, parsedHeadIssues, 'fingerprint'),
@@ -329,19 +337,19 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               vm.$el.querySelector('.js-codequality-widget .js-code-text').textContent,
             ),
           ).toEqual('Code quality improved on 1 point and degraded on 1 point');
           done();
-        }, 0);
+        });
       });
 
       describe('text connector', () => {
         it('should only render information about fixed issues', done => {
-          setTimeout(() => {
+          setImmediate(() => {
             vm.mr.codeclimateMetrics.newIssues = [];
 
             Vue.nextTick(() => {
@@ -352,11 +360,11 @@ describe('ee merge request widget options', () => {
               ).toEqual('Code quality improved on 1 point');
               done();
             });
-          }, 0);
+          });
         });
 
         it('should only render information about added issues', done => {
-          setTimeout(() => {
+          setImmediate(() => {
             vm.mr.codeclimateMetrics.resolvedIssues = [];
             Vue.nextTick(() => {
               expect(
@@ -366,7 +374,7 @@ describe('ee merge request widget options', () => {
               ).toEqual('Code quality degraded on 1 point');
               done();
             });
-          }, 0);
+          });
         });
       });
     });
@@ -384,7 +392,7 @@ describe('ee merge request widget options', () => {
         vm.mr.codeclimate = gl.mrWidgetData.codeclimate;
 
         // mock worker response
-        spyOn(MRWidgetStore, 'doCodeClimateComparison').and.callFake(() =>
+        jest.spyOn(MRWidgetStore, 'doCodeClimateComparison').mockImplementation(() =>
           Promise.resolve({
             newIssues: filterByKey([], [], 'fingerprint'),
             resolvedIssues: filterByKey([], [], 'fingerprint'),
@@ -397,14 +405,14 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               vm.$el.querySelector('.js-codequality-widget .js-code-text').textContent,
             ),
           ).toEqual('No changes to code quality');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -420,22 +428,22 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               vm.$el.querySelector('.js-codequality-widget .js-code-text').textContent,
             ),
           ).toContain('Failed to load codeclimate report');
           done();
-        }, 0);
+        });
       });
 
       it('should render a help icon with more information', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(vm.$el.querySelector('.js-codequality-widget .btn-help')).not.toBeNull();
           expect(vm.codequalityPopover.title).toBe('Base pipeline codequality artifact not found');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -452,18 +460,20 @@ describe('ee merge request widget options', () => {
         vm.mr.codeclimate = gl.mrWidgetData.codeclimate;
 
         // mock worker rejection
-        spyOn(MRWidgetStore, 'doCodeClimateComparison').and.callFake(() => Promise.reject());
+        jest
+          .spyOn(MRWidgetStore, 'doCodeClimateComparison')
+          .mockImplementation(() => Promise.reject());
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               vm.$el.querySelector('.js-codequality-widget .js-code-text').textContent,
             ),
           ).toEqual('Failed to load codeclimate report');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -481,14 +491,14 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               vm.$el.querySelector('.js-codequality-widget .js-code-text').textContent,
             ),
           ).toContain('Failed to load codeclimate report');
           done();
-        }, 0);
+        });
       });
     });
   });
@@ -536,19 +546,19 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               vm.$el.querySelector('.js-performance-widget .js-code-text').textContent,
             ),
           ).toEqual('Performance metrics improved on 2 points and degraded on 1 point');
           done();
-        }, 0);
+        });
       });
 
       describe('text connector', () => {
         it('should only render information about fixed issues', done => {
-          setTimeout(() => {
+          setImmediate(() => {
             vm.mr.performanceMetrics.degraded = [];
 
             Vue.nextTick(() => {
@@ -559,11 +569,11 @@ describe('ee merge request widget options', () => {
               ).toEqual('Performance metrics improved on 2 points');
               done();
             });
-          }, 0);
+          });
         });
 
         it('should only render information about added issues', done => {
-          setTimeout(() => {
+          setImmediate(() => {
             vm.mr.performanceMetrics.improved = [];
 
             Vue.nextTick(() => {
@@ -574,7 +584,7 @@ describe('ee merge request widget options', () => {
               ).toEqual('Performance metrics degraded on 1 point');
               done();
             });
-          }, 0);
+          });
         });
       });
     });
@@ -592,7 +602,7 @@ describe('ee merge request widget options', () => {
         vm.mr.performance = gl.mrWidgetData.performance;
 
         // wait for network request from component watch update method
-        setTimeout(done, 0);
+        setImmediate(done);
       });
 
       it('should render provided data', () => {
@@ -628,14 +638,14 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               vm.$el.querySelector('.js-performance-widget .js-code-text').textContent,
             ),
           ).toContain('Failed to load performance report');
           done();
-        }, 0);
+        });
       });
     });
   });
@@ -678,7 +688,7 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             removeBreakLine(
               findSecurityWidget().querySelector(
@@ -687,7 +697,7 @@ describe('ee merge request widget options', () => {
             ),
           ).toEqual('Container scanning detected 2 new, and 1 fixed vulnerabilities');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -700,14 +710,14 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             findSecurityWidget()
               .querySelector(CONTAINER_SCANNING_SELECTOR)
               .textContent.trim(),
           ).toContain('Container scanning: Loading resulted in an error');
           done();
-        }, 0);
+        });
       });
     });
   });
@@ -750,14 +760,14 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render provided data', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             findSecurityWidget()
               .querySelector(`${DAST_SELECTOR} .report-block-list-issue-description`)
               .textContent.trim(),
           ).toEqual('DAST detected 1 new, and 2 fixed vulnerabilities');
           done();
-        }, 0);
+        });
       });
     });
 
@@ -770,14 +780,14 @@ describe('ee merge request widget options', () => {
       });
 
       it('should render error indicator', done => {
-        setTimeout(() => {
+        setImmediate(() => {
           expect(
             findSecurityWidget()
               .querySelector(DAST_SELECTOR)
               .textContent.trim(),
           ).toContain('DAST: Loading resulted in an error');
           done();
-        }, 0);
+        });
       });
     });
   });
@@ -1024,7 +1034,7 @@ describe('ee merge request widget options', () => {
 
   describe('CI widget', () => {
     it('renders the branch in the pipeline widget', () => {
-      const sourceBranchLink = '<a href="https://www.zelda.com/">Link</a>';
+      const sourceBranchLink = '<a href="/to/the/past">Link</a>';
       vm = mountComponent(Component, {
         mrData: {
           ...mockData,
@@ -1034,7 +1044,7 @@ describe('ee merge request widget options', () => {
 
       const ciWidget = vm.$el.querySelector('.mr-state-widget .label-branch');
 
-      expect(ciWidget).toContainHtml(sourceBranchLink);
+      expect(ciWidget.innerHTML).toBe(sourceBranchLink);
     });
   });
 
@@ -1076,7 +1086,7 @@ describe('ee merge request widget options', () => {
       const helperText = getHelperTextElement();
 
       expect(helperText).toExist();
-      expect(helperText).toContainText(
+      expect(helperText.textContent).toContain(
         'This merge request will be added to the merge train when pipeline #123 succeeds.',
       );
     });
@@ -1099,7 +1109,7 @@ describe('ee merge request widget options', () => {
       const helperText = getHelperTextElement();
 
       expect(helperText).toExist();
-      expect(helperText).toContainText(
+      expect(helperText.textContent).toContain(
         'This merge request will start a merge train when pipeline #123 succeeds.',
       );
     });
@@ -1122,7 +1132,7 @@ describe('ee merge request widget options', () => {
       const pipelineLink = getHelperTextElement().querySelector('.js-pipeline-link');
 
       expect(pipelineLink).toExist();
-      expect(pipelineLink).toContainText('#123');
+      expect(pipelineLink.textContent).toContain('#123');
       expect(pipelineLink).toHaveAttr('href', 'path/to/pipeline');
     });
 
@@ -1142,7 +1152,7 @@ describe('ee merge request widget options', () => {
       const pipelineLink = getHelperTextElement().querySelector('.js-documentation-link');
 
       expect(pipelineLink).toExist();
-      expect(pipelineLink).toContainText('More information');
+      expect(pipelineLink.textContent).toContain('More information');
       expect(pipelineLink).toHaveAttr('href', 'path/to/help');
     });
   });
@@ -1163,7 +1173,7 @@ describe('ee merge request widget options', () => {
         },
       });
 
-      expect(vm.service).toEqual(jasmine.objectContaining(convertObjectPropsToCamelCase(paths)));
+      expect(vm.service).toEqual(expect.objectContaining(convertObjectPropsToCamelCase(paths)));
     });
   });