Commit 30feadc2 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Merge branch '255180-Add-tests-for-selection_summary_vuex' into 'master'

Create tests for ee/app/assets/javascripts/security_dashboard/components/selection_summary_vuex.vue

See merge request gitlab-org/gitlab!44213
parents ed280250 ee3c0628
...@@ -55,7 +55,7 @@ export default { ...@@ -55,7 +55,7 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<form class="card-body d-flex align-items-center" @submit.prevent="handleDismiss"> <form class="card-body d-flex align-items-center" @submit.prevent="handleDismiss">
<span>{{ message }}</span> <span data-testid="dismiss-message">{{ message }}</span>
<gl-form-select <gl-form-select
v-model="dismissalReason" v-model="dismissalReason"
class="mx-3 w-auto" class="mx-3 w-auto"
......
---
title: Create tests for ee/app/assets/javascripts/security_dashboard/components/selection_summary_vuex.vue
merge_request: 44213
author: Kev @KevSlashNull
type: other
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
import { GlButton, GlFormSelect } from '@gitlab/ui';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import {
SELECT_VULNERABILITY,
RECEIVE_VULNERABILITIES_SUCCESS,
} from 'ee/security_dashboard/store/modules/vulnerabilities/mutation_types';
import SelectionSummary from 'ee/security_dashboard/components/selection_summary_vuex.vue';
import waitForPromises from 'helpers/wait_for_promises';
import createStore from 'ee/security_dashboard/store/index';
import httpStatus from '~/lib/utils/http_status';
import mockDataVulnerabilities from '../store/modules/vulnerabilities/data/mock_data_vulnerabilities';
const localVue = createLocalVue();
localVue.use(Vuex);
jest.mock('~/vue_shared/plugins/global_toast');
describe('Selection Summary', () => {
let store;
let wrapper;
let mock;
const createComponent = () => {
store = createStore();
wrapper = mount(SelectionSummary, {
localVue,
store,
});
store.commit(`vulnerabilities/${RECEIVE_VULNERABILITIES_SUCCESS}`, {
vulnerabilities: mockDataVulnerabilities,
});
};
beforeEach(() => {
mock = new MockAdapter(axios);
createComponent();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
mock.restore();
});
const formSelect = () => wrapper.find(GlFormSelect);
const dismissMessage = () => wrapper.find('[data-testid="dismiss-message"]');
const dismissButton = () => wrapper.find(GlButton);
const selectByIndex = index =>
store.commit(`vulnerabilities/${SELECT_VULNERABILITY}`, mockDataVulnerabilities[index].id);
it('renders the form', () => {
expect(formSelect().exists()).toBe(true);
});
describe('dismiss message', () => {
it('renders when no vulnerabilities selected', () => {
expect(dismissMessage().text()).toBe('Dismiss 0 selected vulnerabilities as');
});
it('renders when 1 vulnerability selected', async () => {
selectByIndex(0);
await waitForPromises();
expect(dismissMessage().text()).toBe('Dismiss 1 selected vulnerability as');
});
it('renders when 2 vulnerabilities selected', async () => {
selectByIndex(0);
selectByIndex(1);
await waitForPromises();
expect(dismissMessage().text()).toBe('Dismiss 2 selected vulnerabilities as');
});
});
describe('dismiss button', () => {
it('should be disabled if an option is not selected', () => {
expect(dismissButton().exists()).toBe(true);
expect(dismissButton().props().disabled).toBe(true);
});
it('should be enabled if a vulnerability is selected and dismissal reason is selected', async () => {
expect(wrapper.vm.dismissalReason).toBe(null);
expect(wrapper.findAll('option')).toHaveLength(4);
selectByIndex(0);
const option = formSelect()
.findAll('option')
.at(1);
option.setSelected();
formSelect().trigger('change');
await wrapper.vm.$nextTick();
expect(wrapper.vm.dismissalReason).toEqual(option.attributes('value'));
expect(dismissButton().props().disabled).toBe(false);
});
it('should make an API request for each vulnerability', async () => {
mock.onPost().reply(httpStatus.OK);
selectByIndex(0);
selectByIndex(1);
const option = formSelect()
.findAll('option')
.at(1);
option.setSelected();
formSelect().trigger('change');
await waitForPromises();
dismissButton().trigger('submit');
await axios.waitForAll();
expect(mock.history.post.length).toBe(2);
expect(mock.history.post[0].data).toContain(option.attributes('value'));
});
});
});
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