Merge branch '5831-security-apps' into 'master'

Resolve "Security reports app tests are not 100% correct"

Closes #5831

See merge request gitlab-org/gitlab-ee!5821

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -9,7 +9,7 @@ import eventHub from './event_hub';
 
 import SecurityReportApp from 'ee/vue_shared/security_reports/split_security_reports_app.vue'; // eslint-disable-line import/first
 import SastSummaryWidget from 'ee/pipelines/components/security_reports/report_summary_widget.vue'; // eslint-disable-line import/first
-import store from 'ee/vue_shared/security_reports/store'; // eslint-disable-line import/first
+import createStore from 'ee/vue_shared/security_reports/store'; // eslint-disable-line import/first
 
 Vue.use(Translate);
 
@@ -116,6 +116,8 @@ export default () => {
     const vulnerabilityFeedbackPath = datasetOptions.vulnerabilityFeedbackPath;
     const vulnerabilityFeedbackHelpPath = datasetOptions.vulnerabilityFeedbackHelpPath;
     const pipelineId = parseInt(datasetOptions.pipelineId, 10);
+
+    const store = createStore();
     // Widget summary
     // eslint-disable-next-line no-new
     new Vue({

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { SAST, DAST, SAST_CONTAINER } from './store/constants';
-import store from './store';
+import createStore from './store';
 import ReportSection from './components/report_section.vue';
 import SummaryRow from './components/summary_row.vue';
 import IssuesList from './components/issues_list.vue';
@@ -9,7 +9,7 @@ import IssueModal from './components/modal.vue';
 import securityReportsMixin from './mixins/security_report_mixin';
 
 export default {
-  store,
+  store: createStore(),
   components: {
     ReportSection,
     SummaryRow,

ee/app/assets/javascripts/vue_shared/security_reports/split_security_reports_app.vue

@@ -3,14 +3,12 @@ import { mapActions, mapState } from 'vuex';
 import { s__, sprintf, n__ } from '~/locale';
 import createFlash from '~/flash';
 import { SAST } from './store/constants';
-import store from './store';
 import ReportSection from './components/report_section.vue';
 import IssueModal from './components/modal.vue';
 import mixin from './mixins/security_report_mixin';
 import reportsMixin from './mixins/reports_mixin';
 
 export default {
-  store,
   components: {
     ReportSection,
     IssueModal,

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

@@ -7,11 +7,9 @@ import state from './state';
 
 Vue.use(Vuex);
 
-const store = new Vuex.Store({
+export default () => new Vuex.Store({
   actions,
   getters,
   mutations,
   state: state(),
 });
-
-export default store;

spec/javascripts/vue_shared/security_reports/components/modal_spec.js

 import Vue from 'vue';
 import component from 'ee/vue_shared/security_reports/components/modal.vue';
-import store from 'ee/vue_shared/security_reports/store';
+import createStore from 'ee/vue_shared/security_reports/store';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 
 describe('Security Reports modal', () => {
   const Component = Vue.extend(component);
   let vm;
+  const store = createStore();
 
   beforeEach(() => {
     store.dispatch('setVulnerabilityFeedbackPath', 'path');

spec/javascripts/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -32,9 +32,9 @@ describe('Grouped security reports app', () => {
   });
 
   afterEach(() => {
+    vm.$store.replaceState(state());
     vm.$destroy();
     mock.restore();
-    vm.$store.replaceState(state());
   });
 
   describe('with error', () => {
@@ -126,7 +126,7 @@ describe('Grouped security reports app', () => {
       });
     });
 
-    it('renders loading summary text + spinner', () => {
+    it('renders loading summary text + spinner', (done) => {
       expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
       expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
         'Security scanning is loading',
@@ -137,6 +137,10 @@ describe('Grouped security reports app', () => {
       expect(vm.$el.textContent).toContain('Dependency scanning is loading');
       expect(vm.$el.textContent).toContain('Container scanning is loading');
       expect(vm.$el.textContent).toContain('DAST is loading');
+
+      setTimeout(() => {
+        done();
+      }, 0);
     });
   });
 
@@ -175,19 +179,30 @@ describe('Grouped security reports app', () => {
 
     it('renders reports', done => {
       setTimeout(() => {
+        // It's not loading
         expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
+
+        // Renders the summary text
         expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
-          'Security scanning detected 12 new vulnerabilities and 4 fixed vulnerabilities',
+          'Security scanning detected 6 new vulnerabilities and 2 fixed vulnerabilities',
         );
+
+        // Renders the expand button
         expect(vm.$el.querySelector('.js-collapse-btn').textContent.trim()).toEqual('Expand');
 
+        // Renders Sast result
         expect(removeBreakLine(vm.$el.textContent)).toContain(
           'SAST detected 2 new vulnerabilities and 1 fixed vulnerability',
         );
+
+        // Renders DSS result
         expect(removeBreakLine(vm.$el.textContent)).toContain(
           'Dependency scanning detected 2 new vulnerabilities and 1 fixed vulnerability',
         );
+        // Renders container scanning result
         expect(vm.$el.textContent).toContain('Container scanning detected 1 new vulnerability');
+
+        // Renders DAST result
         expect(vm.$el.textContent).toContain('DAST detected 1 new vulnerability');
         done();
       }, 0);

spec/javascripts/vue_shared/security_reports/split_security_reports_app_spec.js

@@ -2,9 +2,9 @@ import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import component from 'ee/vue_shared/security_reports/split_security_reports_app.vue';
+import createStore from 'ee/vue_shared/security_reports/store';
 import state from 'ee/vue_shared/security_reports/store/state';
-
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { sastIssues } from './mock_data';
 
 describe('Slipt security reports app', () => {
@@ -25,9 +25,9 @@ describe('Slipt security reports app', () => {
   });
 
   afterEach(() => {
+    vm.$store.replaceState(state());
     vm.$destroy();
     mock.restore();
-    vm.$store.replaceState(state());
   });
 
   describe('while loading', () => {
@@ -36,7 +36,9 @@ describe('Slipt security reports app', () => {
       mock.onGet('dss_head.json').reply(200, sastIssues);
       mock.onGet('vulnerability_feedback_path.json').reply(200, []);
 
-      vm = mountComponent(Component, {
+      vm = mountComponentWithStore(Component, {
+        store: createStore(),
+        props: {
           headBlobPath: 'path',
           baseBlobPath: 'path',
           sastHeadPath: 'sast_head.json',
@@ -46,14 +48,19 @@ describe('Slipt security reports app', () => {
           vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
           vulnerabilityFeedbackHelpPath: 'path',
           pipelineId: 123,
+        },
       });
     });
 
-    it('renders loading summary text + spinner', () => {
+    it('renders loading summary text + spinner', done => {
       expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
 
       expect(vm.$el.textContent).toContain('SAST is loading');
       expect(vm.$el.textContent).toContain('Dependency scanning is loading');
+
+      setTimeout(() => {
+        done();
+      }, 0);
     });
   });
 
@@ -63,7 +70,9 @@ describe('Slipt security reports app', () => {
       mock.onGet('dss_head.json').reply(200, sastIssues);
       mock.onGet('vulnerability_feedback_path.json').reply(200, []);
 
-      vm = mountComponent(Component, {
+      vm = mountComponentWithStore(Component, {
+        store: createStore(),
+        props: {
           headBlobPath: 'path',
           baseBlobPath: 'path',
           sastHeadPath: 'sast_head.json',
@@ -73,6 +82,7 @@ describe('Slipt security reports app', () => {
           vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
           vulnerabilityFeedbackHelpPath: 'path',
           pipelineId: 123,
+        },
       });
     });
 
@@ -96,7 +106,9 @@ describe('Slipt security reports app', () => {
       mock.onGet('dss_head.json').reply(500);
       mock.onGet('vulnerability_feedback_path.json').reply(500, []);
 
-      vm = mountComponent(Component, {
+      vm = mountComponentWithStore(Component, {
+        store: createStore(),
+        props: {
           headBlobPath: 'path',
           baseBlobPath: 'path',
           sastHeadPath: 'sast_head.json',
@@ -106,6 +118,7 @@ describe('Slipt security reports app', () => {
           vulnerabilityFeedbackPath: 'vulnerability_feedback_path.json',
           vulnerabilityFeedbackHelpPath: 'path',
           pipelineId: 123,
+        },
       });
     });