Skip to content

G
gitlab-ce
Commit bf0f387e authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch '197944-convert-jest-tests-to-use-vtu-in-ee-spec-frontend-vue_shared' into 'master' 

Convert Jest tests to use VTU in 'ee/spec/frontend/vue_shared'

Closes #197944

See merge request gitlab-org/gitlab!23413
parents ab1b6793 b2136584
Show whitespace changes
Inline Side-by-side
Showing with 239 additions and 232 deletions
ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/dast_issue_body_spec.js.snap 0 → 100644
View file @ bf0f387e
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dast Issue Body matches the snaphot 1`] = `
<div
class="report-block-list-issue-description prepend-top-5 append-bottom-5"
>
<div
class="report-block-list-issue-description-text"
>
Low (Medium):
<modal-open-name-stub
class="js-modal-dast"
issue="[object Object]"
status="failed"
/>
</div>
</div>
`;
ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_container_issue_body_spec.js.snap 0 → 100644
View file @ bf0f387e
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sast Container Issue Body matches snapshot 1`] = `
<div
class="report-block-list-issue-description prepend-top-5 append-bottom-5"
>
<div
class="report-block-list-issue-description-text"
>
Low:
<modal-open-name-stub
issue="[object Object]"
status="Failed"
/>
</div>
</div>
`;
ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_issue_body_spec.js.snap 0 → 100644
View file @ bf0f387e
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sast Issue Body matches snapshot 1`] = `
<div
class="report-block-list-issue-description prepend-top-5 append-bottom-5"
>
<div
class="report-block-list-issue-description-text"
>
Medium (Low):
<modal-open-name-stub
issue="[object Object]"
status="failed"
/>
</div>
<!---->
</div>
`;
ee/spec/frontend/vue_shared/security_reports/components/dast_issue_body_spec.js
View file @ bf0f387e
import Vue from 'vue'; import { shallowMount } from '@vue/test-utils';
import component from 'ee/vue_shared/security_reports/components/dast_issue_body.vue'; import DastIssueBody from 'ee/vue_shared/security_reports/components/dast_issue_body.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
describe('dast issue body', () => { describe('Dast Issue Body', () => {
let vm; let wrapper;
const Component = Vue.extend(component); const createComponent = () => {
const dastIssue = { wrapper = shallowMount(DastIssueBody, {
propsData: {
issue: {
alert: 'X-Content-Type-Options Header Missing', alert: 'X-Content-Type-Options Header Missing',
severity: 'Low', severity: 'Low',
confidence: 'Medium', confidence: 'Medium',
count: '17', count: '17',
cweid: '16', cweid: '16',
desc: '<p>The Anti-MIME-Sniffing header X-Content-Type-Options was not set to "nosniff". </p>', desc:
'<p>The Anti-MIME-Sniffing header X-Content-Type-Options was not set to "nosniff". </p>',
title: 'X-Content-Type-Options Header Missing', title: 'X-Content-Type-Options Header Missing',
reference: reference:
'<p>http://msdn.microsoft.com/en-us/library/ie/gg622941%28v=vs.85%29.aspx</p><p>https://www.owasp.org/index.php/List_of_useful_HTTP_headers</p>', '<p>http://msdn.microsoft.com/en-us/library/ie/gg622941%28v=vs.85%29.aspx</p><p>https://www.owasp.org/index.php/List_of_useful_HTTP_headers</p>',
riskcode: '1', riskcode: '1',
riskdesc: 'Low (Medium)', riskdesc: 'Low (Medium)',
},
status: 'failed',
},
});
}; };
const status = 'failed';
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); wrapper = null;
describe('severity and confidence ', () => {
it('renders severity and confidence', () => {
vm = mountComponent(Component, {
issue: dastIssue,
issueIndex: 1,
modalTargetId: '#modal-mrwidget-issue',
status,
}); });
expect(vm.$el.textContent.trim()).toContain( it('matches the snaphot', () => {
`${dastIssue.severity} (${dastIssue.confidence})`, createComponent();
);
});
});
describe('issue title', () => { expect(wrapper.element).toMatchSnapshot();
beforeEach(() => {
vm = mountComponent(Component, {
issue: dastIssue,
issueIndex: 1,
modalTargetId: '#modal-mrwidget-issue',
status,
});
});
it('renders button with issue title', () => {
expect(vm.$el.textContent.trim()).toContain(dastIssue.title);
});
}); });
}); });
ee/spec/frontend/vue_shared/security_reports/components/sast_container_issue_body_spec.js
View file @ bf0f387e
import Vue from 'vue'; import { shallowMount } from '@vue/test-utils';
import component from 'ee/vue_shared/security_reports/components/sast_container_issue_body.vue'; import SastContainerIssueBody from 'ee/vue_shared/security_reports/components/sast_container_issue_body.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
describe('sast container issue body', () => { describe('Sast Container Issue Body', () => {
let vm; let wrapper;
const Component = Vue.extend(component); const createComponent = severity => {
wrapper = shallowMount(SastContainerIssueBody, {
const sastContainerIssue = { propsData: {
issue: {
title: 'CVE-2017-11671', title: 'CVE-2017-11671',
namespace: 'debian:8', namespace: 'debian:8',
path: 'debian:8', path: 'debian:8',
severity: 'Low', severity,
vulnerability: 'CVE-2017-11671', vulnerability: 'CVE-2017-11671',
},
status: 'Failed',
},
});
}; };
const status = 'failed';
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
wrapper = null;
}); });
describe('with severity', () => { it('matches snapshot', () => {
it('renders severity key', () => { createComponent('Low');
vm = mountComponent(Component, {
issue: sastContainerIssue,
status,
});
expect(vm.$el.textContent.trim()).toContain(sastContainerIssue.severity); expect(wrapper.element).toMatchSnapshot();
});
});
describe('without severity', () => {
it('does not render severity key', () => {
const issueCopy = Object.assign({}, sastContainerIssue);
delete issueCopy.severity;
vm = mountComponent(Component, {
issue: issueCopy,
status,
});
expect(vm.$el.textContent.trim()).not.toContain(sastContainerIssue.severity);
});
}); });
it('renders name', () => { it('renders severity if present on issue', () => {
vm = mountComponent(Component, { createComponent('Low');
issue: sastContainerIssue, expect(wrapper.find('.report-block-list-issue-description-text').text()).toBe('Low:');
status,
}); });
expect(vm.$el.querySelector('button').textContent.trim()).toEqual(sastContainerIssue.title); it('does not render severity if not present on issue', () => {
createComponent();
expect(wrapper.find('.report-block-list-issue-description-text').text()).toBe('');
}); });
}); });
ee/spec/frontend/vue_shared/security_reports/components/sast_issue_body_spec.js
View file @ bf0f387e
import Vue from 'vue'; import { shallowMount } from '@vue/test-utils';
import component from 'ee/vue_shared/security_reports/components/sast_issue_body.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { STATUS_FAILED } from '~/reports/constants'; import { STATUS_FAILED } from '~/reports/constants';
import SastIssueBody from 'ee/vue_shared/security_reports/components/sast_issue_body.vue';
import ReportLink from '~/reports/components/report_link.vue';
describe('sast issue body', () => { describe('Sast Issue Body', () => {
let vm; let wrapper;
const Component = Vue.extend(component);
const sastIssue = {
cve: 'CVE-2016-9999',
file: 'Gemfile.lock',
message: 'Test Information Leak Vulnerability in Action View',
title: 'Test Information Leak Vulnerability in Action View',
path: 'Gemfile.lock',
solution:
'upgrade to >= 5.0.0.beta1.1, >= 4.2.5.1, ~> 4.2.5, >= 4.1.14.1, ~> 4.1.14, ~> 3.2.22.1',
tool: 'bundler_audit',
url: 'https://groups.google.com/forum/#!topic/rubyonrails-security/335P1DcLG00',
urlPath: '/Gemfile.lock',
severity: 'medium',
confidence: 'low',
};
const status = STATUS_FAILED; const findDescriptionText = () => wrapper.find('.report-block-list-issue-description-text');
const findReportLink = () => wrapper.find(ReportLink);
afterEach(() => { const createComponent = issue => {
vm.$destroy(); wrapper = shallowMount(SastIssueBody, {
propsData: {
issue,
status: STATUS_FAILED,
},
}); });
};
describe('with severity and confidence (new json format)', () => { afterEach(() => {
it('renders severity and confidence', () => { wrapper.destroy();
vm = mountComponent(Component, { wrapper = null;
issue: sastIssue,
status,
}); });
expect(vm.$el.textContent.trim()).toContain('Medium (Low):'); it('matches snapshot', () => {
}); createComponent({
severity: 'medium',
confidence: 'low',
priority: 'high',
}); });
describe('with severity and without confidence (new json format)', () => { expect(wrapper.element).toMatchSnapshot();
it('renders severity only', () => {
const issueCopy = Object.assign({}, sastIssue);
delete issueCopy.confidence;
vm = mountComponent(Component, {
issue: issueCopy,
status,
}); });
expect(vm.$el.textContent.trim()).toContain('Medium:'); it('renders priority if no security and confidence are passed', () => {
}); createComponent({
priority: 'high',
}); });
describe('with confidence and without severity (new json format)', () => { expect(findDescriptionText().text()).toBe('high:');
it('renders confidence only', () => {
const issueCopy = Object.assign({}, sastIssue);
delete issueCopy.severity;
vm = mountComponent(Component, {
issue: issueCopy,
status,
}); });
expect(vm.$el.textContent.trim()).toContain('(Low):'); it('renders confidence if no severity is passed', () => {
}); createComponent({
confidence: 'low',
}); });
describe('with priority (old json format)', () => { expect(findDescriptionText().text()).toBe('(Low):');
it('renders priority key', () => {
const issueCopy = Object.assign({}, sastIssue);
delete issueCopy.severity;
delete issueCopy.confidence;
issueCopy.priority = 'Low';
vm = mountComponent(Component, {
issue: issueCopy,
status,
}); });
expect(vm.$el.textContent.trim()).toContain(issueCopy.priority); it('renders severity if no confidence is passed', () => {
}); createComponent({
severity: 'medium',
}); });
describe('without priority', () => { expect(findDescriptionText().text()).toBe('Medium:');
it('does not render priority key', () => {
const issueCopy = Object.assign({}, sastIssue);
delete issueCopy.severity;
delete issueCopy.confidence;
vm = mountComponent(Component, {
issue: issueCopy,
status,
}); });
expect(vm.$el.textContent.trim()).not.toContain(sastIssue.priority); it('renders severity and confidence if both are passed', () => {
}); createComponent({
severity: 'medium',
confidence: 'low',
}); });
describe('title', () => { expect(findDescriptionText().text()).toBe('Medium (Low):');
it('renders title', () => {
vm = mountComponent(Component, {
issue: sastIssue,
status,
}); });
expect(vm.$el.textContent.trim()).toContain(sastIssue.title); it('does not render report link if no path is passed', () => {
}); createComponent({});
});
describe('path', () => { expect(findReportLink().exists()).toBe(false);
it('renders path', () => {
vm = mountComponent(Component, {
issue: sastIssue,
status,
}); });
expect(vm.$el.querySelector('a').getAttribute('href')).toEqual(sastIssue.urlPath); it('renders report link if path is passed', () => {
createComponent({ path: 'test-path' });
expect(vm.$el.querySelector('a').textContent.trim()).toEqual(sastIssue.path); expect(findReportLink().exists()).toBe(true);
});
}); });
}); });
ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js
View file @ bf0f387e
import Vue from 'vue'; import { shallowMount } from '@vue/test-utils';
import component from 'ee/vue_shared/security_reports/components/split_button.vue'; import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import mountComponent from 'helpers/vue_mount_component_helper'; import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
describe('Split Button', () => { const buttons = [
const Component = Vue.extend(component);
const buttons = [
{ {
name: 'button one', name: 'button one',
tagline: "button one's tagline", tagline: "button one's tagline",
...@@ -17,51 +16,73 @@ describe('Split Button', () => { ...@@ -17,51 +16,73 @@ describe('Split Button', () => {
isLoading: false, isLoading: false,
action: 'button2Action', action: 'button2Action',
}, },
{ ];
name: 'button three',
tagline: "button three's tagline", describe('Split Button', () => {
isLoading: true, let wrapper;
action: 'button3Action',
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
const createComponent = props => {
wrapper = shallowMount(SplitButton, {
propsData: {
...props,
}, },
]; });
let props; };
let vm;
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
wrapper = null;
});
it('does not render dropdown if buttons array is empty', () => {
createComponent({
buttons: [],
}); });
describe('with two buttons', () => { expect(findDropdown().exists()).toBe(false);
beforeEach(() => {
props = { buttons: buttons.slice(0, 2) };
vm = mountComponent(Component, props);
}); });
it('renders two dropdown items', () => { it('renders disabled dropdown if disabled prop is true', () => {
expect(vm.$el.querySelectorAll('.dropdown-item')).toHaveLength(2); createComponent({
buttons: buttons.slice(0),
disabled: true,
}); });
it('displays the first button initially', () => { expect(findDropdown().attributes().disabled).toBe('true');
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe(buttons[0].name);
}); });
it('emits the correct event when the button is pressed', () => { it('emits correct action on dropdown click', () => {
jest.spyOn(vm, '$emit'); createComponent({
buttons: buttons.slice(0),
});
vm.$el.querySelector('.btn').click(); findDropdown().vm.$emit('click');
expect(vm.$emit).toHaveBeenCalledWith(buttons[0].action); expect(wrapper.emitted('button1Action')).toBeDefined();
expect(wrapper.emitted('button1Action')).toHaveLength(1);
}); });
it('renders a correct amount of dropdown items', () => {
createComponent({
buttons,
}); });
describe('with three buttons', () => { expect(findDropdownItems()).toHaveLength(2);
beforeEach(() => {
props = { buttons };
vm = mountComponent(Component, props);
}); });
it('renders three dropdown items', () => { it('renders an icon if dropdown item is selected', () => {
expect(vm.$el.querySelectorAll('.dropdown-item')).toHaveLength(3); createComponent({
buttons: buttons.slice(0),
}); });
expect(
findDropdownItems()
.at(0)
.find(Icon)
.exists(),
).toBe(true);
}); });
}); });
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7