Vulnerability Reports: simplify adding components

* Small refactor to reduce the amount of code needed when
  adding a new component for rendering a report-type
* Add missing cleanups to specs

ee/app/assets/javascripts/vulnerabilities/components/generic_report/report_item.vue

 <script>
-import List from './types/list.vue';
-import Url from './types/url.vue';
+import { REPORT_COMPONENTS, getComponentNameForType } from './types/constants';
 
 export default {
   components: {
-    List,
-    Url,
+    ...REPORT_COMPONENTS,
   },
   props: {
     item: {
@@ -13,8 +11,13 @@ export default {
       required: true,
     },
   },
+  computed: {
+    componentName() {
+      return getComponentNameForType(this.item.type);
+    },
+  },
 };
 </script>
 <template>
-  <component :is="item.type" v-bind="item" data-testid="reportComponent" />
+  <component :is="componentName" v-bind="item" data-testid="reportComponent" />
 </template>

ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/constants.js

-export const REPORT_TYPE_LIST = 'list';
-export const REPORT_TYPE_URL = 'url';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
-export const REPORT_TYPES = [REPORT_TYPE_LIST, REPORT_TYPE_URL];
+export const REPORT_TYPES = {
+  list: 'list',
+  url: 'url',
+};
+
+const REPORT_TYPE_TO_COMPONENT_MAP = {
+  [REPORT_TYPES.list]: () => import('./list.vue'),
+  [REPORT_TYPES.url]: () => import('./url.vue'),
+};
+
+export const getComponentNameForType = (reportType) =>
+  `ReportType${capitalizeFirstCharacter(reportType)}`;
+
+export const REPORT_COMPONENTS = Object.fromEntries(
+  Object.entries(REPORT_TYPE_TO_COMPONENT_MAP).map(([reportType, component]) => [
+    getComponentNameForType(reportType),
+    component,
+  ]),
+);

ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/list.vue

@@ -27,7 +27,7 @@ export default {
       :key="item.name"
       :class="{ 'gl-list-style-none!': $options.isListType(item) }"
     >
-      <report-item :item="item" />
+      <report-item :item="item" data-testid="reportItem" />
     </li>
   </ul>
 </template>

ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/utils.js

 import { overEvery } from 'lodash';
-import { REPORT_TYPES, REPORT_TYPE_LIST } from './constants';
+import { REPORT_TYPES } from './constants';
 
 /**
  * Check if the given report is of a type that can be rendered (i.e, is mapped to a component and can be rendered)
@@ -7,7 +7,7 @@ import { REPORT_TYPES, REPORT_TYPE_LIST } from './constants';
  * @param {{ type: string }} reportItem
  * @returns boolean
  */
-const isSupportedType = ({ type }) => REPORT_TYPES.includes(type);
+const isSupportedType = ({ type }) => Object.values(REPORT_TYPES).includes(type);
 
 /**
  * Check if the given report is of type list
@@ -15,7 +15,7 @@ const isSupportedType = ({ type }) => REPORT_TYPES.includes(type);
  * @param {{ type: string } } reportItem
  * @returns boolean
  */
-export const isListType = ({ type }) => type === REPORT_TYPE_LIST;
+export const isListType = ({ type }) => type === REPORT_TYPES.list;
 
 /**
  * Check if the current report item is of that list and is not nested deeper than the maximum depth

ee/spec/frontend/vulnerabilities/generic_report/report_item_spec.js

@@ -2,17 +2,16 @@ import { shallowMount } from '@vue/test-utils';
 import ReportItem from 'ee/vulnerabilities/components/generic_report/report_item.vue';
 import {
   REPORT_TYPES,
-  REPORT_TYPE_URL,
-  REPORT_TYPE_LIST,
+  REPORT_COMPONENTS,
 } from 'ee/vulnerabilities/components/generic_report/types/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 const TEST_DATA = {
-  [REPORT_TYPE_URL]: {
+  [REPORT_TYPES.url]: {
     href: 'http://foo.com',
   },
-  [REPORT_TYPE_LIST]: {
-    items: [{ type: 'foo' }],
+  [REPORT_TYPES.list]: {
+    items: [],
   },
 };
 
@@ -26,12 +25,18 @@ describe('ee/vulnerabilities/components/generic_report/report_item.vue', () => {
           item: {},
           ...props,
         },
+        // manual stubbing is needed because the components are dynamically imported
+        stubs: Object.keys(REPORT_COMPONENTS),
       }),
     );
 
   const findReportComponent = () => wrapper.findByTestId('reportComponent');
 
-  describe.each(REPORT_TYPES)('with report type "%s"', (reportType) => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each(Object.values(REPORT_TYPES))('with report type "%s"', (reportType) => {
     const reportItem = { type: reportType, ...TEST_DATA[reportType] };
 
     beforeEach(() => {

ee/spec/frontend/vulnerabilities/generic_report/report_section_spec.js

@@ -2,19 +2,19 @@ import { within, fireEvent } from '@testing-library/dom';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import ReportSection from 'ee/vulnerabilities/components/generic_report/report_section.vue';
-import { REPORT_TYPE_URL } from 'ee/vulnerabilities/components/generic_report/types/constants';
+import { REPORT_TYPES } from 'ee/vulnerabilities/components/generic_report/types/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 const TEST_DATA = {
   supportedTypes: {
     one: {
       name: 'one',
-      type: REPORT_TYPE_URL,
+      type: REPORT_TYPES.url,
       href: 'http://foo.com',
     },
     two: {
       name: 'two',
-      type: REPORT_TYPE_URL,
+      type: REPORT_TYPES.url,
       href: 'http://bar.com',
     },
   },

ee/spec/frontend/vulnerabilities/generic_report/types/list_spec.js

 import { screen } from '@testing-library/dom';
 import { shallowMount } from '@vue/test-utils';
-import ReportItem from 'ee/vulnerabilities/components/generic_report/report_item.vue';
 import List from 'ee/vulnerabilities/components/generic_report/types/list.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 const TEST_DATA = {
   items: [
@@ -13,21 +13,30 @@ const TEST_DATA = {
 describe('ee/vulnerabilities/components/generic_report/types/list.vue', () => {
   let wrapper;
 
-  const createWrapper = () => {
-    return shallowMount(List, {
+  const createWrapper = () =>
+    extendedWrapper(
+      shallowMount(List, {
         propsData: {
           items: TEST_DATA.items,
         },
         attachTo: document.body,
-    });
-  };
+        // manual stubbing is needed because the component is dynamically imported
+        stubs: {
+          ReportItem: true,
+        },
+      }),
+    );
 
-  const findReportItems = () => wrapper.findAllComponents(ReportItem);
+  const findReportItems = () => wrapper.findAllByTestId('reportItem');
 
   beforeEach(() => {
     wrapper = createWrapper();
   });
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   it('renders a list', () => {
     expect(screen.getByRole('list')).toBeInstanceOf(HTMLElement);
   });

ee/spec/frontend/vulnerabilities/generic_report/types/url_spec.js

@@ -23,6 +23,10 @@ describe('ee/vulnerabilities/components/generic_report/types/url.vue', () => {
     wrapper = createWrapper();
   });
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   it('renders a link', () => {
     expect(findLink().exists()).toBe(true);
   });

ee/spec/frontend/vulnerabilities/generic_report/types/utils_spec.js

-import {
-  REPORT_TYPE_LIST,
-  REPORT_TYPE_URL,
-} from 'ee/vulnerabilities/components/generic_report/types/constants';
+import { REPORT_TYPES } from 'ee/vulnerabilities/components/generic_report/types/constants';
 import { filterTypesAndLimitListDepth } from 'ee/vulnerabilities/components/generic_report/types/utils';
 
 const MOCK_REPORT_TYPE_UNSUPPORTED = 'MOCK_REPORT_TYPE_UNSUPPORTED';
 
 const TEST_DATA = {
   url: {
-    type: REPORT_TYPE_URL,
+    type: REPORT_TYPES.url,
     name: 'url1',
   },
   list: {
-    type: REPORT_TYPE_LIST,
+    type: REPORT_TYPES.list,
     name: 'rootList',
     items: [
-      { type: REPORT_TYPE_URL, name: 'url2' },
+      { type: REPORT_TYPES.url, name: 'url2' },
       {
-        type: REPORT_TYPE_LIST,
+        type: REPORT_TYPES.list,
         name: 'listDepthOne',
         items: [
-          { type: REPORT_TYPE_URL, name: 'url3' },
+          { type: REPORT_TYPES.url, name: 'url3' },
           {
-            type: REPORT_TYPE_LIST,
+            type: REPORT_TYPES.list,
             name: 'listDepthTwo',
             items: [
-              { type: REPORT_TYPE_URL, name: 'url4' },
+              { type: REPORT_TYPES.url, name: 'url4' },
               {
-                type: REPORT_TYPE_LIST,
+                type: REPORT_TYPES.list,
                 name: 'listDepthThree',
                 items: [
-                  { type: REPORT_TYPE_URL, name: 'url5' },
+                  { type: REPORT_TYPES.url, name: 'url5' },
                   { type: MOCK_REPORT_TYPE_UNSUPPORTED },
                 ],
               },
@@ -52,7 +49,7 @@ describe('ee/vulnerabilities/components/generic_report/types/utils', () => {
     const getListWithDepthTwo = (reportsData) => reportsData.list.items[1].items[1];
     const includesType = (type) => (items) =>
       items.find(({ type: currentType }) => currentType === type) !== undefined;
-    const includesListItem = includesType(REPORT_TYPE_LIST);
+    const includesListItem = includesType(REPORT_TYPES.list);
     const includesUnsupportedType = includesType(MOCK_REPORT_TYPE_UNSUPPORTED);
 
     describe.each`