Move Secure Tests from Karma to Jest

This moves the last three Secure tests from Karma to Jest

ee/app/assets/javascripts/vue_shared/security_reports/store/actions.js

@@ -511,11 +511,11 @@ export const createMergeRequest = ({ state, dispatch }) => {
 };
 
 export const downloadPatch = ({ state }) => {
-  /* 
+  /*
     This action doesn't actually mutate the Vuex state and is a dirty
-    workaround to modifying the dom. We do this because gl-split-button 
-    relies on a old version of vue-bootstrap and it doesn't allow us to 
-    set a href for a file download. 
+    workaround to modifying the dom. We do this because gl-split-button
+    relies on a old version of vue-bootstrap and it doesn't allow us to
+    set a href for a file download.
 
     https://gitlab.com/gitlab-org/gitlab-ui/issues/188#note_165808493
   */

ee/spec/javascripts/vue_shared/security_reports/grouped_security_reports_app_spec.js → ee/spec/frontend/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -6,9 +6,10 @@ import * as types from 'ee/vue_shared/security_reports/store/mutation_types';
 import sastState from 'ee/vue_shared/security_reports/store/modules/sast/state';
 import * as sastTypes from 'ee/vue_shared/security_reports/store/modules/sast/mutation_types';
 import { mount } from '@vue/test-utils';
-import { waitForMutation } from 'spec/helpers/vue_test_utils_helper';
-import { trimText } from 'spec/helpers/text_helper';
+import { waitForMutation } from 'helpers/vue_test_utils_helper';
+import { trimText } from 'helpers/text_helper';
 import axios from '~/lib/utils/axios_utils';
+
 import {
   sastDiffSuccessMock,
   dastDiffSuccessMock,
@@ -82,7 +83,7 @@ describe('Grouped security reports app', () => {
     });
 
     describe('with error', () => {
-      beforeEach(done => {
+      beforeEach(() => {
         mock.onGet(CONTAINER_SCANNING_DIFF_ENDPOINT).reply(500);
         mock.onGet(DEPENDENCY_SCANNING_DIFF_ENDPOINT).reply(500);
         mock.onGet(DAST_DIFF_ENDPOINT).reply(500);
@@ -90,14 +91,12 @@ describe('Grouped security reports app', () => {
 
         createWrapper(allReportProps);
 
-        Promise.all([
+        return Promise.all([
           waitForMutation(wrapper.vm.$store, `sast/${sastTypes.RECEIVE_DIFF_ERROR}`),
           waitForMutation(wrapper.vm.$store, types.RECEIVE_SAST_CONTAINER_DIFF_ERROR),
           waitForMutation(wrapper.vm.$store, types.RECEIVE_DAST_DIFF_ERROR),
           waitForMutation(wrapper.vm.$store, types.RECEIVE_DEPENDENCY_SCANNING_DIFF_ERROR),
-        ])
-          .then(done)
-          .catch(done.fail);
+        ]);
       });
 
       it('renders error state', () => {
@@ -154,7 +153,7 @@ describe('Grouped security reports app', () => {
     });
 
     describe('with successful responses', () => {
-      beforeEach(done => {
+      beforeEach(() => {
         mock.onGet(CONTAINER_SCANNING_DIFF_ENDPOINT).reply(200, containerScanningDiffSuccessMock);
         mock.onGet(DEPENDENCY_SCANNING_DIFF_ENDPOINT).reply(200, dependencyScanningDiffSuccessMock);
         mock.onGet(DAST_DIFF_ENDPOINT).reply(200, dastDiffSuccessMock);
@@ -162,14 +161,12 @@ describe('Grouped security reports app', () => {
 
         createWrapper(allReportProps);
 
-        Promise.all([
+        return Promise.all([
           waitForMutation(wrapper.vm.$store, `sast/${sastTypes.RECEIVE_DIFF_SUCCESS}`),
           waitForMutation(wrapper.vm.$store, types.RECEIVE_DAST_DIFF_SUCCESS),
           waitForMutation(wrapper.vm.$store, types.RECEIVE_SAST_CONTAINER_DIFF_SUCCESS),
           waitForMutation(wrapper.vm.$store, types.RECEIVE_DEPENDENCY_SCANNING_DIFF_SUCCESS),
-        ])
-          .then(done)
-          .catch(done.fail);
+        ]);
       });
 
       it('renders reports', () => {
@@ -207,33 +204,26 @@ describe('Grouped security reports app', () => {
         );
       });
 
-      it('opens modal with more information', done => {
-        setTimeout(() => {
-          wrapper.vm.$el.querySelector('.break-link').click();
+      it('opens modal with more information', () => {
+        wrapper.vm.$el.querySelector('.break-link').click();
 
-          Vue.nextTick(() => {
-            expect(wrapper.vm.$el.querySelector('.modal-title').textContent.trim()).toEqual(
-              mockFindings[0].name,
-            );
-
-            expect(wrapper.vm.$el.querySelector('.modal-body').textContent).toContain(
-              mockFindings[0].solution,
-            );
+        return Vue.nextTick().then(() => {
+          expect(wrapper.vm.$el.querySelector('.modal-title').textContent.trim()).toEqual(
+            mockFindings[0].name,
+          );
 
-            done();
-          });
-        }, 0);
+          expect(wrapper.vm.$el.querySelector('.modal-body').textContent).toContain(
+            mockFindings[0].solution,
+          );
+        });
       });
 
-      it('has the success icon for fixed vulnerabilities', done => {
-        setTimeout(() => {
-          const icon = wrapper.vm.$el.querySelector(
-            '.js-sast-container~.js-plain-element .ic-status_success_borderless',
-          );
+      it('has the success icon for fixed vulnerabilities', () => {
+        const icon = wrapper.vm.$el.querySelector(
+          '.js-sast-container~.js-plain-element .ic-status_success_borderless',
+        );
 
-          expect(icon).not.toBeNull();
-          done();
-        }, 0);
+        expect(icon).not.toBeNull();
       });
     });
   });
@@ -257,7 +247,7 @@ describe('Grouped security reports app', () => {
   });
 
   describe('container scanning reports', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       gl.mrWidgetData = gl.mrWidgetData || {};
       gl.mrWidgetData.container_scanning_comparison_path = CONTAINER_SCANNING_DIFF_ENDPOINT;
 
@@ -270,9 +260,7 @@ describe('Grouped security reports app', () => {
         },
       });
 
-      waitForMutation(wrapper.vm.$store, types.RECEIVE_SAST_CONTAINER_DIFF_SUCCESS)
-        .then(done)
-        .catch(done.fail);
+      return waitForMutation(wrapper.vm.$store, types.RECEIVE_SAST_CONTAINER_DIFF_SUCCESS);
     });
 
     it('should set setSastContainerDiffEndpoint', () => {
@@ -287,7 +275,7 @@ describe('Grouped security reports app', () => {
   });
 
   describe('dependency scanning reports', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       gl.mrWidgetData = gl.mrWidgetData || {};
       gl.mrWidgetData.dependency_scanning_comparison_path = DEPENDENCY_SCANNING_DIFF_ENDPOINT;
 
@@ -300,9 +288,7 @@ describe('Grouped security reports app', () => {
         },
       });
 
-      waitForMutation(wrapper.vm.$store, types.RECEIVE_DEPENDENCY_SCANNING_DIFF_SUCCESS)
-        .then(done)
-        .catch(done.fail);
+      return waitForMutation(wrapper.vm.$store, types.RECEIVE_DEPENDENCY_SCANNING_DIFF_SUCCESS);
     });
 
     it('should set setDependencyScanningDiffEndpoint', () => {
@@ -319,7 +305,7 @@ describe('Grouped security reports app', () => {
   });
 
   describe('dast reports', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       gl.mrWidgetData = gl.mrWidgetData || {};
       gl.mrWidgetData.dast_comparison_path = DAST_DIFF_ENDPOINT;
 
@@ -334,9 +320,7 @@ describe('Grouped security reports app', () => {
         },
       });
 
-      waitForMutation(wrapper.vm.$store, types.RECEIVE_DAST_DIFF_SUCCESS)
-        .then(done)
-        .catch(done.fail);
+      return waitForMutation(wrapper.vm.$store, types.RECEIVE_DAST_DIFF_SUCCESS);
     });
 
     it('should set setDastDiffEndpoint', () => {
@@ -357,7 +341,7 @@ describe('Grouped security reports app', () => {
   });
 
   describe('sast reports', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       gl.mrWidgetData = gl.mrWidgetData || {};
       gl.mrWidgetData.sast_comparison_path = SAST_DIFF_ENDPOINT;
       gl.mrWidgetData.diverged_commits_count = 100;
@@ -374,9 +358,7 @@ describe('Grouped security reports app', () => {
         },
       });
 
-      waitForMutation(wrapper.vm.$store, `sast/${sastTypes.RECEIVE_DIFF_SUCCESS}`)
-        .then(done)
-        .catch(done.fail);
+      return waitForMutation(wrapper.vm.$store, `sast/${sastTypes.RECEIVE_DIFF_SUCCESS}`);
     });
 
     it('should set setSastDiffEndpoint', () => {

ee/spec/javascripts/vue_shared/security_reports/store/actions_spec.js → ee/spec/frontend/vue_shared/security_reports/store/actions_spec.js

-import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
-import actions, {
+import {
   setHeadBlobPath,
   setBaseBlobPath,
   setVulnerabilityFeedbackPath,
@@ -70,7 +69,7 @@ import actions, {
 } from 'ee/vue_shared/security_reports/store/actions';
 import * as types from 'ee/vue_shared/security_reports/store/mutation_types';
 import state from 'ee/vue_shared/security_reports/store/state';
-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import axios from '~/lib/utils/axios_utils';
 import {
   sastIssues,
@@ -84,6 +83,17 @@ import {
   containerScanningFeedbacks,
   dependencyScanningFeedbacks,
 } from '../mock_data';
+import toasted from '~/vue_shared/plugins/global_toast';
+
+// Mock bootstrap modal implementation
+jest.mock('jquery', () => () => ({
+  modal: jest.fn(),
+}));
+jest.mock('~/lib/utils/url_utility', () => ({
+  visitUrl: jest.fn(),
+}));
+
+jest.mock('~/vue_shared/plugins/global_toast', () => jest.fn());
 
 const createVulnerability = options => ({
   ...options,
@@ -113,6 +123,7 @@ describe('security reports actions', () => {
 
   afterEach(() => {
     mock.restore();
+    toasted.mockClear();
   });
 
   describe('setHeadBlobPath', () => {
@@ -967,7 +978,7 @@ describe('security reports actions', () => {
         mockedState.createVulnerabilityFeedbackDismissalPath = 'dismiss_vulnerability_path';
       });
 
-      it(`should dispatch ${types.receiveDismissVulnerability}`, done => {
+      it(`should dispatch receiveDismissVulnerability`, done => {
         testAction(
           dismissVulnerability,
           payload,
@@ -990,10 +1001,8 @@ describe('security reports actions', () => {
       });
 
       it('show dismiss vulnerability toast message', done => {
-        spyOn(Vue.toasted, 'show');
-
         const checkToastMessage = () => {
-          expect(Vue.toasted.show).toHaveBeenCalledTimes(1);
+          expect(toasted).toHaveBeenCalledTimes(1);
           done();
         };
 
@@ -1076,10 +1085,8 @@ describe('security reports actions', () => {
       });
 
       it('should show added dismissal comment toast message', done => {
-        spyOn(Vue.toasted, 'show').and.callThrough();
-
         const checkToastMessage = () => {
-          expect(Vue.toasted.show).toHaveBeenCalledTimes(1);
+          expect(toasted).toHaveBeenCalledTimes(1);
           done();
         };
 
@@ -1203,10 +1210,8 @@ describe('security reports actions', () => {
       });
 
       it('should show deleted dismissal comment toast message', done => {
-        spyOn(Vue.toasted, 'show').and.callThrough();
-
         const checkToastMessage = () => {
-          expect(Vue.toasted.show).toHaveBeenCalledTimes(1);
+          expect(toasted).toHaveBeenCalledTimes(1);
           done();
         };
 
@@ -1440,10 +1445,6 @@ describe('security reports actions', () => {
   });
 
   describe('createNewIssue', () => {
-    beforeEach(() => {
-      spyOnDependency(actions, 'visitUrl');
-    });
-
     it('with success should dispatch `requestCreateIssue` and `receiveCreateIssue`', done => {
       mock.onPost('create_issue_path').reply(200, { issue_path: 'new_issue' });
       mockedState.createVulnerabilityFeedbackIssuePath = 'create_issue_path';
@@ -1490,9 +1491,9 @@ describe('security reports actions', () => {
 
   describe('downloadPatch', () => {
     it('creates a download link and clicks on it to download the file', () => {
-      spyOn(document, 'createElement').and.callThrough();
-      spyOn(document.body, 'appendChild').and.callThrough();
-      spyOn(document.body, 'removeChild').and.callThrough();
+      jest.spyOn(document, 'createElement');
+      jest.spyOn(document.body, 'appendChild');
+      jest.spyOn(document.body, 'removeChild');
 
       downloadPatch({
         state: {
@@ -1569,10 +1570,6 @@ describe('security reports actions', () => {
   });
 
   describe('createMergeRequest', () => {
-    beforeEach(() => {
-      spyOnDependency(actions, 'visitUrl');
-    });
-
     it('with success should dispatch `receiveCreateMergeRequestSuccess`', done => {
       const data = { merge_request_path: 'fakepath.html' };
       mockedState.createVulnerabilityFeedbackMergeRequestPath = 'create_merge_request_path';

ee/spec/javascripts/vue_shared/security_reports/store/utils/download_patch_helper_spec.js → ee/spec/frontend/vue_shared/security_reports/store/utils/download_patch_helper_spec.js

 import downloadPatchHelper from 'ee/vue_shared/security_reports/store/utils/download_patch_helper';
 
 describe('downloadPatchHelper', () => {
-  beforeAll(() => {
-    spyOn(document, 'createElement').and.callThrough();
-    spyOn(document.body, 'appendChild').and.callThrough();
-    spyOn(document.body, 'removeChild').and.callThrough();
-  });
-
-  afterEach(() => {
-    document.createElement.calls.reset();
-    document.body.appendChild.calls.reset();
-    document.body.removeChild.calls.reset();
+  beforeEach(() => {
+    jest.spyOn(document, 'createElement');
+    jest.spyOn(document.body, 'appendChild');
+    jest.spyOn(document.body, 'removeChild');
   });
 
   describe('with a base64 encoded string', () => {
@@ -25,7 +19,7 @@ describe('downloadPatchHelper', () => {
 
       downloadPatchHelper(base64String);
 
-      expect(document.createElement).toHaveBeenCalledTimes(1);
+      expect(document.createElement).toHaveBeenCalledWith('a');
       expect(document.body.appendChild).toHaveBeenCalledTimes(1);
       expect(document.body.removeChild).toHaveBeenCalledTimes(1);
     });
@@ -43,7 +37,7 @@ describe('downloadPatchHelper', () => {
 
       downloadPatchHelper(unencodedString, { isEncoded: false });
 
-      expect(document.createElement).toHaveBeenCalledTimes(1);
+      expect(document.createElement).toHaveBeenCalledWith('a');
       expect(document.body.appendChild).toHaveBeenCalledTimes(1);
       expect(document.body.removeChild).toHaveBeenCalledTimes(1);
     });