Skip to content
Snippets Groups Projects
Commit eee278c5 authored by Jiaan Louw's avatar Jiaan Louw 2️⃣
Browse files

Merge branch 'xanf-get-rid-of-component-helper-ee-vue-shared' into 'master' 

Replace usage of legacy mountComponent helper with @vue/test-utils

See merge request !99138



Merged-by: default avatarJiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Approved-by: default avatarStanislav Lashmanov <slashmanov@gitlab.com>
Approved-by: default avatarJiaan Louw <3468028-jiaan@users.noreply.gitlab.com>
Co-authored-by: default avatarIllya Klymov <xanf@xanf.me>
parents 9613246f 5d41b380
No related branches found
No related tags found
1 merge request!99138Replace usage of legacy mountComponent helper with @vue/test-utils
Pipeline #656919843 passed
Stage: sync
Stage: prepare
Stage: build-images
Stage: fixtures
Stage: lint
Stage: test
Stage: post-test
Hide whitespace changes
Inline Side-by-side
ee/spec/frontend/vue_shared/components/reports/report_issues_spec.js
+ 49
− 55
View file @ eee278c5
import { mount } from '@vue/test-utils';
import Vue from 'vue';
import { componentNames } from 'ee/reports/components/issue_body';
import { codequalityParsedIssues } from 'ee_jest/vue_merge_request_widget/mock_data';
import SecurityIssueBody from 'ee/vue_shared/security_reports/components/security_issue_body.vue';
import store from 'ee/vue_shared/security_reports/store';
import {
sastParsedIssues,
dockerReportParsed,
parsedDast,
secretDetectionParsedIssues,
} from 'ee_jest/vue_shared/security_reports/mock_data';
import mountComponent, { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
import reportIssues from '~/reports/components/report_item.vue';
import ReportIssues from '~/reports/components/report_item.vue';
import { STATUS_FAILED, STATUS_SUCCESS } from '~/reports/constants';
describe('Report issues', () => {
let vm;
let wrapper;
let ReportIssues;
beforeEach(() => {
ReportIssues = Vue.extend(reportIssues);
});
afterEach(() => {
if (vm?.$destroy) vm.$destroy();
if (wrapper) wrapper.destroy();
wrapper.destroy();
});
describe('for codequality issues', () => {
describe('resolved issues', () => {
beforeEach(() => {
vm = mountComponent(ReportIssues, {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_SUCCESS,
wrapper = mount(ReportIssues, {
propsData: {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_SUCCESS,
},
});
});
it('should render "Fixed" keyword', () => {
expect(vm.$el.textContent).toContain('Fixed');
expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
expect(wrapper.text()).toContain('Fixed');
expect(wrapper.text()).toMatchInterpolatedText(
'Fixed: Minor - Insecure Dependency in Gemfile.lock:12',
);
});
......@@ -49,22 +40,24 @@ describe('Report issues', () => {
describe('unresolved issues', () => {
beforeEach(() => {
vm = mountComponent(ReportIssues, {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_FAILED,
wrapper = mount(ReportIssues, {
propsData: {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_FAILED,
},
});
});
it('should not render "Fixed" keyword', () => {
expect(vm.$el.textContent).not.toContain('Fixed');
expect(wrapper.text()).not.toContain('Fixed');
});
});
});
describe('with location', () => {
it('should render location', () => {
vm = mount(ReportIssues, {
wrapper = mount(ReportIssues, {
propsData: {
issue: sastParsedIssues[0],
component: componentNames.SecurityIssueBody,
......@@ -75,8 +68,8 @@ describe('Report issues', () => {
},
});
expect(vm.text()).toContain('in');
expect(vm.find('.report-block-list-issue a').attributes('href')).toEqual(
expect(wrapper.text()).toContain('in');
expect(wrapper.find('.report-block-list-issue a').attributes('href')).toEqual(
sastParsedIssues[0].urlPath,
);
});
......@@ -84,36 +77,38 @@ describe('Report issues', () => {
describe('without location', () => {
it('should not render location', () => {
vm = mountComponent(ReportIssues, {
issue: {
title: 'foo',
wrapper = mount(ReportIssues, {
propsData: {
issue: {
title: 'foo',
},
component: componentNames.SecurityIssueBody,
status: STATUS_SUCCESS,
},
component: componentNames.SecurityIssueBody,
status: STATUS_SUCCESS,
});
expect(vm.$el.textContent).not.toContain('in');
expect(vm.$el.querySelector('.report-block-list-issue a')).toEqual(null);
expect(wrapper.text()).not.toContain('in');
expect(wrapper.find('.report-block-list-issue a').exists()).toBe(false);
});
});
describe('for container scanning issues', () => {
beforeEach(() => {
vm = mountComponent(ReportIssues, {
issue: dockerReportParsed.unapproved[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
wrapper = mount(ReportIssues, {
propsData: {
issue: dockerReportParsed.unapproved[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
},
});
});
it('renders severity', () => {
expect(vm.$el.textContent.trim().toLowerCase()).toContain(
dockerReportParsed.unapproved[0].severity,
);
expect(wrapper.text().toLowerCase()).toContain(dockerReportParsed.unapproved[0].severity);
});
it('renders CVE name', () => {
expect(vm.$el.querySelector('.report-block-list-issue button').textContent.trim()).toEqual(
expect(wrapper.find('.report-block-list-issue button').text()).toEqual(
dockerReportParsed.unapproved[0].title,
);
});
......@@ -121,9 +116,8 @@ describe('Report issues', () => {
describe('for dast issues', () => {
beforeEach(() => {
vm = mountComponentWithStore(ReportIssues, {
store,
props: {
wrapper = mount(ReportIssues, {
propsData: {
issue: parsedDast[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
......@@ -132,28 +126,28 @@ describe('Report issues', () => {
});
it('renders severity and title', () => {
expect(vm.$el.textContent).toContain(parsedDast[0].title);
expect(vm.$el.textContent.toLowerCase()).toContain(`${parsedDast[0].severity}`);
expect(wrapper.text()).toContain(parsedDast[0].title);
expect(wrapper.text().toLowerCase()).toContain(`${parsedDast[0].severity}`);
});
});
describe('for secret Detection issues', () => {
beforeEach(() => {
vm = mountComponent(ReportIssues, {
issue: secretDetectionParsedIssues[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
wrapper = mount(ReportIssues, {
propsData: {
issue: secretDetectionParsedIssues[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
},
});
});
it('renders severity', () => {
expect(vm.$el.textContent.trim().toLowerCase()).toContain(
secretDetectionParsedIssues[0].severity,
);
expect(wrapper.text().toLowerCase()).toContain(secretDetectionParsedIssues[0].severity);
});
it('renders CVE name', () => {
expect(vm.$el.querySelector('.report-block-list-issue button').textContent.trim()).toEqual(
expect(wrapper.find('.report-block-list-issue button').text()).toEqual(
secretDetectionParsedIssues[0].title,
);
});
......
ee/spec/frontend/vue_shared/components/reports/report_item_spec.js
+ 49
− 63
View file @ eee278c5
import { mount } from '@vue/test-utils';
import Vue from 'vue';
import { componentNames, iconComponentNames } from 'ee/reports/components/issue_body';
import { codequalityParsedIssues } from 'ee_jest/vue_merge_request_widget/mock_data';
import LicenseIssueBody from 'ee/vue_shared/license_compliance/components/license_issue_body.vue';
import LicenseStatusIcon from 'ee/vue_shared/license_compliance/components/license_status_icon.vue';
import SecurityIssueBody from 'ee/vue_shared/security_reports/components/security_issue_body.vue';
import store from 'ee/vue_shared/security_reports/store';
import {
sastParsedIssues,
dockerReportParsed,
......@@ -13,38 +11,31 @@ import {
secretDetectionParsedIssues,
licenseComplianceParsedIssues,
} from 'ee_jest/vue_shared/security_reports/mock_data';
import mountComponent, { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
import reportIssue from '~/reports/components/report_item.vue';
import ReportIssue from '~/reports/components/report_item.vue';
import { STATUS_FAILED, STATUS_SUCCESS, STATUS_NEUTRAL } from '~/reports/constants';
describe('Report issue', () => {
let vm;
let wrapper;
let ReportIssue;
beforeEach(() => {
ReportIssue = Vue.extend(reportIssue);
});
afterEach(() => {
if (vm?.$destroy) vm.$destroy();
if (wrapper) wrapper.destroy();
wrapper.destroy();
});
describe('for codequality issue', () => {
describe('resolved issue', () => {
beforeEach(() => {
vm = mountComponent(ReportIssue, {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_SUCCESS,
wrapper = mount(ReportIssue, {
propsData: {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_SUCCESS,
},
});
});
it('should render "Fixed" keyword', () => {
expect(vm.$el.textContent).toContain('Fixed');
expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
expect(wrapper.text()).toContain('Fixed');
expect(wrapper.text()).toMatchInterpolatedText(
'Fixed: Minor - Insecure Dependency in Gemfile.lock:12',
);
});
......@@ -52,22 +43,24 @@ describe('Report issue', () => {
describe('unresolved issue', () => {
beforeEach(() => {
vm = mountComponent(ReportIssue, {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_FAILED,
wrapper = mount(ReportIssue, {
propsData: {
issue: codequalityParsedIssues[0],
component: componentNames.CodequalityIssueBody,
status: STATUS_FAILED,
},
});
});
it('should not render "Fixed" keyword', () => {
expect(vm.$el.textContent).not.toContain('Fixed');
expect(wrapper.text()).not.toContain('Fixed');
});
});
});
describe('with location', () => {
it('should render location', () => {
vm = mount(ReportIssue, {
wrapper = mount(ReportIssue, {
propsData: {
issue: sastParsedIssues[0],
component: componentNames.SecurityIssueBody,
......@@ -78,14 +71,14 @@ describe('Report issue', () => {
},
});
expect(vm.text()).toContain('in');
expect(vm.find('li a').attributes('href')).toEqual(sastParsedIssues[0].urlPath);
expect(wrapper.text()).toContain('in');
expect(wrapper.find('li a').attributes('href')).toEqual(sastParsedIssues[0].urlPath);
});
});
describe('without location', () => {
it('should not render location', () => {
vm = mount(ReportIssue, {
wrapper = mount(ReportIssue, {
propsData: {
issue: {
title: 'foo',
......@@ -98,38 +91,35 @@ describe('Report issue', () => {
},
});
expect(vm.text()).not.toContain('in');
expect(vm.find('a').exists()).toBe(false);
expect(wrapper.text()).not.toContain('in');
expect(wrapper.find('a').exists()).toBe(false);
});
});
describe('for container scanning issue', () => {
beforeEach(() => {
vm = mountComponent(ReportIssue, {
issue: dockerReportParsed.unapproved[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
wrapper = mount(ReportIssue, {
propsData: {
issue: dockerReportParsed.unapproved[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
},
});
});
it('renders severity', () => {
expect(vm.$el.textContent.trim().toLowerCase()).toContain(
dockerReportParsed.unapproved[0].severity,
);
expect(wrapper.text().toLowerCase()).toContain(dockerReportParsed.unapproved[0].severity);
});
it('renders CVE name', () => {
expect(vm.$el.querySelector('button').textContent.trim()).toEqual(
dockerReportParsed.unapproved[0].title,
);
expect(wrapper.find('button').text()).toEqual(dockerReportParsed.unapproved[0].title);
});
});
describe('for dast issue', () => {
beforeEach(() => {
vm = mountComponentWithStore(ReportIssue, {
store,
props: {
wrapper = mount(ReportIssue, {
propsData: {
issue: parsedDast[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
......@@ -138,30 +128,28 @@ describe('Report issue', () => {
});
it('renders severity and title', () => {
expect(vm.$el.textContent).toContain(parsedDast[0].title);
expect(vm.$el.textContent.toLowerCase()).toContain(`${parsedDast[0].severity}`);
expect(wrapper.text()).toContain(parsedDast[0].title);
expect(wrapper.text().toLowerCase()).toContain(`${parsedDast[0].severity}`);
});
});
describe('for secret Description issue', () => {
beforeEach(() => {
vm = mountComponent(ReportIssue, {
issue: secretDetectionParsedIssues[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
wrapper = mount(ReportIssue, {
propsData: {
issue: secretDetectionParsedIssues[0],
component: componentNames.SecurityIssueBody,
status: STATUS_FAILED,
},
});
});
it('renders severity', () => {
expect(vm.$el.textContent.trim().toLowerCase()).toContain(
secretDetectionParsedIssues[0].severity,
);
expect(wrapper.text().toLowerCase()).toContain(secretDetectionParsedIssues[0].severity);
});
it('renders CVE name', () => {
expect(vm.$el.querySelector('button').textContent.trim()).toEqual(
secretDetectionParsedIssues[0].title,
);
expect(wrapper.find('button').text()).toEqual(secretDetectionParsedIssues[0].title);
});
});
......@@ -187,9 +175,8 @@ describe('Report issue', () => {
describe('showReportSectionStatusIcon', () => {
it('does not render CI Status Icon when showReportSectionStatusIcon is false', () => {
vm = mountComponentWithStore(ReportIssue, {
store,
props: {
wrapper = mount(ReportIssue, {
propsData: {
issue: parsedDast[0],
component: componentNames.SecurityIssueBody,
status: STATUS_SUCCESS,
......@@ -197,20 +184,19 @@ describe('Report issue', () => {
},
});
expect(vm.$el.querySelectorAll('.report-block-list-icon')).toHaveLength(0);
expect(wrapper.findAll('.report-block-list-icon')).toHaveLength(0);
});
it('shows status icon when unspecified', () => {
vm = mountComponentWithStore(ReportIssue, {
store,
props: {
wrapper = mount(ReportIssue, {
propsData: {
issue: parsedDast[0],
component: componentNames.SecurityIssueBody,
status: STATUS_SUCCESS,
},
});
expect(vm.$el.querySelectorAll('.report-block-list-icon')).toHaveLength(1);
expect(wrapper.findAll('.report-block-list-icon')).toHaveLength(1);
});
});
});
ee/spec/frontend/vue_shared/license_compliance/components/license_packages_spec.js
+ 31
− 44
View file @ eee278c5
import Vue, { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import LicensePackages from 'ee/vue_shared/license_compliance/components/license_packages.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { licenseReport } from '../mock_data';
const examplePackages = licenseReport[0].packages;
const createComponent = (packages = examplePackages) => {
const Component = Vue.extend(LicensePackages);
return mountComponent(Component, { packages });
};
describe('LicensePackages', () => {
let vm;
let wrapper;
beforeEach(() => {
vm = createComponent();
});
const createComponent = (packages = examplePackages) => {
wrapper = mount(LicensePackages, { propsData: { packages } });
};
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
describe('computed', () => {
describe('remainingPackages', () => {
it('returns string with count of packages when it exceeds `displayPackageCount` prop', () => {
expect(vm.remainingPackages).toBe('2 more');
});
it('returns empty string when count of packages does not exceed `displayPackageCount` prop', async () => {
vm.displayPackageCount = examplePackages.length + 1;
await nextTick();
expect(vm.remainingPackages).toBe('');
});
});
const findShowAllPackagesButton = () => wrapper.find('.btn-show-all-packages');
const findLicenseDependecies = () => wrapper.find('.js-license-dependencies');
it('renders packages list for a particular license', () => {
createComponent();
const packages = findLicenseDependecies();
expect(packages.exists()).toBe(true);
expect(packages.text()).toBe('Used by pg, puma, foo, and');
});
describe('methods', () => {
describe('handleShowPackages', () => {
it('sets value of `showAllPackages` prop to true', () => {
vm.showAllPackages = false;
vm.handleShowPackages();
it('renders more packages button element', () => {
createComponent();
const button = findShowAllPackagesButton();
expect(vm.showAllPackages).toBe(true);
});
});
expect(button.exists()).toBe(true);
expect(button.text()).toBe('2 more');
});
describe('template', () => {
it('renders packages list for a particular license', () => {
const packagesEl = vm.$el.querySelector('.js-license-dependencies');
it('does not render more packages button when count of packages does not exceed `displayPackageCount`', () => {
createComponent(examplePackages.slice(0, 1));
expect(findShowAllPackagesButton().exists()).toBe(false);
});
expect(packagesEl).not.toBeNull();
expect(packagesEl.innerText.trim()).toBe('Used by pg, puma, foo, and');
});
it('renders all packages when show all packages button is clicked', async () => {
createComponent();
it('renders more packages button element', () => {
const buttonEl = vm.$el.querySelector('.btn-show-all-packages');
await findShowAllPackagesButton().trigger('click');
expect(buttonEl).not.toBeNull();
expect(buttonEl.innerText.trim()).toBe('2 more');
});
expect(findLicenseDependecies().text()).toBe('Used by pg, puma, foo, bar, and baz');
});
});
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