Port VulnerabilityDetails tests to new component

This ports the existing tests for the old `vulnerability-details`
component to the new one, since it now accepts a `vulnerability` prop
rather than a `details` prop.

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

 import { mount } from '@vue/test-utils';
 import createState from 'ee/vue_shared/security_reports/store/state';
 import VulnerabilityDetails from 'ee/vue_shared/security_reports/components/vulnerability_details.vue';
+import VulnerabilityDetails2 from 'ee/vue_shared/security_reports/components/vulnerability_details_2.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import SafeLink from 'ee/vue_shared/components/safe_link.vue';
 import { TEST_HOST } from 'helpers/test_constants';
+import { cloneDeep } from 'lodash';
 
-xdescribe('VulnerabilityDetails component', () => {
+function makeVulnerability(changes = {}) {
+  return Object.assign(cloneDeep(findings[0]), changes);
+}
+
+describe('VulnerabilityDetails component', () => {
   let wrapper;
 
-  const componentFactory = (options = {}) => {
-    wrapper = mount(VulnerabilityDetails, {
-      ...options,
+  const componentFactory = vulnerability => {
+    wrapper = mount(VulnerabilityDetails2, {
+      propsData: { vulnerability },
     });
   };
 
@@ -21,56 +27,57 @@ xdescribe('VulnerabilityDetails component', () => {
   };
 
   it('renders severity with a badge', () => {
-    const value = 'critical';
-    componentFactory({ propsData: { details: { severity: { value } } } });
+    const vulnerability = makeVulnerability({ severity: 'critical' });
+    componentFactory(vulnerability);
     const badge = wrapper.find(SeverityBadge);
 
-    expect(badge.props('severity')).toBe(value);
+    expect(badge.props('severity')).toBe(vulnerability.severity);
   });
 
   it('renders link fields with link', () => {
-    const details = {
-      somefield: {
-        value: 'foo',
-        url: `${TEST_HOST}/bar`,
-        isLink: true,
-      },
-    };
+    const vulnerability = makeVulnerability();
+    componentFactory(vulnerability);
 
-    componentFactory({ propsData: { details } });
-
-    expectSafeLink(wrapper.find('.js-link-somefield'), {
-      href: `${TEST_HOST}/bar`,
-      text: 'foo',
+    expectSafeLink(wrapper.find('.js-link-project'), {
+      href: vulnerability.project.full_path,
+      text: vulnerability.project.full_name,
     });
   });
 
   it('renders wrapped file paths', () => {
-    const value = '/some/file/path';
-    const valueWrapped = '/<wbr>some/<wbr>file/<wbr>path';
-    const details = {
-      file: {
-        value,
-        url: `${TEST_HOST}/bar`,
-        isLink: true,
+    const vulnerability = makeVulnerability({
+      blob_path: `${TEST_HOST}/bar`,
+      location: {
+        file: '/some/file/path',
       },
-    };
-    componentFactory({ propsData: { details } });
-    expect(wrapper.find(SafeLink).html()).toMatch(valueWrapped);
+    });
+
+    componentFactory(vulnerability);
+
+    const link = wrapper
+      .findAll(SafeLink)
+      .filter(wrapper => wrapper.classes('js-link-file'))
+      .at(0);
+
+    expect(link.html()).toMatch('/<wbr>some/<wbr>file/<wbr>path');
   });
 
   it('escapes wrapped file paths', () => {
-    const value = '/unsafe/path<script></script>';
-    const valueWrapped = '/<wbr>unsafe/<wbr>path&lt;script&gt;&lt;/<wbr>script&gt;';
-    const details = {
-      file: {
-        value,
-        url: `${TEST_HOST}/bar`,
-        isLink: true,
+    const vulnerability = makeVulnerability({
+      blob_path: `${TEST_HOST}/bar`,
+      location: {
+        file: '/unsafe/path<script></script>',
       },
-    };
-    componentFactory({ propsData: { details } });
-    expect(wrapper.find(SafeLink).html()).toMatch(valueWrapped);
+    });
+
+    componentFactory(vulnerability);
+
+    const link = wrapper
+      .findAll(SafeLink)
+      .filter(wrapper => wrapper.classes('js-link-file'))
+      .at(0);
+
+    expect(link.html()).toMatch('/<wbr>unsafe/<wbr>path&lt;script&gt;&lt;/<wbr>script&gt;');
   });
 
   describe('does not render XSS links', () => {
@@ -78,31 +85,17 @@ xdescribe('VulnerabilityDetails component', () => {
     const badUrl = 'javascript:alert("")';
 
     beforeEach(() => {
-      const details = createState().modal.data;
-
-      details.file.value = 'badFile.lock';
-      details.file.url = badUrl;
-      details.links.value = [
-        {
-          url: badUrl,
-        },
-      ];
-      details.identifiers.value = [
-        {
-          type: 'CVE',
-          name: 'BAD_URL',
-          url: badUrl,
+      const vulnerability = makeVulnerability({
+        blob_path: badUrl,
+        location: {
+          file: 'badFile.lock',
         },
-      ];
-      details.instances.value = [
-        {
-          param: 'X-Content-Type-Options',
-          method: 'GET',
-          uri: badUrl,
-        },
-      ];
+        links: [{ url: badUrl }],
+        identifiers: [{ name: 'BAD_URL', url: badUrl }],
+        instances: [{ method: 'GET', uri: badUrl }],
+      });
 
-      componentFactory({ propsData: { details } });
+      componentFactory(vulnerability);
     });
 
     it('for the link field', () => {
@@ -136,16 +129,14 @@ xdescribe('VulnerabilityDetails component', () => {
 
   describe('with instances', () => {
     beforeEach(() => {
-      const details = {
-        instances: {
-          value: [
-            { uri: 'http://192.168.32.236:3001/explore?sort=latest_activity_desc' },
-            { uri: 'http://192.168.32.236:3001/help/user/group/subgroups/index.md' },
-          ],
-        },
-      };
+      const vulnerability = makeVulnerability({
+        instances: [
+          { uri: 'http://192.168.32.236:3001/explore?sort=latest_activity_desc' },
+          { uri: 'http://192.168.32.236:3001/help/user/group/subgroups/index.md' },
+        ],
+      });
 
-      componentFactory({ propsData: { details } });
+      componentFactory(vulnerability);
     });
 
     it('renders instances list', () => {