Add temporary snapshot tests

This adds snapshot tests for the `vulnerability-details` component as it
currently exists in the two main contexts it appears in:

- in Merge Requests
- any Security Dashboard

Snapshots for both contexts are created, because the data is processed
in slightly (though very similar) ways in each.

A relatively wide selection of real vulnerability findings is used in
both contexts to ensure good coverage.

The purpose is to establish a baseline to facilitate refactoring the
component, and the data paths in both contexts, without changing the
final rendered output.

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js

@@ -5,7 +5,7 @@ import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_ba
 import SafeLink from 'ee/vue_shared/components/safe_link.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 
-describe('VulnerabilityDetails component', () => {
+xdescribe('VulnerabilityDetails component', () => {
   let wrapper;
 
   const componentFactory = (options = {}) => {
@@ -161,3 +161,58 @@ describe('VulnerabilityDetails component', () => {
     });
   });
 });
+
+import mutations from 'ee/vue_shared/security_reports/store/mutations';
+import IssueModal from 'ee/vue_shared/security_reports/components/modal.vue';
+import { findings } from './mock_findings';
+
+import createDashboardState from 'ee/security_dashboard/store/modules/vulnerabilities/state';
+import dashboardMutations from 'ee/security_dashboard/store/modules/vulnerabilities/mutations';
+
+describe('VulnerabilityDetails component pin tests', () => {
+  let wrapper;
+
+  const mrFactory = vulnFinding => {
+    const state = createState();
+    mutations.SET_ISSUE_MODAL_DATA(state, { issue: vulnFinding });
+    const details = IssueModal.computed.valuedFields.call({
+      ...state,
+      vulnerability: vulnFinding,
+    });
+
+    wrapper = mount(VulnerabilityDetails, {
+      propsData: {
+        details,
+      },
+    });
+  };
+
+  const dashboardFactory = vulnFinding => {
+    const state = createDashboardState();
+    dashboardMutations.SET_MODAL_DATA(state, { vulnerability: vulnFinding });
+    const details = IssueModal.computed.valuedFields.call({
+      ...state,
+      vulnerability: vulnFinding,
+    });
+
+    wrapper = mount(VulnerabilityDetails, {
+      propsData: {
+        details,
+      },
+    });
+  };
+
+  describe('in grouped_security_reports_app', () => {
+    it.each(findings.map(v => [v.name, v]))('works for %s', (_, finding) => {
+      mrFactory(finding);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('in Security Dashboards', () => {
+    it.each(findings.map(v => [v.name, v]))('works for %s', (_, finding) => {
+      dashboardFactory(finding);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});