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