Merge branch '331562-fix-pipeline-security-tab-scanner-filter' into 'master'

Fix pipeline security tab scanner filter not working

See merge request gitlab-org/gitlab!62276

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

 <script>
 import { GlToggle } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { severityFilter, scannerFilter } from 'ee/security_dashboard/helpers';
+import { severityFilter, pipelineScannerFilter } from 'ee/security_dashboard/helpers';
 import { s__ } from '~/locale';
 import { DISMISSAL_STATES } from '../store/modules/filters/constants';
 import StandardFilter from './filters/standard_filter.vue';
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      filterConfigs: [severityFilter, scannerFilter],
+      filterConfigs: [severityFilter, pipelineScannerFilter],
     };
   },
   computed: {
@@ -44,6 +44,7 @@ export default {
         :key="filter.id"
         class="col-sm-6 col-md-4 col-lg-2 p-2 js-filter"
         :filter="filter"
+        :data-testid="filter.id"
         @filter-changed="setFilter"
       />
       <div class="gl-display-flex ml-lg-auto p-2">

ee/app/assets/javascripts/security_dashboard/components/filters/standard_filter.vue

@@ -132,7 +132,7 @@ export default {
       :key="option.id"
       :is-checked="isSelected(option)"
       :text="option.name"
-      data-testid="filterOption"
+      :data-testid="`${filter.id}:${option.id}`"
       @click="toggleOption(option)"
     />
   </filter-body>

ee/app/assets/javascripts/security_dashboard/helpers.js

@@ -43,6 +43,14 @@ export const createScannerOption = (vendor, reportType) => {
   };
 };
 
+export const pipelineScannerFilter = {
+  name: s__('SecurityReports|Scanner'),
+  id: 'reportType',
+  options: parseOptions(REPORT_TYPES),
+  allOption: BASE_FILTERS.report_type,
+  defaultOptions: [],
+};
+
 export const scannerFilter = {
   name: s__('SecurityReports|Scanner'),
   id: 'scanner',

ee/app/assets/javascripts/security_dashboard/pipeline_init.js

 import Vue from 'vue';
 import PipelineSecurityDashboard from './components/pipeline_security_dashboard.vue';
 import apolloProvider from './graphql/provider';
-import createRouter from './router';
 import createDashboardStore from './store';
 import { DASHBOARD_TYPES } from './store/constants';
 import { LOADING_VULNERABILITIES_ERROR_CODES } from './store/modules/vulnerabilities/constants';
@@ -32,11 +31,8 @@ export default () => {
     [LOADING_VULNERABILITIES_ERROR_CODES.FORBIDDEN]: emptyStateForbiddenSvgPath,
   };
 
-  const router = createRouter();
-
   return new Vue({
     el,
-    router,
     apolloProvider,
     store: createDashboardStore({
       dashboardType: DASHBOARD_TYPES.PIPELINE,

ee/spec/frontend/security_dashboard/components/filters/standard_filter_spec.js

@@ -31,7 +31,7 @@ describe('Standard Filter component', () => {
     });
   };
 
-  const dropdownItems = () => wrapper.findAll('[data-testid="filterOption"]');
+  const dropdownItems = () => wrapper.findAll(`[data-testid^=${filter.id}]`);
   const dropdownItemAt = (index) => dropdownItems().at(index);
   const allOptionItem = () => wrapper.find('[data-testid="allOption"]');
   const isChecked = (item) => item.props('isChecked');

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

 import { GlToggle } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import Filters from 'ee/security_dashboard/components/filters.vue';
+import { pipelineScannerFilter } from 'ee/security_dashboard/helpers';
 import createStore from 'ee/security_dashboard/store';
+import state from 'ee/security_dashboard/store/modules/filters/state';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -11,17 +14,16 @@ describe('Filter component', () => {
   let wrapper;
   let store;
 
-  const createWrapper = (props = {}) => {
-    wrapper = shallowMount(Filters, {
-      localVue,
-      store,
-      propsData: {
-        ...props,
-      },
-      slots: {
-        buttons: '<div class="button-slot"></div>',
-      },
-    });
+  const createWrapper = ({ mountFn = shallowMount } = {}) => {
+    wrapper = extendedWrapper(
+      mountFn(Filters, {
+        localVue,
+        store,
+        slots: {
+          buttons: '<div class="button-slot"></div>',
+        },
+      }),
+    );
   };
 
   beforeEach(() => {
@@ -53,4 +55,34 @@ describe('Filter component', () => {
       expect(wrapper.find('.button-slot').exists()).toBe(true);
     });
   });
+
+  describe('scanner filter', () => {
+    it('should call the setFilter action with the correct data when the scanner filter is changed', async () => {
+      const mock = jest.fn();
+      store = new Vuex.Store({
+        modules: {
+          filters: {
+            namespaced: true,
+            state,
+            actions: { setFilter: mock },
+          },
+        },
+      });
+
+      createWrapper({ mountFn: mount });
+      await wrapper.vm.$nextTick();
+      // The other filters will trigger the mock as well, so we'll clear it before clicking on a
+      // scanner filter item.
+      mock.mockClear();
+
+      const filterId = pipelineScannerFilter.id;
+      const optionId = pipelineScannerFilter.options[2].id;
+      const option = wrapper.findByTestId(`${filterId}:${optionId}`);
+      option.vm.$emit('click');
+      await wrapper.vm.$nextTick();
+
+      expect(mock).toHaveBeenCalledTimes(1);
+      expect(mock).toHaveBeenCalledWith(expect.any(Object), { [filterId]: [optionId] });
+    });
+  });
 });