Cover issue modal in security dashboard tests

This commit adds tests to make sure the modal,that is responsible
for displaying details to a given issue, on the security dashboard
renders correctly.

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27852

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_vuex.vue

@@ -191,15 +191,15 @@ export default {
         :is-dismissing-vulnerability="isDismissingVulnerability"
         :is-creating-merge-request="isCreatingMergeRequest"
         @addDismissalComment="addDismissalComment({ vulnerability, comment: $event })"
-        @editVulnerabilityDismissalComment="openDismissalCommentBox()"
+        @editVulnerabilityDismissalComment="openDismissalCommentBox"
         @showDismissalDeleteButtons="showDismissalDeleteButtons"
         @hideDismissalDeleteButtons="hideDismissalDeleteButtons"
         @deleteDismissalComment="deleteDismissalComment({ vulnerability })"
-        @closeDismissalCommentBox="closeDismissalCommentBox()"
+        @closeDismissalCommentBox="closeDismissalCommentBox"
         @createMergeRequest="createMergeRequest({ vulnerability })"
         @createNewIssue="createIssue({ vulnerability })"
         @dismissVulnerability="dismissVulnerability({ vulnerability, comment: $event })"
-        @openDismissalCommentBox="openDismissalCommentBox()"
+        @openDismissalCommentBox="openDismissalCommentBox"
         @revertDismissVulnerability="undoDismiss({ vulnerability })"
         @downloadPatch="downloadPatch({ vulnerability })"
       />

ee/spec/frontend/security_dashboard/components/security_dashboard_vuex_spec.js

@@ -4,6 +4,7 @@ import { TEST_HOST } from 'helpers/test_constants';
 
 import SecurityDashboard from 'ee/security_dashboard/components/security_dashboard_vuex.vue';
 import Filters from 'ee/security_dashboard/components/filters.vue';
+import IssueModal from 'ee/vue_shared/security_reports/components/modal.vue';
 import SecurityDashboardTable from 'ee/security_dashboard/components/security_dashboard_table.vue';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import VulnerabilityChart from 'ee/security_dashboard/components/vulnerability_chart.vue';
@@ -20,6 +21,7 @@ const vulnerabilitiesEndpoint = `${TEST_HOST}/vulnerabilities`;
 const vulnerabilitiesCountEndpoint = `${TEST_HOST}/vulnerabilities_summary`;
 const vulnerabilitiesHistoryEndpoint = `${TEST_HOST}/vulnerabilities_history`;
 const vulnerableProjectsEndpoint = `${TEST_HOST}/vulnerable_projects`;
+const vulnerabilityFeedbackHelpPath = `${TEST_HOST}/vulnerabilities_feedback_help`;
 
 jest.mock('~/lib/utils/url_utility', () => ({
   getParameterValues: jest.fn().mockReturnValue([]),
@@ -32,14 +34,7 @@ describe('Security Dashboard component', () => {
   let setPipelineIdSpy;
   let store;
 
-  const setup = () => {
-    mock = new MockAdapter(axios);
-    lockFilterSpy = jest.fn();
-    setPipelineIdSpy = jest.fn();
-  };
-
   const createComponent = props => {
-    store = createStore();
     wrapper = shallowMount(SecurityDashboard, {
       store,
       stubs: {
@@ -56,20 +51,28 @@ describe('Security Dashboard component', () => {
         vulnerabilitiesHistoryEndpoint,
         vulnerableProjectsEndpoint,
         pipelineId,
-        vulnerabilityFeedbackHelpPath: `${TEST_HOST}/vulnerabilities_feedback_help`,
+        vulnerabilityFeedbackHelpPath,
         ...props,
       },
     });
   };
 
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    lockFilterSpy = jest.fn();
+    setPipelineIdSpy = jest.fn();
+    store = createStore();
+  });
+
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
     mock.restore();
+    jest.clearAllMocks();
   });
 
   describe('default', () => {
     beforeEach(() => {
-      setup();
       createComponent();
     });
 
@@ -112,6 +115,67 @@ describe('Security Dashboard component', () => {
         expect(wrapper.emitted('vulnerabilitiesCountChanged')).toEqual([[newCount]]);
       });
     });
+
+    it('renders the issue modal', () => {
+      expect(wrapper.contains(IssueModal)).toBe(true);
+    });
+
+    it('passes the "vulnerabilityFeedbackHelpPath" prop to the issue modal', () => {
+      expect(wrapper.find(IssueModal).props('vulnerabilityFeedbackHelpPath')).toBe(
+        vulnerabilityFeedbackHelpPath,
+      );
+    });
+
+    it.each`
+      emittedModalEvent                      | eventPayload | expectedDispatchedAction                        | expectedActionPayload
+      ${'addDismissalComment'}               | ${'foo'}     | ${'vulnerabilities/addDismissalComment'}        | ${{ comment: 'foo', vulnerability: 'bar' }}
+      ${'editVulnerabilityDismissalComment'} | ${undefined} | ${'vulnerabilities/openDismissalCommentBox'}    | ${undefined}
+      ${'showDismissalDeleteButtons'}        | ${undefined} | ${'vulnerabilities/showDismissalDeleteButtons'} | ${undefined}
+      ${'hideDismissalDeleteButtons'}        | ${undefined} | ${'vulnerabilities/hideDismissalDeleteButtons'} | ${undefined}
+      ${'deleteDismissalComment'}            | ${undefined} | ${'vulnerabilities/deleteDismissalComment'}     | ${{ vulnerability: 'bar' }}
+      ${'closeDismissalCommentBox'}          | ${undefined} | ${'vulnerabilities/closeDismissalCommentBox'}   | ${undefined}
+      ${'createMergeRequest'}                | ${undefined} | ${'vulnerabilities/createMergeRequest'}         | ${{ vulnerability: 'bar' }}
+      ${'createNewIssue'}                    | ${undefined} | ${'vulnerabilities/createIssue'}                | ${{ vulnerability: 'bar' }}
+      ${'dismissVulnerability'}              | ${'bar'}     | ${'vulnerabilities/dismissVulnerability'}       | ${{ comment: 'bar', vulnerability: 'bar' }}
+      ${'openDismissalCommentBox'}           | ${undefined} | ${'vulnerabilities/openDismissalCommentBox'}    | ${undefined}
+      ${'revertDismissVulnerability'}        | ${undefined} | ${'vulnerabilities/undoDismiss'}                | ${{ vulnerability: 'bar' }}
+      ${'downloadPatch'}                     | ${undefined} | ${'vulnerabilities/downloadPatch'}              | ${{ vulnerability: 'bar' }}
+    `(
+      'dispatches the "$expectedDispatchedAction" action when the modal emits a "$emittedModalEvent" event',
+      ({ emittedModalEvent, eventPayload, expectedDispatchedAction, expectedActionPayload }) => {
+        wrapper.vm.$store.state.vulnerabilities.modal.vulnerability = 'bar';
+
+        jest.spyOn(store, 'dispatch').mockImplementation();
+        wrapper.find(IssueModal).vm.$emit(emittedModalEvent, eventPayload);
+
+        expect(store.dispatch).toHaveBeenCalledWith(
+          expectedDispatchedAction,
+          expectedActionPayload,
+        );
+      },
+    );
+  });
+
+  describe('issue modal', () => {
+    it.each`
+      givenState                                                                                   | expectedProps
+      ${{ modal: { vulnerability: 'foo' } }}                                                       | ${{ modal: { vulnerability: 'foo' }, vulnerabilityFeedbackHelpPath, canCreateIssue: false, canCreateMergeRequest: false, canDismissVulnerability: false, isCreatingIssue: false, isDismissingVulnerability: false, isCreatingMergeRequest: false }}
+      ${{ modal: { vulnerability: { create_vulnerability_feedback_issue_path: 'foo' } } }}         | ${expect.objectContaining({ canCreateIssue: true })}
+      ${{ modal: { vulnerability: { create_vulnerability_feedback_merge_request_path: 'foo' } } }} | ${expect.objectContaining({ canCreateMergeRequest: true })}
+      ${{ modal: { vulnerability: { create_vulnerability_feedback_dismissal_path: 'foo' } } }}     | ${expect.objectContaining({ canDismissVulnerability: true })}
+      ${{ isCreatingIssue: true }}                                                                 | ${expect.objectContaining({ isCreatingIssue: true })}
+      ${{ isDismissingVulnerability: true }}                                                       | ${expect.objectContaining({ isDismissingVulnerability: true })}
+      ${{ isCreatingMergeRequest: true }}                                                          | ${expect.objectContaining({ isCreatingMergeRequest: true })}
+    `(
+      'passes right props to issue modal with state $givenState',
+      ({ givenState, expectedProps }) => {
+        Object.assign(store.state.vulnerabilities, givenState);
+
+        createComponent();
+
+        expect(wrapper.find(IssueModal).props()).toStrictEqual(expectedProps);
+      },
+    );
   });
 
   describe('with project lock', () => {
@@ -119,7 +183,6 @@ describe('Security Dashboard component', () => {
       id: 123,
     };
     beforeEach(() => {
-      setup();
       createComponent({
         lockToProject: project,
       });
@@ -148,7 +211,6 @@ describe('Security Dashboard component', () => {
     ${'vulnerableProjectsEndpoint'}     | ${VulnerabilitySeverity}
   `('with an empty $endpointProp', ({ endpointProp, Component }) => {
     beforeEach(() => {
-      setup();
       createComponent({
         [endpointProp]: '',
       });
@@ -160,10 +222,6 @@ describe('Security Dashboard component', () => {
   });
 
   describe('dismissed vulnerabilities', () => {
-    beforeEach(() => {
-      setup();
-    });
-
     it.each`
       description                                                        | getParameterValuesReturnValue | expected
       ${'hides dismissed vulnerabilities by default'}                    | ${[]}                         | ${true}
@@ -178,7 +236,6 @@ describe('Security Dashboard component', () => {
 
   describe('on error', () => {
     beforeEach(() => {
-      setup();
       createComponent();
     });