Migrate specs from karma to jest

Refactor security-dashboard-table-row component specs
and migrate it to use jest

ee/spec/frontend/dependencies/components/dependencies_table_row_spec.js

@@ -3,7 +3,7 @@ import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_
 import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
 import { MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY } from 'ee/dependencies/components/constants';
 import { makeDependency } from './utils';
-import mockDataVulnerabilities from '../../../javascripts/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities.json';
+import mockDataVulnerabilities from '../../security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('DependenciesTableRow component', () => {
   let wrapper;

ee/spec/frontend/dependencies/components/dependency_vulnerability_spec.js

 import { shallowMount } from '@vue/test-utils';
 import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
-import mockDataVulnerabilities from '../../../javascripts/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities.json';
+import mockDataVulnerabilities from '../../security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('DependencyVulnerability component', () => {
   let wrapper;

ee/spec/javascripts/security_dashboard/components/security_dashboard_table_row_spec.js → ee/spec/frontend/security_dashboard/components/security_dashboard_table_row_spec.js

-import Vue from 'vue';
-import component from 'ee/security_dashboard/components/security_dashboard_table_row.vue';
+import Vuex from 'vuex';
+import SecurityDashboardTableRow from 'ee/security_dashboard/components/security_dashboard_table_row.vue';
 import createStore from 'ee/security_dashboard/store';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities.json';
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
+import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('Security Dashboard Table Row', () => {
-  let vm;
-  let props;
-  let store = createStore();
-  const Component = Vue.extend(component);
+  let wrapper;
+  let store;
 
-  describe('when loading', () => {
-    beforeEach(() => {
-      props = { isLoading: true };
-      vm = mountComponentWithStore(Component, { store, props });
+  const createComponent = (mountFunc, { props = {}, storeParams = {} } = {}) => {
+    store = createStore(storeParams);
+    wrapper = mountFunc(SecurityDashboardTableRow, {
+      localVue,
+      store,
+      propsData: {
+        ...props,
+      },
     });
+  };
 
   afterEach(() => {
-      vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findLoader = () => wrapper.find('.js-skeleton-loader');
+  const findContent = i => wrapper.findAll('.table-mobile-content').at(i);
+  const findAllIssueCreated = () => wrapper.findAll('.ic-issue-created');
+
+  describe('when loading', () => {
+    beforeEach(() => {
+      createComponent(shallowMount, { props: { isLoading: true } });
     });
 
     it('should display the skeleton loader', () => {
-      expect(vm.$el.querySelector('.js-skeleton-loader')).not.toBeNull();
+      expect(findLoader().exists()).toBeTruthy();
     });
 
     it('should render a ` ` for severity', () => {
-      expect(vm.severity).toEqual(' ');
-      expect(vm.$el.querySelectorAll('.table-mobile-content')[0].textContent).toContain(' ');
+      expect(wrapper.vm.severity).toEqual(' ');
+      expect(findContent(0).text()).toEqual('');
     });
 
     it('should not render action buttons', () => {
-      expect(vm.$el.querySelectorAll('.action-buttons button').length).toBe(0);
+      expect(wrapper.findAll('.action-buttons button').length).toBe(0);
     });
   });
 
@@ -39,43 +55,37 @@ describe('Security Dashboard Table Row', () => {
     let vulnerability = mockDataVulnerabilities[0];
 
     beforeEach(() => {
-      props = { vulnerability };
-      vm = mountComponentWithStore(Component, { store, props });
-    });
-
-    afterEach(() => {
-      vm.$destroy();
+      createComponent(mount, { props: { vulnerability } });
     });
 
     it('should not display the skeleton loader', () => {
-      expect(vm.$el.querySelector('.js-skeleton-loader')).not.toExist();
+      expect(findLoader().exists()).toBeFalsy();
     });
 
     it('should render the severity', () => {
       expect(
-        vm.$el.querySelectorAll('.table-mobile-content')[0].textContent.toLowerCase(),
-      ).toContain(props.vulnerability.severity);
+        findContent(0)
+          .text()
+          .toLowerCase(),
+      ).toContain(wrapper.props().vulnerability.severity);
     });
 
     describe('the project name', () => {
       it('should render the name', () => {
-        expect(vm.$el.querySelectorAll('.table-mobile-content')[1].textContent).toContain(
-          props.vulnerability.name,
-        );
+        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.name);
       });
 
       it('should render the project namespace', () => {
-        expect(vm.$el.querySelectorAll('.table-mobile-content')[1].textContent).toContain(
-          props.vulnerability.location.file,
-        );
+        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.location.file);
       });
 
       it('should fire the openModal action when clicked', () => {
-        spyOn(vm.$store, 'dispatch');
+        jest.spyOn(store, 'dispatch').mockImplementation();
 
-        vm.$el.querySelector('.vulnerability-title').click();
+        const el = wrapper.find('.vulnerability-title');
+        el.trigger('click');
 
-        expect(vm.$store.dispatch).toHaveBeenCalledWith('vulnerabilities/openModal', {
+        expect(store.dispatch).toHaveBeenCalledWith('vulnerabilities/openModal', {
           vulnerability,
         });
       });
@@ -83,41 +93,27 @@ describe('Security Dashboard Table Row', () => {
 
     describe('Group Security Dashboard', () => {
       beforeEach(() => {
-        store = createStore({
-          dashboardType: DASHBOARD_TYPES.GROUP,
+        createComponent(shallowMount, {
+          props: { vulnerability },
+          storeParams: { dashboardType: DASHBOARD_TYPES.GROUP },
         });
-        props = { vulnerability };
-        vm = mountComponentWithStore(Component, { store, props });
-      });
-
-      afterEach(() => {
-        vm.$destroy();
       });
 
       it('should contain project name as the namespace', () => {
-        expect(vm.$el.querySelectorAll('.table-mobile-content')[1].textContent).toContain(
-          props.vulnerability.project.full_name,
-        );
+        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.project.full_name);
       });
     });
 
     describe('Non-group Security Dashboard', () => {
       beforeEach(() => {
-        store = createStore();
         // eslint-disable-next-line prefer-destructuring
         vulnerability = mockDataVulnerabilities[7];
-        props = { vulnerability };
-        vm = mountComponentWithStore(Component, { store, props });
-      });
 
-      afterEach(() => {
-        vm.$destroy();
+        createComponent(shallowMount, { props: { vulnerability } });
       });
 
       it('should contain container image as the namespace', () => {
-        expect(vm.$el.querySelectorAll('.table-mobile-content')[1].textContent).toContain(
-          props.vulnerability.location.image,
-        );
+        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.location.image);
       });
     });
   });
@@ -126,20 +122,15 @@ describe('Security Dashboard Table Row', () => {
     const vulnerability = mockDataVulnerabilities[2];
 
     beforeEach(() => {
-      props = { vulnerability };
-      vm = mountComponentWithStore(Component, { store, props });
-    });
-
-    afterEach(() => {
-      vm.$destroy();
+      createComponent(shallowMount, { props: { vulnerability } });
     });
 
     it('should have a `dismissed` class', () => {
-      expect(vm.$el.classList).toContain('dismissed');
+      expect(wrapper.classes()).toContain('dismissed');
     });
 
     it('should render a `DISMISSED` tag', () => {
-      expect(vm.$el.textContent).toContain('dismissed');
+      expect(wrapper.text()).toContain('dismissed');
     });
   });
 
@@ -147,16 +138,11 @@ describe('Security Dashboard Table Row', () => {
     const vulnerability = mockDataVulnerabilities[3];
 
     beforeEach(() => {
-      props = { vulnerability };
-      vm = mountComponentWithStore(Component, { store, props });
-    });
-
-    afterEach(() => {
-      vm.$destroy();
+      createComponent(mount, { props: { vulnerability } });
     });
 
     it('should have a `ic-issue-created` class', () => {
-      expect(vm.$el.querySelectorAll('.ic-issue-created')).toHaveLength(1);
+      expect(findAllIssueCreated()).toHaveLength(1);
     });
   });
 
@@ -164,16 +150,11 @@ describe('Security Dashboard Table Row', () => {
     const vulnerability = mockDataVulnerabilities[6];
 
     beforeEach(() => {
-      props = { vulnerability };
-      vm = mountComponentWithStore(Component, { store, props });
-    });
-
-    afterEach(() => {
-      vm.$destroy();
+      createComponent(mount, { props: { vulnerability } });
     });
 
     it('should not have a `ic-issue-created` class', () => {
-      expect(vm.$el.querySelectorAll('.ic-issue-created')).toHaveLength(0);
+      expect(findAllIssueCreated()).toHaveLength(0);
     });
   });
 
@@ -181,16 +162,11 @@ describe('Security Dashboard Table Row', () => {
     const vulnerability = mockDataVulnerabilities[0];
 
     beforeEach(() => {
-      props = { vulnerability };
-      vm = mountComponentWithStore(Component, { store, props });
-    });
-
-    afterEach(() => {
-      vm.$destroy();
+      createComponent(shallowMount, { props: { vulnerability } });
     });
 
     it('should not have a `ic-issue-created` class', () => {
-      expect(vm.$el.querySelectorAll('.ic-issue-created')).toHaveLength(0);
+      expect(findAllIssueCreated()).toHaveLength(0);
     });
   });
 });

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

@@ -12,7 +12,7 @@ import {
   REQUEST_VULNERABILITIES,
 } from 'ee/security_dashboard/store/modules/vulnerabilities/mutation_types';
 
-import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities.json';
+import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);

ee/spec/frontend/security_dashboard/store/vulnerabilities/utils_spec.js

 import { isSameVulnerability } from 'ee/security_dashboard/store/modules/vulnerabilities/utils';
-import mockData from '../../../../javascripts/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities.json';
+import mockData from '../../../security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('Vulnerabilities utils', () => {
   const clone = serializable => JSON.parse(JSON.stringify(serializable));

ee/spec/javascripts/security_dashboard/components/vulnerability_action_buttons_spec.js

@@ -4,7 +4,7 @@ import component from 'ee/security_dashboard/components/vulnerability_action_but
 import createStore from 'ee/security_dashboard/store';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { resetStore } from '../helpers';
-import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities.json';
+import mockDataVulnerabilities from '../store/vulnerabilities/data/mock_data_vulnerabilities';
 
 describe('Security Dashboard Action Buttons', () => {
   const Component = Vue.extend(component);

ee/spec/javascripts/security_dashboard/store/vulnerabilities/actions_spec.js

@@ -9,7 +9,7 @@ import * as types from 'ee/security_dashboard/store/modules/vulnerabilities/muta
 import * as actions from 'ee/security_dashboard/store/modules/vulnerabilities/actions';
 import axios from '~/lib/utils/axios_utils';
 
-import mockDataVulnerabilities from './data/mock_data_vulnerabilities.json';
+import mockDataVulnerabilities from './data/mock_data_vulnerabilities';
 import mockDataVulnerabilitiesCount from './data/mock_data_vulnerabilities_count.json';
 import mockDataVulnerabilitiesHistory from './data/mock_data_vulnerabilities_history.json';
 

ee/spec/javascripts/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities.js

+export {
+  default,
+} from '../../../../../frontend/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities';

ee/spec/javascripts/security_dashboard/store/vulnerabilities/mutations_spec.js

@@ -2,7 +2,7 @@ import createState from 'ee/security_dashboard/store/modules/vulnerabilities/sta
 import * as types from 'ee/security_dashboard/store/modules/vulnerabilities/mutation_types';
 import mutations from 'ee/security_dashboard/store/modules/vulnerabilities/mutations';
 import { DAYS } from 'ee/security_dashboard/store/modules/vulnerabilities/constants';
-import mockData from './data/mock_data_vulnerabilities.json';
+import mockData from './data/mock_data_vulnerabilities';
 
 describe('vulnerabilities module mutations', () => {
   let state;