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

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

@@ -55,7 +55,7 @@ export default {
 <template>
   <div class="card">
     <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
         v-model="dismissalReason"
         class="mx-3 w-auto"

ee/changelogs/unreleased/255180-Add-tests-for-selection_summary_vuex.yml

+---
+title: Create tests for ee/app/assets/javascripts/security_dashboard/components/selection_summary_vuex.vue
+merge_request: 44213
+author: Kev @KevSlashNull
+type: other

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

+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'));
+    });
+  });
+});