Add unit test for vulnerability severities count query

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

@@ -42,6 +42,7 @@ export default {
       query: vulnerabilitySeveritiesCountQuery,
       variables() {
         const { dashboardType, fullPath } = this;
+
         return {
           fullPath,
           isInstance: dashboardType === DASHBOARD_TYPES.INSTANCE,

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

@@ -6,6 +6,7 @@ import countQuery from 'ee/security_dashboard/graphql/queries/vulnerability_seve
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import eventHub from 'ee/security_dashboard/utils/event_hub';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { mockVulnerabilitySeveritiesGraphQLResponse } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -14,7 +15,7 @@ describe('Vulnerabilities count list component', () => {
   let wrapper;
   let refetchSpy;
 
-  const findVulnerabilityLayout = () => wrapper.find(VulnerabilityCountListLayout);
+  const findVulnerabilityLayout = () => wrapper.findComponent(VulnerabilityCountListLayout);
 
   const createWrapper = ({ query = { isLoading: false }, provide, data = {} } = {}) => {
     refetchSpy = jest.fn();
@@ -28,6 +29,16 @@ describe('Vulnerabilities count list component', () => {
     });
   };
 
+  const createWrapperWithApollo = ({ query, provide, propsData, stubs }) => {
+    wrapper = shallowMount(VulnerabilityCountList, {
+      localVue,
+      apolloProvider: createMockApollo([[countQuery, query]]),
+      provide,
+      propsData,
+      stubs,
+    });
+  };
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -76,15 +87,25 @@ describe('Vulnerabilities count list component', () => {
   });
 
   describe.each`
-    dashboardType               | expectedContainedQueryVariables
-    ${DASHBOARD_TYPES.INSTANCE} | ${{ isInstance: true, isGroup: false, isProject: false }}
-    ${DASHBOARD_TYPES.GROUP}    | ${{ isInstance: false, isGroup: true, isProject: false }}
-    ${DASHBOARD_TYPES.PROJECT}  | ${{ isInstance: false, isGroup: false, isProject: true }}
+    dashboardType               | fullPath          | expectedContainedQueryVariables
+    ${DASHBOARD_TYPES.INSTANCE} | ${undefined}      | ${{ isInstance: true, isGroup: false, isProject: false }}
+    ${DASHBOARD_TYPES.GROUP}    | ${'group/path'}   | ${{ isInstance: false, isGroup: true, isProject: false }}
+    ${DASHBOARD_TYPES.PROJECT}  | ${'project/path'} | ${{ isInstance: false, isGroup: false, isProject: true }}
   `(
     'when the dashboard type is $dashboardType',
-    ({ dashboardType, expectedContainedQueryVariables }) => {
+    ({ dashboardType, fullPath, expectedContainedQueryVariables }) => {
       beforeEach(() => {
-        wrapper = createWrapper({ provide: { dashboardType } });
+        const mockResponse = jest
+          .fn()
+          .mockResolvedValue(mockVulnerabilitySeveritiesGraphQLResponse({ dashboardType }));
+
+        createWrapperWithApollo({
+          provide: { dashboardType },
+          propsData: { fullPath, filters: { someFilter: 1 } },
+          query: mockResponse,
+          stubs: { VulnerabilityCountListLayout },
+        });
+
         return wrapper.vm.$nextTick();
       });
 
@@ -93,6 +114,17 @@ describe('Vulnerabilities count list component', () => {
           wrapper.vm.$options.apollo.vulnerabilitiesCount.variables.call(wrapper.vm),
         ).toMatchObject(expectedContainedQueryVariables);
       });
+
+      it('should set the data properly', () => {
+        expect(findVulnerabilityLayout().props('vulnerabilitiesCount')).toEqual({
+          critical: 0,
+          high: 0,
+          info: 0,
+          low: 0,
+          medium: 4,
+          unknown: 2,
+        });
+      });
     },
   );
 
@@ -109,23 +141,22 @@ describe('Vulnerabilities count list component', () => {
   describe('filters prop', () => {
     const mockQuery = jest.fn().mockResolvedValue(null);
 
-    const createWrapperWithApollo = ({ query, filters }) => {
-      wrapper = shallowMount(VulnerabilityCountList, {
-        localVue,
-        apolloProvider: createMockApollo([[countQuery, query]]),
+    it('does not run the query when filters is null', () => {
+      createWrapperWithApollo({
+        query: mockQuery,
+        propsData: { filters: null },
         provide: { dashboardType: DASHBOARD_TYPES.PROJECT },
-        propsData: { filters },
       });
-    };
-
-    it('does not run the query when filters is null', () => {
-      createWrapperWithApollo({ query: mockQuery, filters: null });
 
       expect(mockQuery).not.toHaveBeenCalled();
     });
 
     it('runs query when filters is an object', () => {
-      createWrapperWithApollo({ query: mockQuery, filters: {} });
+      createWrapperWithApollo({
+        query: mockQuery,
+        propsData: { filters: {} },
+        provide: { dashboardType: DASHBOARD_TYPES.PROJECT },
+      });
 
       expect(mockQuery).toHaveBeenCalled();
     });

ee/spec/frontend/security_dashboard/mock_data/index.js

@@ -223,3 +223,22 @@ export const mockVulnerableProjectsGroup = () => ({
     },
   },
 });
+
+export const mockVulnerabilitySeveritiesGraphQLResponse = ({ dashboardType }) => ({
+  data: {
+    [dashboardType]: {
+      vulnerabilitySeveritiesCount: {
+        __typename: 'VulnerabilitySeveritiesCount',
+        critical: 0,
+        high: 0,
+        info: 0,
+        low: 0,
+        medium: 4,
+        unknown: 2,
+      },
+    },
+    __typename: { project: 'Project', instance: 'InstanceSecurityDashboard', group: 'Group' }[
+      dashboardType
+    ],
+  },
+});