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
Hide 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 component from 'ee/vue_shared/security_reports/components/dast_issue_body.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import DastIssueBody from 'ee/vue_shared/security_reports/components/dast_issue_body.vue';
describe('dast issue body', () => {
let vm;
describe('Dast Issue Body', () => {
let wrapper;
const Component = Vue.extend(component);
const dastIssue = {
alert: 'X-Content-Type-Options Header Missing',
severity: 'Low',
confidence: 'Medium',
count: '17',
cweid: '16',
desc: '<p>The Anti-MIME-Sniffing header X-Content-Type-Options was not set to "nosniff". </p>',
title: 'X-Content-Type-Options Header Missing',
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>',
riskcode: '1',
riskdesc: 'Low (Medium)',
const createComponent = () => {
wrapper = shallowMount(DastIssueBody, {
propsData: {
issue: {
alert: 'X-Content-Type-Options Header Missing',
severity: 'Low',
confidence: 'Medium',
count: '17',
cweid: '16',
desc:
'<p>The Anti-MIME-Sniffing header X-Content-Type-Options was not set to "nosniff". </p>',
title: 'X-Content-Type-Options Header Missing',
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>',
riskcode: '1',
riskdesc: 'Low (Medium)',
},
status: 'failed',
},
});
};
const status = 'failed';
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(
`${dastIssue.severity} (${dastIssue.confidence})`,
);
});
});
it('matches the snaphot', () => {
createComponent();
describe('issue title', () => {
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);
});
expect(wrapper.element).toMatchSnapshot();
});
});
ee/spec/frontend/vue_shared/security_reports/components/sast_container_issue_body_spec.js
View file @ bf0f387e
import Vue from 'vue';
import component 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', () => {
let vm;
const Component = Vue.extend(component);
const sastContainerIssue = {
title: 'CVE-2017-11671',
namespace: 'debian:8',
path: 'debian:8',
severity: 'Low',
vulnerability: 'CVE-2017-11671',
import { shallowMount } from '@vue/test-utils';
import SastContainerIssueBody from 'ee/vue_shared/security_reports/components/sast_container_issue_body.vue';
describe('Sast Container Issue Body', () => {
let wrapper;
const createComponent = severity => {
wrapper = shallowMount(SastContainerIssueBody, {
propsData: {
issue: {
title: 'CVE-2017-11671',
namespace: 'debian:8',
path: 'debian:8',
severity,
vulnerability: 'CVE-2017-11671',
},
status: 'Failed',
},
});
};
const status = 'failed';
afterEach(() => {
vm.$destroy();
wrapper.destroy();
wrapper = null;
});
describe('with severity', () => {
it('renders severity key', () => {
vm = mountComponent(Component, {
issue: sastContainerIssue,
status,
});
it('matches snapshot', () => {
createComponent('Low');
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 severity if present on issue', () => {
createComponent('Low');
expect(wrapper.find('.report-block-list-issue-description-text').text()).toBe('Low:');
});
it('renders name', () => {
vm = mountComponent(Component, {
issue: sastContainerIssue,
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 component from 'ee/vue_shared/security_reports/components/sast_issue_body.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
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', () => {
let vm;
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',
};
describe('Sast Issue Body', () => {
let wrapper;
const status = STATUS_FAILED;
const findDescriptionText = () => wrapper.find('.report-block-list-issue-description-text');
const findReportLink = () => wrapper.find(ReportLink);
const createComponent = issue => {
wrapper = shallowMount(SastIssueBody, {
propsData: {
issue,
status: STATUS_FAILED,
},
});
};
afterEach(() => {
vm.$destroy();
wrapper.destroy();
wrapper = null;
});
describe('with severity and confidence (new json format)', () => {
it('renders severity and confidence', () => {
vm = mountComponent(Component, {
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)', () => {
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:');
});
expect(wrapper.element).toMatchSnapshot();
});
describe('with confidence and without severity (new json format)', () => {
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 priority if no security and confidence are passed', () => {
createComponent({
priority: 'high',
});
expect(findDescriptionText().text()).toBe('high:');
});
describe('with priority (old json format)', () => {
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 confidence if no severity is passed', () => {
createComponent({
confidence: 'low',
});
expect(findDescriptionText().text()).toBe('(Low):');
});
describe('without priority', () => {
it('does not render priority key', () => {
const issueCopy = Object.assign({}, sastIssue);
delete issueCopy.severity;
delete issueCopy.confidence;
it('renders severity if no confidence is passed', () => {
createComponent({
severity: 'medium',
});
vm = mountComponent(Component, {
issue: issueCopy,
status,
});
expect(findDescriptionText().text()).toBe('Medium:');
});
expect(vm.$el.textContent.trim()).not.toContain(sastIssue.priority);
it('renders severity and confidence if both are passed', () => {
createComponent({
severity: 'medium',
confidence: 'low',
});
expect(findDescriptionText().text()).toBe('Medium (Low):');
});
describe('title', () => {
it('renders title', () => {
vm = mountComponent(Component, {
issue: sastIssue,
status,
});
it('does not render report link if no path is passed', () => {
createComponent({});
expect(vm.$el.textContent.trim()).toContain(sastIssue.title);
});
expect(findReportLink().exists()).toBe(false);
});
describe('path', () => {
it('renders path', () => {
vm = mountComponent(Component, {
issue: sastIssue,
status,
});
it('renders report link if path is passed', () => {
createComponent({ path: 'test-path' });
expect(vm.$el.querySelector('a').getAttribute('href')).toEqual(sastIssue.urlPath);
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 component from 'ee/vue_shared/security_reports/components/split_button.vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
const buttons = [
{
name: 'button one',
tagline: "button one's tagline",
isLoading: false,
action: 'button1Action',
},
{
name: 'button two',
tagline: "button two's tagline",
isLoading: false,
action: 'button2Action',
},
];
describe('Split Button', () => {
const Component = Vue.extend(component);
const buttons = [
{
name: 'button one',
tagline: "button one's tagline",
isLoading: false,
action: 'button1Action',
},
{
name: 'button two',
tagline: "button two's tagline",
isLoading: false,
action: 'button2Action',
},
{
name: 'button three',
tagline: "button three's tagline",
isLoading: true,
action: 'button3Action',
},
];
let props;
let vm;
let wrapper;
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
const createComponent = props => {
wrapper = shallowMount(SplitButton, {
propsData: {
...props,
},
});
};
afterEach(() => {
vm.$destroy();
wrapper.destroy();
wrapper = null;
});
describe('with two buttons', () => {
beforeEach(() => {
props = { buttons: buttons.slice(0, 2) };
vm = mountComponent(Component, props);
it('does not render dropdown if buttons array is empty', () => {
createComponent({
buttons: [],
});
it('renders two dropdown items', () => {
expect(vm.$el.querySelectorAll('.dropdown-item')).toHaveLength(2);
expect(findDropdown().exists()).toBe(false);
});
it('renders disabled dropdown if disabled prop is true', () => {
createComponent({
buttons: buttons.slice(0),
disabled: true,
});
it('displays the first button initially', () => {
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe(buttons[0].name);
expect(findDropdown().attributes().disabled).toBe('true');
});
it('emits correct action on dropdown click', () => {
createComponent({
buttons: buttons.slice(0),
});
it('emits the correct event when the button is pressed', () => {
jest.spyOn(vm, '$emit');
findDropdown().vm.$emit('click');
vm.$el.querySelector('.btn').click();
expect(wrapper.emitted('button1Action')).toBeDefined();
expect(wrapper.emitted('button1Action')).toHaveLength(1);
});
expect(vm.$emit).toHaveBeenCalledWith(buttons[0].action);
it('renders a correct amount of dropdown items', () => {
createComponent({
buttons,
});
expect(findDropdownItems()).toHaveLength(2);
});
describe('with three buttons', () => {
beforeEach(() => {
props = { buttons };
vm = mountComponent(Component, props);
it('renders an icon if dropdown item is selected', () => {
createComponent({
buttons: buttons.slice(0),
});
it('renders three dropdown items', () => {
expect(vm.$el.querySelectorAll('.dropdown-item')).toHaveLength(3);
});
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