Skip to content

G
gitlab-ce
Commit e83fec82 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch 'move-ee-mr-widget-options-specs-to-vue-test-utils' into 'master' 

Migrate EE MrWidgetOptions spec to @vue/test-utils

See merge request gitlab-org/gitlab!51926
parents 8d917652 cafff2bd
Show whitespace changes
Inline Side-by-side
Showing with 233 additions and 248 deletions
ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js
View file @ e83fec82
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue'; import { nextTick } from 'vue';
import mrWidgetOptions from 'ee/vue_merge_request_widget/mr_widget_options.vue'; import MrWidgetOptions from 'ee/vue_merge_request_widget/mr_widget_options.vue';
import { import {
sastDiffSuccessMock, sastDiffSuccessMock,
dastDiffSuccessMock, dastDiffSuccessMock,
...@@ -12,7 +13,6 @@ import { ...@@ -12,7 +13,6 @@ import {
} from 'ee_jest/vue_shared/security_reports/mock_data'; } from 'ee_jest/vue_shared/security_reports/mock_data';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import { trimText } from 'helpers/text_helper'; import { trimText } from 'helpers/text_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
...@@ -41,9 +41,8 @@ const COVERAGE_FUZZING_SELECTOR = '.js-coverage-fuzzing-widget'; ...@@ -41,9 +41,8 @@ const COVERAGE_FUZZING_SELECTOR = '.js-coverage-fuzzing-widget';
const API_FUZZING_SELECTOR = '.js-api-fuzzing-widget'; const API_FUZZING_SELECTOR = '.js-api-fuzzing-widget';
describe('ee merge request widget options', () => { describe('ee merge request widget options', () => {
let vm; let wrapper;
let mock; let mock;
let Component;
const DEFAULT_BROWSER_PERFORMANCE = { const DEFAULT_BROWSER_PERFORMANCE = {
head_path: 'head.json', head_path: 'head.json',
...@@ -55,13 +54,16 @@ describe('ee merge request widget options', () => { ...@@ -55,13 +54,16 @@ describe('ee merge request widget options', () => {
base_path: 'base.json', base_path: 'base.json',
}; };
beforeEach(() => { const createComponent = (options) => {
delete mrWidgetOptions.extends.el; // Prevent component mounting wrapper = mount(MrWidgetOptions, {
...options,
});
};
beforeEach(() => {
gon.features = { asyncMrWidget: true }; gon.features = { asyncMrWidget: true };
gl.mrWidgetData = { ...mockData }; gl.mrWidgetData = { ...mockData };
Component = Vue.extend(mrWidgetOptions);
mock = new MockAdapter(axios); mock = new MockAdapter(axios);
mock.onGet(mockData.merge_request_widget_path).reply(() => [200, gl.mrWidgetData]); mock.onGet(mockData.merge_request_widget_path).reply(() => [200, gl.mrWidgetData]);
...@@ -75,28 +77,28 @@ describe('ee merge request widget options', () => { ...@@ -75,28 +77,28 @@ describe('ee merge request widget options', () => {
// This is not ideal and will be cleaned up in // This is not ideal and will be cleaned up in
// https://gitlab.com/gitlab-org/gitlab/-/issues/214032 // https://gitlab.com/gitlab-org/gitlab/-/issues/214032
return waitForPromises().then(() => { return waitForPromises().then(() => {
vm.$destroy(); wrapper.destroy();
vm = null; wrapper = null;
mock.restore(); mock.restore();
gon.features = {}; gon.features = {};
}); });
}); });
const findBrowserPerformanceWidget = () => vm.$el.querySelector('.js-browser-performance-widget'); const findBrowserPerformanceWidget = () => wrapper.find('.js-browser-performance-widget');
const findLoadPerformanceWidget = () => vm.$el.querySelector('.js-load-performance-widget'); const findLoadPerformanceWidget = () => wrapper.find('.js-load-performance-widget');
const findExtendedSecurityWidget = () => vm.$el.querySelector('.js-security-widget'); const findExtendedSecurityWidget = () => wrapper.find('.js-security-widget');
const findBaseSecurityWidget = () => vm.$el.querySelector('[data-testid="security-mr-widget"]'); const findBaseSecurityWidget = () => wrapper.find('[data-testid="security-mr-widget"]');
const setBrowserPerformance = (data = {}) => { const setBrowserPerformance = (data = {}) => {
const browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE, ...data }; const browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE, ...data };
gl.mrWidgetData.browserPerformance = browserPerformance; gl.mrWidgetData.browserPerformance = browserPerformance;
vm.mr.browserPerformance = browserPerformance; wrapper.vm.mr.browserPerformance = browserPerformance;
}; };
const setLoadPerformance = (data = {}) => { const setLoadPerformance = (data = {}) => {
const loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE, ...data }; const loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE, ...data };
gl.mrWidgetData.loadPerformance = loadPerformance; gl.mrWidgetData.loadPerformance = loadPerformance;
vm.mr.loadPerformance = loadPerformance; wrapper.vm.mr.loadPerformance = loadPerformance;
}; };
const VULNERABILITY_FEEDBACK_ENDPOINT = 'vulnerability_feedback_path'; const VULNERABILITY_FEEDBACK_ENDPOINT = 'vulnerability_feedback_path';
...@@ -121,14 +123,14 @@ describe('ee merge request widget options', () => { ...@@ -121,14 +123,14 @@ describe('ee merge request widget options', () => {
mock.onGet(SAST_DIFF_ENDPOINT).reply(200, sastDiffSuccessMock); mock.onGet(SAST_DIFF_ENDPOINT).reply(200, sastDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
vm.loading = false; wrapper.vm.loading = false;
}); });
it('should render loading indicator', () => { it('should render loading indicator', () => {
expect( expect(findExtendedSecurityWidget().find(SAST_SELECTOR).text()).toContain(
findExtendedSecurityWidget().querySelector(SAST_SELECTOR).textContent.trim(), 'SAST is loading',
).toContain('SAST is loading'); );
}); });
}); });
...@@ -136,16 +138,16 @@ describe('ee merge request widget options', () => { ...@@ -136,16 +138,16 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(SAST_DIFF_ENDPOINT).reply(200, sastDiffSuccessMock); mock.onGet(SAST_DIFF_ENDPOINT).reply(200, sastDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${SAST_SELECTOR} .report-block-list-issue-description`, .find(`${SAST_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual('SAST detected 1 potential vulnerability 1 Critical 0 High and 0 Others'); ).toEqual('SAST detected 1 potential vulnerability 1 Critical 0 High and 0 Others');
done(); done();
...@@ -158,17 +160,17 @@ describe('ee merge request widget options', () => { ...@@ -158,17 +160,17 @@ describe('ee merge request widget options', () => {
mock.onGet(SAST_DIFF_ENDPOINT).reply(200, { added: [], existing: [] }); mock.onGet(SAST_DIFF_ENDPOINT).reply(200, { added: [], existing: [] });
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${SAST_SELECTOR} .report-block-list-issue-description`, .find(`${SAST_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
).trim(), ),
).toEqual('SAST detected no vulnerabilities.'); ).toEqual('SAST detected no vulnerabilities.');
done(); done();
}); });
...@@ -180,14 +182,14 @@ describe('ee merge request widget options', () => { ...@@ -180,14 +182,14 @@ describe('ee merge request widget options', () => {
mock.onGet(SAST_DIFF_ENDPOINT).reply(500, {}); mock.onGet(SAST_DIFF_ENDPOINT).reply(500, {});
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(trimText(findExtendedSecurityWidget().find(SAST_SELECTOR).text())).toContain(
trimText(findExtendedSecurityWidget().querySelector(SAST_SELECTOR).textContent), 'SAST: Loading resulted in an error',
).toContain('SAST: Loading resulted in an error'); );
done(); done();
}); });
}); });
...@@ -214,14 +216,12 @@ describe('ee merge request widget options', () => { ...@@ -214,14 +216,12 @@ describe('ee merge request widget options', () => {
mock.onGet(DEPENDENCY_SCANNING_ENDPOINT).reply(200, dependencyScanningDiffSuccessMock); mock.onGet(DEPENDENCY_SCANNING_ENDPOINT).reply(200, dependencyScanningDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render loading indicator', () => { it('should render loading indicator', () => {
expect( expect(
trimText( trimText(findExtendedSecurityWidget().find(DEPENDENCY_SCANNING_SELECTOR).text()),
findExtendedSecurityWidget().querySelector(DEPENDENCY_SCANNING_SELECTOR).textContent,
),
).toContain('Dependency scanning is loading'); ).toContain('Dependency scanning is loading');
}); });
}); });
...@@ -231,16 +231,16 @@ describe('ee merge request widget options', () => { ...@@ -231,16 +231,16 @@ describe('ee merge request widget options', () => {
mock.onGet(DEPENDENCY_SCANNING_ENDPOINT).reply(200, dependencyScanningDiffSuccessMock); mock.onGet(DEPENDENCY_SCANNING_ENDPOINT).reply(200, dependencyScanningDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${DEPENDENCY_SCANNING_SELECTOR} .report-block-list-issue-description`, .find(`${DEPENDENCY_SCANNING_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual( ).toEqual(
'Dependency scanning detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others', 'Dependency scanning detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others',
...@@ -259,16 +259,16 @@ describe('ee merge request widget options', () => { ...@@ -259,16 +259,16 @@ describe('ee merge request widget options', () => {
}); });
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('renders no vulnerabilities message', (done) => { it('renders no vulnerabilities message', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${DEPENDENCY_SCANNING_SELECTOR} .report-block-list-issue-description`, .find(`${DEPENDENCY_SCANNING_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual('Dependency scanning detected no vulnerabilities.'); ).toEqual('Dependency scanning detected no vulnerabilities.');
done(); done();
...@@ -281,16 +281,16 @@ describe('ee merge request widget options', () => { ...@@ -281,16 +281,16 @@ describe('ee merge request widget options', () => {
mock.onGet(DEPENDENCY_SCANNING_ENDPOINT).reply(200, { added: [], fixed: [], existing: [] }); mock.onGet(DEPENDENCY_SCANNING_ENDPOINT).reply(200, { added: [], fixed: [], existing: [] });
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${DEPENDENCY_SCANNING_SELECTOR} .report-block-list-issue-description`, .find(`${DEPENDENCY_SCANNING_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual('Dependency scanning detected no vulnerabilities.'); ).toEqual('Dependency scanning detected no vulnerabilities.');
done(); done();
...@@ -302,15 +302,13 @@ describe('ee merge request widget options', () => { ...@@ -302,15 +302,13 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onAny().reply(500); mock.onAny().reply(500);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(findExtendedSecurityWidget().find(DEPENDENCY_SCANNING_SELECTOR).text()),
findExtendedSecurityWidget().querySelector(DEPENDENCY_SCANNING_SELECTOR).textContent,
),
).toContain('Dependency scanning: Loading resulted in an error'); ).toContain('Dependency scanning: Loading resulted in an error');
done(); done();
}); });
...@@ -330,12 +328,12 @@ describe('ee merge request widget options', () => { ...@@ -330,12 +328,12 @@ describe('ee merge request widget options', () => {
it('should render loading indicator', (done) => { it('should render loading indicator', (done) => {
mock.onGet('head.json').reply(200, headBrowserPerformance); mock.onGet('head.json').reply(200, headBrowserPerformance);
mock.onGet('base.json').reply(200, baseBrowserPerformance); mock.onGet('base.json').reply(200, baseBrowserPerformance);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
vm.mr.browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE }; wrapper.vm.mr.browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE };
vm.$nextTick(() => { nextTick(() => {
expect(trimText(findBrowserPerformanceWidget().textContent)).toContain( expect(trimText(findBrowserPerformanceWidget().text())).toContain(
'Loading browser-performance report', 'Loading browser-performance report',
); );
...@@ -348,7 +346,7 @@ describe('ee merge request widget options', () => { ...@@ -348,7 +346,7 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(200, headBrowserPerformance); mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(200, headBrowserPerformance);
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(200, baseBrowserPerformance); mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(200, baseBrowserPerformance);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
describe('default', () => { describe('default', () => {
...@@ -359,9 +357,7 @@ describe('ee merge request widget options', () => { ...@@ -359,9 +357,7 @@ describe('ee merge request widget options', () => {
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(wrapper.find('.js-browser-performance-widget .js-code-text').text()),
vm.$el.querySelector('.js-browser-performance-widget .js-code-text').textContent,
),
).toEqual('Browser performance test metrics: 2 degraded, 1 same, 1 improved'); ).toEqual('Browser performance test metrics: 2 degraded, 1 same, 1 improved');
done(); done();
}); });
...@@ -370,15 +366,12 @@ describe('ee merge request widget options', () => { ...@@ -370,15 +366,12 @@ describe('ee merge request widget options', () => {
describe('text connector', () => { describe('text connector', () => {
it('should only render information about fixed issues', (done) => { it('should only render information about fixed issues', (done) => {
setImmediate(() => { setImmediate(() => {
vm.mr.browserPerformanceMetrics.degraded = []; wrapper.vm.mr.browserPerformanceMetrics.degraded = [];
vm.mr.browserPerformanceMetrics.same = []; wrapper.vm.mr.browserPerformanceMetrics.same = [];
Vue.nextTick(() => { nextTick(() => {
expect( expect(
trimText( trimText(wrapper.find('.js-browser-performance-widget .js-code-text').text()),
vm.$el.querySelector('.js-browser-performance-widget .js-code-text')
.textContent,
),
).toEqual('Browser performance test metrics: 1 improved'); ).toEqual('Browser performance test metrics: 1 improved');
done(); done();
}); });
...@@ -387,15 +380,12 @@ describe('ee merge request widget options', () => { ...@@ -387,15 +380,12 @@ describe('ee merge request widget options', () => {
it('should only render information about added issues', (done) => { it('should only render information about added issues', (done) => {
setImmediate(() => { setImmediate(() => {
vm.mr.browserPerformanceMetrics.improved = []; wrapper.vm.mr.browserPerformanceMetrics.improved = [];
vm.mr.browserPerformanceMetrics.same = []; wrapper.vm.mr.browserPerformanceMetrics.same = [];
Vue.nextTick(() => { nextTick(() => {
expect( expect(
trimText( trimText(wrapper.find('.js-browser-performance-widget .js-code-text').text()),
vm.$el.querySelector('.js-browser-performance-widget .js-code-text')
.textContent,
),
).toEqual('Browser performance test metrics: 2 degraded'); ).toEqual('Browser performance test metrics: 2 degraded');
done(); done();
}); });
...@@ -419,11 +409,11 @@ describe('ee merge request widget options', () => { ...@@ -419,11 +409,11 @@ describe('ee merge request widget options', () => {
if (shouldExist) { if (shouldExist) {
it('should render widget when total score degradation is above threshold', () => { it('should render widget when total score degradation is above threshold', () => {
expect(findBrowserPerformanceWidget()).toExist(); expect(findBrowserPerformanceWidget().exists()).toBe(true);
}); });
} else { } else {
it('should not render widget when total score degradation is below threshold', () => { it('should not render widget when total score degradation is below threshold', () => {
expect(findBrowserPerformanceWidget()).not.toExist(); expect(findBrowserPerformanceWidget().exists()).toBe(false);
}); });
} }
}, },
...@@ -434,10 +424,10 @@ describe('ee merge request widget options', () => { ...@@ -434,10 +424,10 @@ describe('ee merge request widget options', () => {
beforeEach((done) => { beforeEach((done) => {
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(200, []); mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(200, []);
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(200, []); mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
gl.mrWidgetData.browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE }; gl.mrWidgetData.browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE };
vm.mr.browserPerformance = gl.mrWidgetData.browserPerformance; wrapper.vm.mr.browserPerformance = gl.mrWidgetData.browserPerformance;
// wait for network request from component watch update method // wait for network request from component watch update method
setImmediate(done); setImmediate(done);
...@@ -445,24 +435,20 @@ describe('ee merge request widget options', () => { ...@@ -445,24 +435,20 @@ describe('ee merge request widget options', () => {
it('should render provided data', () => { it('should render provided data', () => {
expect( expect(
trimText( trimText(wrapper.find('.js-browser-performance-widget .js-code-text').text()),
vm.$el.querySelector('.js-browser-performance-widget .js-code-text').textContent,
),
).toEqual('Browser performance test metrics: No changes'); ).toEqual('Browser performance test metrics: No changes');
}); });
it('does not show Expand button', () => { it('does not show Expand button', () => {
const expandButton = vm.$el.querySelector( const expandButton = wrapper.find('.js-browser-performance-widget .js-collapse-btn');
'.js-browser-performance-widget .js-collapse-btn',
);
expect(expandButton).toBeNull(); expect(expandButton.exists()).toBe(false);
}); });
it('shows success icon', () => { it('shows success icon', () => {
expect( expect(
vm.$el.querySelector('.js-browser-performance-widget .js-ci-status-icon-success'), wrapper.find('.js-browser-performance-widget .js-ci-status-icon-success').exists(),
).not.toBeNull(); ).toBe(true);
}); });
}); });
...@@ -470,18 +456,16 @@ describe('ee merge request widget options', () => { ...@@ -470,18 +456,16 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(500, []); mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(500, []);
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(500, []); mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(500, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
gl.mrWidgetData.browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE }; gl.mrWidgetData.browserPerformance = { ...DEFAULT_BROWSER_PERFORMANCE };
vm.mr.browserPerformance = gl.mrWidgetData.browserPerformance; wrapper.vm.mr.browserPerformance = gl.mrWidgetData.browserPerformance;
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(wrapper.find('.js-browser-performance-widget .js-code-text').text()),
vm.$el.querySelector('.js-browser-performance-widget .js-code-text').textContent,
),
).toContain('Failed to load browser-performance report'); ).toContain('Failed to load browser-performance report');
done(); done();
}); });
...@@ -501,12 +485,12 @@ describe('ee merge request widget options', () => { ...@@ -501,12 +485,12 @@ describe('ee merge request widget options', () => {
it('should render loading indicator', (done) => { it('should render loading indicator', (done) => {
mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, headLoadPerformance); mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, headLoadPerformance);
mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, baseLoadPerformance); mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, baseLoadPerformance);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
vm.mr.loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE }; wrapper.vm.mr.loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE };
vm.$nextTick(() => { nextTick(() => {
expect(trimText(findLoadPerformanceWidget().textContent)).toContain( expect(trimText(findLoadPerformanceWidget().text())).toContain(
'Loading load-performance report', 'Loading load-performance report',
); );
...@@ -519,7 +503,7 @@ describe('ee merge request widget options', () => { ...@@ -519,7 +503,7 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, headLoadPerformance); mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, headLoadPerformance);
mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, baseLoadPerformance); mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, baseLoadPerformance);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
describe('default', () => { describe('default', () => {
...@@ -531,35 +515,31 @@ describe('ee merge request widget options', () => { ...@@ -531,35 +515,31 @@ describe('ee merge request widget options', () => {
}); });
it('should render provided data', () => { it('should render provided data', () => {
expect( expect(trimText(wrapper.find('.js-load-performance-widget .js-code-text').text())).toBe(
trimText(vm.$el.querySelector('.js-load-performance-widget .js-code-text').textContent), 'Load performance test metrics: 1 degraded, 1 same, 2 improved',
).toBe('Load performance test metrics: 1 degraded, 1 same, 2 improved'); );
}); });
describe('text connector', () => { describe('text connector', () => {
it('should only render information about fixed issues', (done) => { it('should only render information about fixed issues', (done) => {
vm.mr.loadPerformanceMetrics.degraded = []; wrapper.vm.mr.loadPerformanceMetrics.degraded = [];
vm.mr.loadPerformanceMetrics.same = []; wrapper.vm.mr.loadPerformanceMetrics.same = [];
Vue.nextTick(() => { nextTick(() => {
expect( expect(
trimText( trimText(wrapper.find('.js-load-performance-widget .js-code-text').text()),
vm.$el.querySelector('.js-load-performance-widget .js-code-text').textContent,
),
).toBe('Load performance test metrics: 2 improved'); ).toBe('Load performance test metrics: 2 improved');
done(); done();
}); });
}); });
it('should only render information about added issues', (done) => { it('should only render information about added issues', (done) => {
vm.mr.loadPerformanceMetrics.improved = []; wrapper.vm.mr.loadPerformanceMetrics.improved = [];
vm.mr.loadPerformanceMetrics.same = []; wrapper.vm.mr.loadPerformanceMetrics.same = [];
Vue.nextTick(() => { nextTick(() => {
expect( expect(
trimText( trimText(wrapper.find('.js-load-performance-widget .js-code-text').text()),
vm.$el.querySelector('.js-load-performance-widget .js-code-text').textContent,
),
).toBe('Load performance test metrics: 1 degraded'); ).toBe('Load performance test metrics: 1 degraded');
done(); done();
}); });
...@@ -572,31 +552,31 @@ describe('ee merge request widget options', () => { ...@@ -572,31 +552,31 @@ describe('ee merge request widget options', () => {
beforeEach((done) => { beforeEach((done) => {
mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, {}); mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, {});
mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, {}); mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, {});
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
gl.mrWidgetData.loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE }; gl.mrWidgetData.loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE };
vm.mr.loadPerformance = gl.mrWidgetData.loadPerformance; wrapper.vm.mr.loadPerformance = gl.mrWidgetData.loadPerformance;
// wait for network request from component watch update method // wait for network request from component watch update method
setImmediate(done); setImmediate(done);
}); });
it('should render provided data', () => { it('should render provided data', () => {
expect( expect(trimText(wrapper.find('.js-load-performance-widget .js-code-text').text())).toBe(
trimText(vm.$el.querySelector('.js-load-performance-widget .js-code-text').textContent), 'Load performance test metrics: No changes',
).toBe('Load performance test metrics: No changes'); );
}); });
it('does not show Expand button', () => { it('does not show Expand button', () => {
const expandButton = vm.$el.querySelector('.js-load-performance-widget .js-collapse-btn'); const expandButton = wrapper.find('.js-load-performance-widget .js-collapse-btn');
expect(expandButton).toBeNull(); expect(expandButton.exists()).toBe(false);
}); });
it('shows success icon', () => { it('shows success icon', () => {
expect( expect(
vm.$el.querySelector('.js-load-performance-widget .js-ci-status-icon-success'), wrapper.find('.js-load-performance-widget .js-ci-status-icon-success').exists(),
).not.toBeNull(); ).toBe(true);
}); });
}); });
...@@ -604,16 +584,16 @@ describe('ee merge request widget options', () => { ...@@ -604,16 +584,16 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(500, []); mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(500, []);
mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(500, []); mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(500, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
gl.mrWidgetData.loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE }; gl.mrWidgetData.loadPerformance = { ...DEFAULT_LOAD_PERFORMANCE };
vm.mr.loadPerformance = gl.mrWidgetData.loadPerformance; wrapper.vm.mr.loadPerformance = gl.mrWidgetData.loadPerformance;
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText(vm.$el.querySelector('.js-load-performance-widget .js-code-text').textContent), trimText(wrapper.find('.js-load-performance-widget .js-code-text').text()),
).toContain('Failed to load load-performance report'); ).toContain('Failed to load load-performance report');
done(); done();
}); });
...@@ -641,14 +621,12 @@ describe('ee merge request widget options', () => { ...@@ -641,14 +621,12 @@ describe('ee merge request widget options', () => {
mock.onGet(CONTAINER_SCANNING_ENDPOINT).reply(200, containerScanningDiffSuccessMock); mock.onGet(CONTAINER_SCANNING_ENDPOINT).reply(200, containerScanningDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render loading indicator', () => { it('should render loading indicator', () => {
expect( expect(
trimText( trimText(findExtendedSecurityWidget().find(CONTAINER_SCANNING_SELECTOR).text()),
findExtendedSecurityWidget().querySelector(CONTAINER_SCANNING_SELECTOR).textContent,
),
).toContain('Container scanning is loading'); ).toContain('Container scanning is loading');
}); });
}); });
...@@ -658,16 +636,16 @@ describe('ee merge request widget options', () => { ...@@ -658,16 +636,16 @@ describe('ee merge request widget options', () => {
mock.onGet(CONTAINER_SCANNING_ENDPOINT).reply(200, containerScanningDiffSuccessMock); mock.onGet(CONTAINER_SCANNING_ENDPOINT).reply(200, containerScanningDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${CONTAINER_SCANNING_SELECTOR} .report-block-list-issue-description`, .find(`${CONTAINER_SCANNING_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual( ).toEqual(
'Container scanning detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others', 'Container scanning detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others',
...@@ -682,16 +660,14 @@ describe('ee merge request widget options', () => { ...@@ -682,16 +660,14 @@ describe('ee merge request widget options', () => {
mock.onGet(CONTAINER_SCANNING_ENDPOINT).reply(500, {}); mock.onGet(CONTAINER_SCANNING_ENDPOINT).reply(500, {});
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(findExtendedSecurityWidget().find(CONTAINER_SCANNING_SELECTOR).text()).toContain(
findExtendedSecurityWidget() 'Container scanning: Loading resulted in an error',
.querySelector(CONTAINER_SCANNING_SELECTOR) );
.textContent.trim(),
).toContain('Container scanning: Loading resulted in an error');
done(); done();
}); });
}); });
...@@ -718,13 +694,13 @@ describe('ee merge request widget options', () => { ...@@ -718,13 +694,13 @@ describe('ee merge request widget options', () => {
mock.onGet(DAST_ENDPOINT).reply(200, dastDiffSuccessMock); mock.onGet(DAST_ENDPOINT).reply(200, dastDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render loading indicator', () => { it('should render loading indicator', () => {
expect( expect(findExtendedSecurityWidget().find(DAST_SELECTOR).text()).toContain(
findExtendedSecurityWidget().querySelector(DAST_SELECTOR).textContent.trim(), 'DAST is loading',
).toContain('DAST is loading'); );
}); });
}); });
...@@ -733,16 +709,16 @@ describe('ee merge request widget options', () => { ...@@ -733,16 +709,16 @@ describe('ee merge request widget options', () => {
mock.onGet(DAST_ENDPOINT).reply(200, dastDiffSuccessMock); mock.onGet(DAST_ENDPOINT).reply(200, dastDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${DAST_SELECTOR} .report-block-list-issue-description`, .find(`${DAST_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual('DAST detected 1 potential vulnerability 1 Critical 0 High and 0 Others'); ).toEqual('DAST detected 1 potential vulnerability 1 Critical 0 High and 0 Others');
done(); done();
...@@ -755,14 +731,14 @@ describe('ee merge request widget options', () => { ...@@ -755,14 +731,14 @@ describe('ee merge request widget options', () => {
mock.onGet(DAST_ENDPOINT).reply(500, {}); mock.onGet(DAST_ENDPOINT).reply(500, {});
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, {}); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, {});
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(findExtendedSecurityWidget().find(DAST_SELECTOR).text()).toContain(
findExtendedSecurityWidget().querySelector(DAST_SELECTOR).textContent.trim(), 'DAST: Loading resulted in an error',
).toContain('DAST: Loading resulted in an error'); );
done(); done();
}); });
}); });
...@@ -772,13 +748,14 @@ describe('ee merge request widget options', () => { ...@@ -772,13 +748,14 @@ describe('ee merge request widget options', () => {
describe('Coverage Fuzzing', () => { describe('Coverage Fuzzing', () => {
const COVERAGE_FUZZING_ENDPOINT = 'coverage_fuzzing_report'; const COVERAGE_FUZZING_ENDPOINT = 'coverage_fuzzing_report';
const mountWithFeatureFlag = () => const createComponentWithFeatureFlag = () => {
new Component({ createComponent({
propsData: { mrData: gl.mrWidgetData }, propsData: { mrData: gl.mrWidgetData },
provide: { provide: {
glFeatures: { coverageFuzzingMrWidget: true }, glFeatures: { coverageFuzzingMrWidget: true },
}, },
}).$mount(); });
};
beforeEach(() => { beforeEach(() => {
gl.mrWidgetData = { gl.mrWidgetData = {
...@@ -795,11 +772,11 @@ describe('ee merge request widget options', () => { ...@@ -795,11 +772,11 @@ describe('ee merge request widget options', () => {
it('should render loading indicator', () => { it('should render loading indicator', () => {
mock.onGet(COVERAGE_FUZZING_ENDPOINT).reply(200, coverageFuzzingDiffSuccessMock); mock.onGet(COVERAGE_FUZZING_ENDPOINT).reply(200, coverageFuzzingDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountWithFeatureFlag(); createComponentWithFeatureFlag();
expect( expect(findExtendedSecurityWidget().find(COVERAGE_FUZZING_SELECTOR).text()).toContain(
findExtendedSecurityWidget().querySelector(COVERAGE_FUZZING_SELECTOR).textContent.trim(), 'Coverage fuzzing is loading',
).toContain('Coverage fuzzing is loading'); );
}); });
}); });
...@@ -807,16 +784,16 @@ describe('ee merge request widget options', () => { ...@@ -807,16 +784,16 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(COVERAGE_FUZZING_ENDPOINT).reply(200, coverageFuzzingDiffSuccessMock); mock.onGet(COVERAGE_FUZZING_ENDPOINT).reply(200, coverageFuzzingDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountWithFeatureFlag(); createComponentWithFeatureFlag();
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${COVERAGE_FUZZING_SELECTOR} .report-block-list-issue-description`, .find(`${COVERAGE_FUZZING_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual( ).toEqual(
'Coverage fuzzing detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others', 'Coverage fuzzing detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others',
...@@ -830,16 +807,14 @@ describe('ee merge request widget options', () => { ...@@ -830,16 +807,14 @@ describe('ee merge request widget options', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(COVERAGE_FUZZING_ENDPOINT).reply(500, {}); mock.onGet(COVERAGE_FUZZING_ENDPOINT).reply(500, {});
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, {}); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, {});
vm = mountWithFeatureFlag(); createComponentWithFeatureFlag();
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(findExtendedSecurityWidget().find(COVERAGE_FUZZING_SELECTOR).text()).toContain(
findExtendedSecurityWidget() 'Coverage fuzzing: Loading resulted in an error',
.querySelector(COVERAGE_FUZZING_SELECTOR) );
.textContent.trim(),
).toContain('Coverage fuzzing: Loading resulted in an error');
done(); done();
}); });
}); });
...@@ -869,12 +844,10 @@ describe('ee merge request widget options', () => { ...@@ -869,12 +844,10 @@ describe('ee merge request widget options', () => {
mock.onGet(SECRET_SCANNING_ENDPOINT).reply(200, secretScanningDiffSuccessMock); mock.onGet(SECRET_SCANNING_ENDPOINT).reply(200, secretScanningDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
expect( expect(
trimText( trimText(findExtendedSecurityWidget().find(SECRET_SCANNING_SELECTOR).text()),
findExtendedSecurityWidget().querySelector(SECRET_SCANNING_SELECTOR).textContent,
),
).toContain('Secret scanning is loading'); ).toContain('Secret scanning is loading');
}); });
}); });
...@@ -884,16 +857,16 @@ describe('ee merge request widget options', () => { ...@@ -884,16 +857,16 @@ describe('ee merge request widget options', () => {
mock.onGet(SECRET_SCANNING_ENDPOINT).reply(200, secretScanningDiffSuccessMock); mock.onGet(SECRET_SCANNING_ENDPOINT).reply(200, secretScanningDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${SECRET_SCANNING_SELECTOR} .report-block-list-issue-description`, .find(`${SECRET_SCANNING_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual( ).toEqual(
'Secret scanning detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others', 'Secret scanning detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others',
...@@ -908,14 +881,14 @@ describe('ee merge request widget options', () => { ...@@ -908,14 +881,14 @@ describe('ee merge request widget options', () => {
mock.onGet(SECRET_SCANNING_ENDPOINT).reply(500, {}); mock.onGet(SECRET_SCANNING_ENDPOINT).reply(500, {});
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(findExtendedSecurityWidget().find(SECRET_SCANNING_SELECTOR).text()).toContain(
findExtendedSecurityWidget().querySelector(SECRET_SCANNING_SELECTOR).textContent.trim(), 'Secret scanning: Loading resulted in an error',
).toContain('Secret scanning: Loading resulted in an error'); );
done(); done();
}); });
}); });
...@@ -942,11 +915,11 @@ describe('ee merge request widget options', () => { ...@@ -942,11 +915,11 @@ describe('ee merge request widget options', () => {
mock.onGet(API_FUZZING_ENDPOINT).reply(200, apiFuzzingDiffSuccessMock); mock.onGet(API_FUZZING_ENDPOINT).reply(200, apiFuzzingDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
expect( expect(trimText(findExtendedSecurityWidget().find(API_FUZZING_SELECTOR).text())).toContain(
trimText(findExtendedSecurityWidget().querySelector(API_FUZZING_SELECTOR).textContent), 'API fuzzing is loading',
).toContain('API fuzzing is loading'); );
}); });
}); });
...@@ -955,16 +928,16 @@ describe('ee merge request widget options', () => { ...@@ -955,16 +928,16 @@ describe('ee merge request widget options', () => {
mock.onGet(API_FUZZING_ENDPOINT).reply(200, apiFuzzingDiffSuccessMock); mock.onGet(API_FUZZING_ENDPOINT).reply(200, apiFuzzingDiffSuccessMock);
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(200, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render provided data', (done) => { it('should render provided data', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(
trimText( trimText(
findExtendedSecurityWidget().querySelector( findExtendedSecurityWidget()
`${API_FUZZING_SELECTOR} .report-block-list-issue-description`, .find(`${API_FUZZING_SELECTOR} .report-block-list-issue-description`)
).textContent, .text(),
), ),
).toEqual( ).toEqual(
'API fuzzing detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others', 'API fuzzing detected 2 potential vulnerabilities 1 Critical 1 High and 0 Others',
...@@ -979,14 +952,14 @@ describe('ee merge request widget options', () => { ...@@ -979,14 +952,14 @@ describe('ee merge request widget options', () => {
mock.onGet(API_FUZZING_ENDPOINT).reply(500, {}); mock.onGet(API_FUZZING_ENDPOINT).reply(500, {});
mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []); mock.onGet(VULNERABILITY_FEEDBACK_ENDPOINT).reply(500, []);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('should render error indicator', (done) => { it('should render error indicator', (done) => {
setImmediate(() => { setImmediate(() => {
expect( expect(findExtendedSecurityWidget().find(API_FUZZING_SELECTOR).text()).toContain(
findExtendedSecurityWidget().querySelector(API_FUZZING_SELECTOR).textContent.trim(), 'API fuzzing: Loading resulted in an error',
).toContain('API fuzzing: Loading resulted in an error'); );
done(); done();
}); });
}); });
...@@ -1008,9 +981,9 @@ describe('ee merge request widget options', () => { ...@@ -1008,9 +981,9 @@ describe('ee merge request widget options', () => {
}, },
}; };
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
expect(vm.$el.querySelector('.license-report-widget')).not.toBeNull(); expect(wrapper.find('.license-report-widget').exists()).toBe(true);
}); });
it('should not be rendered if license scanning data is not set', () => { it('should not be rendered if license scanning data is not set', () => {
...@@ -1019,9 +992,9 @@ describe('ee merge request widget options', () => { ...@@ -1019,9 +992,9 @@ describe('ee merge request widget options', () => {
license_scanning: {}, license_scanning: {},
}; };
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
expect(vm.$el.querySelector('.license-report-widget')).toBeNull(); expect(wrapper.find('.license-report-widget').exists()).toBe(false);
}); });
}); });
...@@ -1045,13 +1018,13 @@ describe('ee merge request widget options', () => { ...@@ -1045,13 +1018,13 @@ describe('ee merge request widget options', () => {
gon.features = { coreSecurityMrWidget: featureFlag }; gon.features = { coreSecurityMrWidget: featureFlag };
mock.onGet(PIPELINE_JOBS_ENDPOINT).replyOnce(200, pipelineJobs); mock.onGet(PIPELINE_JOBS_ENDPOINT).replyOnce(200, pipelineJobs);
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
return waitForPromises(); return waitForPromises();
}); });
it(`${shouldRender ? 'renders' : 'does not render'} the CE security report`, () => { it(`${shouldRender ? 'renders' : 'does not render'} the CE security report`, () => {
expect(findBaseSecurityWidget()).toEqual(shouldRender ? expect.any(HTMLElement) : null); expect(findBaseSecurityWidget().exists()).toBe(shouldRender);
}); });
}); });
}); });
...@@ -1059,50 +1032,56 @@ describe('ee merge request widget options', () => { ...@@ -1059,50 +1032,56 @@ describe('ee merge request widget options', () => {
describe('computed', () => { describe('computed', () => {
describe('shouldRenderApprovals', () => { describe('shouldRenderApprovals', () => {
it('should return false when in empty state', () => { it('should return false when in empty state', () => {
vm = mountComponent(Component, { createComponent({
propsData: {
mrData: { mrData: {
...mockData, ...mockData,
has_approvals_available: true, has_approvals_available: true,
}, },
},
}); });
vm.mr.state = 'nothingToMerge'; wrapper.vm.mr.state = 'nothingToMerge';
expect(vm.shouldRenderApprovals).toBeFalsy(); expect(wrapper.vm.shouldRenderApprovals).toBeFalsy();
}); });
it('should return true when requiring approvals and in non-empty state', () => { it('should return true when requiring approvals and in non-empty state', () => {
vm = mountComponent(Component, { createComponent({
propsData: {
mrData: { mrData: {
...mockData, ...mockData,
has_approvals_available: true, has_approvals_available: true,
}, },
},
}); });
vm.mr.state = 'readyToMerge'; wrapper.vm.mr.state = 'readyToMerge';
expect(vm.shouldRenderApprovals).toBeTruthy(); expect(wrapper.vm.shouldRenderApprovals).toBeTruthy();
}); });
}); });
}); });
describe('rendering source branch removal status', () => { describe('rendering source branch removal status', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(Component, { createComponent({
propsData: {
mrData: { mrData: {
...mockData, ...mockData,
}, },
},
}); });
}); });
it('renders when user cannot remove branch and branch should be removed', (done) => { it('renders when user cannot remove branch and branch should be removed', (done) => {
vm.mr.canRemoveSourceBranch = false; wrapper.vm.mr.canRemoveSourceBranch = false;
vm.mr.shouldRemoveSourceBranch = true; wrapper.vm.mr.shouldRemoveSourceBranch = true;
vm.mr.state = 'readyToMerge'; wrapper.vm.mr.state = 'readyToMerge';
vm.$nextTick(() => { nextTick(() => {
const tooltip = vm.$el.querySelector('[data-testid="question-o-icon"]'); const tooltip = wrapper.find('[data-testid="question-o-icon"]');
expect(vm.$el.textContent).toContain('Deletes source branch'); expect(wrapper.text()).toContain('Deletes source branch');
expect(tooltip.getAttribute('title')).toBe( expect(tooltip.attributes('title')).toBe(
'A user with write access to the source branch selected this option', 'A user with write access to the source branch selected this option',
); );
...@@ -1111,13 +1090,13 @@ describe('ee merge request widget options', () => { ...@@ -1111,13 +1090,13 @@ describe('ee merge request widget options', () => {
}); });
it('does not render in merged state', (done) => { it('does not render in merged state', (done) => {
vm.mr.canRemoveSourceBranch = false; wrapper.vm.mr.canRemoveSourceBranch = false;
vm.mr.shouldRemoveSourceBranch = true; wrapper.vm.mr.shouldRemoveSourceBranch = true;
vm.mr.state = 'merged'; wrapper.vm.mr.state = 'merged';
vm.$nextTick(() => { nextTick(() => {
expect(vm.$el.textContent).toContain('The source branch has been deleted'); expect(wrapper.text()).toContain('The source branch has been deleted');
expect(vm.$el.textContent).not.toContain('Removes source branch'); expect(wrapper.text()).not.toContain('Removes source branch');
done(); done();
}); });
...@@ -1140,13 +1119,15 @@ describe('ee merge request widget options', () => { ...@@ -1140,13 +1119,15 @@ describe('ee merge request widget options', () => {
}; };
beforeEach((done) => { beforeEach((done) => {
vm = mountComponent(Component, { createComponent({
propsData: {
mrData: { mrData: {
...mockData, ...mockData,
}, },
},
}); });
vm.mr.deployments.push( wrapper.vm.mr.deployments.push(
{ {
...deploymentMockData, ...deploymentMockData,
}, },
...@@ -1156,27 +1137,29 @@ describe('ee merge request widget options', () => { ...@@ -1156,27 +1137,29 @@ describe('ee merge request widget options', () => {
}, },
); );
vm.$nextTick(done); nextTick(done);
}); });
it('renders multiple deployments', () => { it('renders multiple deployments', () => {
expect(vm.$el.querySelectorAll('.deploy-heading')).toHaveLength(2); expect(wrapper.findAll('.deploy-heading')).toHaveLength(2);
}); });
}); });
describe('CI widget', () => { describe('CI widget', () => {
it('renders the branch in the pipeline widget', () => { it('renders the branch in the pipeline widget', () => {
const sourceBranchLink = '<a href="/to/the/past">Link</a>'; const sourceBranchLink = '<a href="/to/the/past">Link</a>';
vm = mountComponent(Component, { createComponent({
propsData: {
mrData: { mrData: {
...mockData, ...mockData,
source_branch_with_namespace_link: sourceBranchLink, source_branch_with_namespace_link: sourceBranchLink,
}, },
},
}); });
const ciWidget = vm.$el.querySelector('.mr-state-widget .label-branch'); const ciWidget = wrapper.find('.mr-state-widget .label-branch');
expect(ciWidget.innerHTML).toBe(sourceBranchLink); expect(ciWidget.html()).toContain(sourceBranchLink);
}); });
}); });
...@@ -1189,14 +1172,16 @@ describe('ee merge request widget options', () => { ...@@ -1189,14 +1172,16 @@ describe('ee merge request widget options', () => {
api_unapprove_path: `${TEST_HOST}/api/unapprove/path`, api_unapprove_path: `${TEST_HOST}/api/unapprove/path`,
}; };
vm = mountComponent(Component, { createComponent({
propsData: {
mrData: { mrData: {
...mockData, ...mockData,
...paths, ...paths,
}, },
},
}); });
expect(vm.service).toMatchObject(convertObjectPropsToCamelCase(paths)); expect(wrapper.vm.service).toMatchObject(convertObjectPropsToCamelCase(paths));
}); });
}); });
...@@ -1230,9 +1215,9 @@ describe('ee merge request widget options', () => { ...@@ -1230,9 +1215,9 @@ describe('ee merge request widget options', () => {
}; };
} }
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
expect(findExtendedSecurityWidget()).toBe(null); expect(findExtendedSecurityWidget().exists()).toBe(false);
}); });
}); });
}); });
...@@ -1247,11 +1232,11 @@ describe('ee merge request widget options', () => { ...@@ -1247,11 +1232,11 @@ describe('ee merge request widget options', () => {
}, },
}; };
vm = mountComponent(Component, { mrData: gl.mrWidgetData }); createComponent({ propsData: { mrData: gl.mrWidgetData } });
}); });
it('does not render the EE security report', () => { it('does not render the EE security report', () => {
expect(findExtendedSecurityWidget()).toBe(null); expect(findExtendedSecurityWidget().exists()).toBe(false);
}); });
}); });
}); });
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