From b21365841899f909ac38c6851a87143bfb0afba1 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <ntepluhina@gitlab.com>
Date: Thu, 23 Jan 2020 08:07:57 +0000
Subject: [PATCH] Convert Jest tests to use VTU in
'ee/spec/frontend/vue_shared'
---
.../dast_issue_body_spec.js.snap | 21 +++
.../sast_container_issue_body_spec.js.snap | 19 +++
.../sast_issue_body_spec.js.snap | 21 +++
.../components/dast_issue_body_spec.js | 76 ++++-----
.../sast_container_issue_body_spec.js | 75 ++++-----
.../components/sast_issue_body_spec.js | 146 +++++++-----------
.../components/split_button_spec.js | 113 ++++++++------
7 files changed, 239 insertions(+), 232 deletions(-)
create mode 100644 ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/dast_issue_body_spec.js.snap
create mode 100644 ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_container_issue_body_spec.js.snap
create mode 100644 ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_issue_body_spec.js.snap
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/dast_issue_body_spec.js.snap b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/dast_issue_body_spec.js.snap
new file mode 100644
index 00000000000..3cfafba1ff0
--- /dev/null
+++ b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/dast_issue_body_spec.js.snap
@@ -0,0 +1,21 @@
+// 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>
+`;
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_container_issue_body_spec.js.snap b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_container_issue_body_spec.js.snap
new file mode 100644
index 00000000000..177af1d16a1
--- /dev/null
+++ b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_container_issue_body_spec.js.snap
@@ -0,0 +1,19 @@
+// 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>
+`;
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_issue_body_spec.js.snap b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_issue_body_spec.js.snap
new file mode 100644
index 00000000000..50e787b34e0
--- /dev/null
+++ b/ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_issue_body_spec.js.snap
@@ -0,0 +1,21 @@
+// 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>
+`;
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/dast_issue_body_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/dast_issue_body_spec.js
index 46a53745bfe..4bb70b2ff1e 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/dast_issue_body_spec.js
+++ b/ee/spec/frontend/vue_shared/security_reports/components/dast_issue_body_spec.js
@@ -1,57 +1,39 @@
-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();
});
});
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/sast_container_issue_body_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/sast_container_issue_body_spec.js
index 7eb71aabb28..64e94a8111b 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/sast_container_issue_body_spec.js
+++ b/ee/spec/frontend/vue_shared/security_reports/components/sast_container_issue_body_spec.js
@@ -1,57 +1,42 @@
-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('');
});
});
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/sast_issue_body_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/sast_issue_body_spec.js
index 26fb2bba62d..19bcf3c7ce1 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/sast_issue_body_spec.js
+++ b/ee/spec/frontend/vue_shared/security_reports/components/sast_issue_body_spec.js
@@ -1,122 +1,80 @@
-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);
});
});
diff --git a/ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js b/ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js
index 6fa44ec375c..cee703baed8 100644
--- a/ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js
+++ b/ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js
@@ -1,67 +1,88 @@
-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);
});
});
--
2.30.9