Commit 3443f46b authored by Vitaly Slobodin's avatar Vitaly Slobodin

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
parents faf4cc2d 77cc57a6
<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">
......
......@@ -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>
......
......@@ -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',
......
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,
......
......@@ -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');
......
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, {
const createWrapper = ({ mountFn = shallowMount } = {}) => {
wrapper = extendedWrapper(
mountFn(Filters, {
localVue,
store,
propsData: {
...props,
},
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] });
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment