Add tests for vulnerability_report.vue

Changelog: other
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/85293
EE: true

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_report_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { PortalTarget } from 'portal-vue';
+import { nextTick } from 'vue';
+import VulnerabilityReport from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_report.vue';
+import projectVulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities.query.graphql';
+import VulnerabilityCounts from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_counts.vue';
+import VulnerabilityFilters from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue';
+import VulnerabilityListGraphql from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue';
+import {
+  FIELD_PRESETS,
+  FILTER_PRESETS,
+  FILTERS,
+  REPORT_TAB,
+  REPORT_TYPE_PRESETS,
+} from 'ee/security_dashboard/components/shared/vulnerability_report/constants';
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+
+describe('Vulnerability report component', () => {
+  let wrapper;
+  const createWrapper = ({
+    type = REPORT_TAB.DEVELOPMENT,
+    query = projectVulnerabilitiesQuery,
+    dashboardType = DASHBOARD_TYPES.PROJECT,
+    isActive = true,
+    showProjectFilter = false,
+  } = {}) => {
+    wrapper = shallowMount(VulnerabilityReport, {
+      propsData: {
+        type,
+        query,
+        isActive,
+        showProjectFilter,
+      },
+      provide: { dashboardType },
+    });
+  };
+
+  const findCounts = () => wrapper.findComponent(VulnerabilityCounts);
+  const findFilters = () => wrapper.findComponent(VulnerabilityFilters);
+  const findList = () => wrapper.findComponent(VulnerabilityListGraphql);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('vulnerability counts', () => {
+    it('bubbles up the counts-changed event', () => {
+      createWrapper();
+      const data = {};
+      findCounts().vm.$emit('counts-changed', data);
+
+      expect(wrapper.emitted('counts-changed')[0][0]).toBe(data);
+    });
+  });
+
+  describe('portal target', () => {
+    it('uses the same portal name as the vulnerability list', () => {
+      createWrapper();
+
+      expect(wrapper.find(PortalTarget).props('name')).toBe(findList().props('portalName'));
+    });
+  });
+
+  describe('filters', () => {
+    it.each`
+      type                      | dashboardType               | expected
+      ${REPORT_TAB.DEVELOPMENT} | ${DASHBOARD_TYPES.PROJECT}  | ${FILTER_PRESETS.DEVELOPMENT_PROJECT}
+      ${REPORT_TAB.DEVELOPMENT} | ${DASHBOARD_TYPES.GROUP}    | ${FILTER_PRESETS.DEVELOPMENT}
+      ${REPORT_TAB.OPERATIONAL} | ${DASHBOARD_TYPES.GROUP}    | ${FILTER_PRESETS.OPERATIONAL}
+      ${REPORT_TAB.DEVELOPMENT} | ${DASHBOARD_TYPES.INSTANCE} | ${FILTER_PRESETS.DEVELOPMENT}
+      ${REPORT_TAB.OPERATIONAL} | ${DASHBOARD_TYPES.INSTANCE} | ${FILTER_PRESETS.OPERATIONAL}
+      ${REPORT_TAB.DEVELOPMENT} | ${DASHBOARD_TYPES.PIPELINE} | ${FILTER_PRESETS.DEVELOPMENT}
+      ${REPORT_TAB.OPERATIONAL} | ${DASHBOARD_TYPES.PIPELINE} | ${FILTER_PRESETS.OPERATIONAL}
+    `(
+      'uses the expected filter presets for the tab type and dashboard type',
+      ({ type, dashboardType, expected }) => {
+        createWrapper({ type, dashboardType });
+        expect(findFilters().props('filters')).toEqual(expected);
+      },
+    );
+
+    it('shows the project filter when showProjectFilter is true', () => {
+      createWrapper({ showProjectFilter: true });
+
+      expect(findFilters().props('filters')).toContain(FILTERS.PROJECT);
+    });
+
+    it('does not show the project filter when showProjectFilter is false', () => {
+      createWrapper({ showProjectFilter: false });
+
+      expect(findFilters().props('filters')).not.toContain(FILTERS.PROJECT);
+    });
+
+    it.each`
+      type                      | filters                              | expected
+      ${REPORT_TAB.DEVELOPMENT} | ${{ a: 1, b: 2 }}                    | ${{ a: 1, b: 2, reportType: REPORT_TYPE_PRESETS.DEVELOPMENT }}
+      ${REPORT_TAB.DEVELOPMENT} | ${{ a: 1, b: 2, reportType: 'abc' }} | ${{ a: 1, b: 2, reportType: 'abc' }}
+      ${REPORT_TAB.OPERATIONAL} | ${{ a: 1, b: 2 }}                    | ${{ a: 1, b: 2, reportType: REPORT_TYPE_PRESETS.OPERATIONAL }}
+      ${REPORT_TAB.OPERATIONAL} | ${{ a: 1, b: 2, reportType: 'abc' }} | ${{ a: 1, b: 2, reportType: REPORT_TYPE_PRESETS.OPERATIONAL }}
+    `(
+      'sends the expected graphql filters to the counts and list',
+      async ({ type, filters, expected }) => {
+        createWrapper({ type });
+        findFilters().vm.$emit('filters-changed', filters);
+        await nextTick();
+
+        expect(findCounts().props('filters')).toEqual(expected);
+        expect(findList().props('filters')).toEqual(expected);
+      },
+    );
+  });
+
+  describe('vulnerability list', () => {
+    it.each([true, false])('is shown/hidden when the isActive prop is %s', (isActive) => {
+      createWrapper({ isActive });
+
+      expect(findList().exists()).toBe(isActive);
+    });
+
+    it.each`
+      type                      | showProjectFilter | expectedFields
+      ${REPORT_TAB.DEVELOPMENT} | ${true}           | ${FIELD_PRESETS.DEVELOPMENT}
+      ${REPORT_TAB.OPERATIONAL} | ${false}          | ${FIELD_PRESETS.OPERATIONAL}
+    `('is passed expected props', ({ type, showProjectFilter, expectedFields }) => {
+      createWrapper({ type, showProjectFilter });
+
+      expect(findList().props()).toMatchObject({
+        query: projectVulnerabilitiesQuery,
+        fields: expectedFields,
+        showProjectNamespace: showProjectFilter,
+      });
+    });
+  });
+});