Skip to content

G
gitlab-ce
Commit 88a4f6a4 authored by Frédéric Caplette's avatar Frédéric Caplette Committed by Phil Hughes
Browse files
Options

Migrate pipelines/graph component specs to jest 

The pipeline graph components and the mock data
have been moved to frontend folder
and rewrote the tests with jest
parent 20d1bda1
Show whitespace changes
Inline Side-by-side
Showing with 4273 additions and 389 deletions
spec/frontend/pipelines/graph/action_component_spec.js
View file @ 88a4f6a4
......@@ -7,6 +7,7 @@ import ActionComponent from '~/pipelines/components/graph/action_component.vue';
describe('pipeline graph action component', () => {
let wrapper;
let mock;
const findButton = () => wrapper.find('button');
beforeEach(() => {
mock = new MockAdapter(axios);
......@@ -44,15 +45,15 @@ describe('pipeline graph action component', () => {
});
it('should render an svg', () => {
expect(wrapper.find('.ci-action-icon-wrapper')).toBeDefined();
expect(wrapper.find('svg')).toBeDefined();
expect(wrapper.find('.ci-action-icon-wrapper').exists()).toBe(true);
expect(wrapper.find('svg').exists()).toBe(true);
});
describe('on click', () => {
it('emits `pipelineActionRequestComplete` after a successful request', done => {
jest.spyOn(wrapper.vm, '$emit');
wrapper.find('button').trigger('click');
findButton().trigger('click');
waitForPromises()
.then(() => {
......@@ -63,7 +64,7 @@ describe('pipeline graph action component', () => {
});
it('renders a loading icon while waiting for request', done => {
wrapper.find('button').trigger('click');
findButton().trigger('click');
wrapper.vm.$nextTick(() => {
expect(wrapper.find('.js-action-icon-loading').exists()).toBe(true);
......
spec/javascripts/pipelines/graph/graph_component_spec.js → spec/frontend/pipelines/graph/graph_component_spec.js
View file @ 88a4f6a4
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { mount } from '@vue/test-utils';
import PipelineStore from '~/pipelines/stores/pipeline_store';
import graphComponent from '~/pipelines/components/graph/graph_component.vue';
import stageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
import linkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
import graphJSON from './mock_data';
import linkedPipelineJSON from '../linked_pipelines_mock.json';
import linkedPipelineJSON from './linked_pipelines_mock_data';
import PipelinesMediator from '~/pipelines/pipeline_details_mediator';
describe('graph component', () => {
const GraphComponent = Vue.extend(graphComponent);
const store = new PipelineStore();
store.storePipeline(linkedPipelineJSON);
const mediator = new PipelinesMediator({ endpoint: '' });
let component;
beforeEach(() => {
setFixtures(`
<div class="layout-page"></div>
`);
});
let wrapper;
afterEach(() => {
component.$destroy();
wrapper.destroy();
wrapper = null;
});
describe('while is loading', () => {
it('should render a loading icon', () => {
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: true,
pipeline: {},
mediator,
},
});
expect(component.$el.querySelector('.loading-icon')).toBeDefined();
expect(wrapper.find('.gl-spinner').exists()).toBe(true);
});
});
describe('with data', () => {
it('should render the graph', () => {
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: false,
pipeline: graphJSON,
mediator,
},
});
expect(component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
expect(wrapper.find('.js-pipeline-graph').exists()).toBe(true);
expect(
component.$el.querySelector('.stage-column:first-child').classList.contains('no-margin'),
).toEqual(true);
expect(
component.$el.querySelector('.stage-column:nth-child(2)').classList.contains('left-margin'),
).toEqual(true);
expect(wrapper.find(stageColumnComponent).classes()).toContain('no-margin');
expect(
component.$el
.querySelector('.stage-column:nth-child(2) .build:nth-child(1)')
.classList.contains('left-connector'),
).toEqual(true);
wrapper
.findAll(stageColumnComponent)
.at(1)
.classes(),
).toContain('left-margin');
expect(wrapper.find('.stage-column:nth-child(2) .build:nth-child(1)').classes()).toContain(
'left-connector',
);
expect(component.$el.querySelector('loading-icon')).toBe(null);
expect(wrapper.find('.loading-icon').exists()).toBe(false);
expect(component.$el.querySelector('.stage-column-list')).toBeDefined();
expect(wrapper.find('.stage-column-list').exists()).toBe(true);
});
});
describe('when linked pipelines are present', () => {
beforeEach(() => {
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: false,
pipeline: store.state.pipeline,
mediator,
},
});
});
describe('rendered output', () => {
it('should include the pipelines graph', () => {
expect(component.$el.classList.contains('js-pipeline-graph')).toEqual(true);
expect(wrapper.find('.js-pipeline-graph').exists()).toBe(true);
});
it('should not include the loading icon', () => {
expect(component.$el.querySelector('.fa-spinner')).toBeNull();
expect(wrapper.find('.fa-spinner').exists()).toBe(false);
});
it('should include the stage column list', () => {
expect(component.$el.querySelector('.stage-column-list')).not.toBeNull();
expect(wrapper.find(stageColumnComponent).exists()).toBe(true);
});
it('should include the no-margin class on the first child', () => {
const firstStageColumnElement = component.$el.querySelector(
'.stage-column-list .stage-column',
);
it('should include the no-margin class on the first child if there is only one job', () => {
const firstStageColumnElement = wrapper.find(stageColumnComponent);
expect(firstStageColumnElement.classList.contains('no-margin')).toEqual(true);
expect(firstStageColumnElement.classes()).toContain('no-margin');
});
it('should include the has-only-one-job class on the first child', () => {
const firstStageColumnElement = component.$el.querySelector(
'.stage-column-list .stage-column',
);
const firstStageColumnElement = wrapper.find('.stage-column-list .stage-column');
expect(firstStageColumnElement.classList.contains('has-only-one-job')).toEqual(true);
expect(firstStageColumnElement.classes()).toContain('has-only-one-job');
});
it('should include the left-margin class on the second child', () => {
const firstStageColumnElement = component.$el.querySelector(
'.stage-column-list .stage-column:last-child',
);
const firstStageColumnElement = wrapper.find('.stage-column-list .stage-column:last-child');
expect(firstStageColumnElement.classList.contains('left-margin')).toEqual(true);
expect(firstStageColumnElement.classes()).toContain('left-margin');
});
it('should include the js-has-linked-pipelines flag', () => {
expect(component.$el.querySelector('.js-has-linked-pipelines')).not.toBeNull();
expect(wrapper.find('.js-has-linked-pipelines').exists()).toBe(true);
});
});
describe('computeds and methods', () => {
describe('capitalizeStageName', () => {
it('it capitalizes the stage name', () => {
expect(component.capitalizeStageName('mystage')).toBe('Mystage');
expect(
wrapper
.findAll('.stage-column .stage-name')
.at(1)
.text(),
).toBe('Prebuild');
});
});
describe('stageConnectorClass', () => {
it('it returns left-margin when there is a triggerer', () => {
expect(component.stageConnectorClass(0, { groups: ['job'] })).toBe('no-margin');
expect(
wrapper
.findAll(stageColumnComponent)
.at(1)
.classes(),
).toContain('left-margin');
});
});
});
describe('linked pipelines components', () => {
beforeEach(() => {
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: false,
pipeline: store.state.pipeline,
mediator,
},
});
});
it('should render an upstream pipelines column', () => {
expect(component.$el.querySelector('.linked-pipelines-column')).not.toBeNull();
expect(component.$el.innerHTML).toContain('Upstream');
it('should render an upstream pipelines column at first position', () => {
expect(wrapper.find(linkedPipelinesColumn).exists()).toBe(true);
expect(wrapper.find('.stage-column .stage-name').text()).toBe('Upstream');
});
it('should render a downstream pipelines column', () => {
expect(component.$el.querySelector('.linked-pipelines-column')).not.toBeNull();
expect(component.$el.innerHTML).toContain('Downstream');
it('should render a downstream pipelines column at last position', () => {
const stageColumnNames = wrapper.findAll('.stage-column .stage-name');
expect(wrapper.find(linkedPipelinesColumn).exists()).toBe(true);
expect(stageColumnNames.at(stageColumnNames.length - 1).text()).toBe('Downstream');
});
describe('triggered by', () => {
describe('on click', () => {
it('should emit `onClickTriggeredBy` when triggered by linked pipeline is clicked', () => {
spyOn(component, '$emit');
const btnWrapper = wrapper.find('.linked-pipeline-content');
component.$el.querySelector('#js-linked-pipeline-12').click();
btnWrapper.trigger('click');
expect(component.$emit).toHaveBeenCalledWith(
'onClickTriggeredBy',
component.pipeline.triggered_by[0],
);
btnWrapper.vm.$nextTick(() => {
expect(wrapper.emitted().onClickTriggeredBy).toEqual([
store.state.pipeline.triggered_by,
]);
});
});
});
......@@ -169,15 +179,17 @@ describe('graph component', () => {
// expand the pipeline
store.state.pipeline.triggered_by[0].isExpanded = true;
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: false,
pipeline: store.state.pipeline,
mediator,
},
});
Vue.nextTick()
.then(() => {
expect(component.$el.querySelector('.js-upstream-pipeline-12')).not.toBeNull();
expect(wrapper.find('.js-upstream-pipeline-12').exists()).toBe(true);
})
.then(done)
.catch(done.fail);
......@@ -188,15 +200,22 @@ describe('graph component', () => {
describe('triggered', () => {
describe('on click', () => {
it('should emit `onClickTriggered`', () => {
spyOn(component, '$emit');
spyOn(component, 'calculateMarginTop').and.callFake(() => '16px');
// We have to mock this method since we do both style change and
// emit and event, not mocking returns an error.
wrapper.setMethods({
handleClickedDownstream: jest.fn(() =>
wrapper.vm.$emit('onClickTriggered', ...store.state.pipeline.triggered),
),
});
component.$el.querySelector('#js-linked-pipeline-34993051').click();
const btnWrappers = wrapper.findAll('.linked-pipeline-content');
const downstreamBtnWrapper = btnWrappers.at(btnWrappers.length - 1);
expect(component.$emit).toHaveBeenCalledWith(
'onClickTriggered',
component.pipeline.triggered[0],
);
downstreamBtnWrapper.trigger('click');
downstreamBtnWrapper.vm.$nextTick(() => {
expect(wrapper.emitted().onClickTriggered).toEqual([store.state.pipeline.triggered]);
});
});
});
......@@ -205,17 +224,17 @@ describe('graph component', () => {
// expand the pipeline
store.state.pipeline.triggered[0].isExpanded = true;
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: false,
pipeline: store.state.pipeline,
mediator,
},
});
Vue.nextTick()
.then(() => {
expect(
component.$el.querySelector('.js-downstream-pipeline-34993051'),
).not.toBeNull();
expect(wrapper.find('.js-downstream-pipeline-34993051')).not.toBeNull();
})
.then(done)
.catch(done.fail);
......@@ -228,46 +247,58 @@ describe('graph component', () => {
describe('when linked pipelines are not present', () => {
beforeEach(() => {
const pipeline = Object.assign(linkedPipelineJSON, { triggered: null, triggered_by: null });
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: false,
pipeline,
mediator,
},
});
});
describe('rendered output', () => {
it('should include the first column with a no margin', () => {
const firstColumn = component.$el.querySelector('.stage-column:first-child');
const firstColumn = wrapper.find('.stage-column');
expect(firstColumn.classList.contains('no-margin')).toEqual(true);
expect(firstColumn.classes()).toContain('no-margin');
});
it('should not render a linked pipelines column', () => {
expect(component.$el.querySelector('.linked-pipelines-column')).toBeNull();
expect(wrapper.find('.linked-pipelines-column').exists()).toBe(false);
});
});
describe('stageConnectorClass', () => {
it('it returns left-margin when no triggerer and there is one job', () => {
expect(component.stageConnectorClass(0, { groups: ['job'] })).toBe('no-margin');
it('it returns no-margin when no triggerer and there is one job', () => {
expect(wrapper.find(stageColumnComponent).classes()).toContain('no-margin');
});
it('it returns left-margin when no triggerer and not the first stage', () => {
expect(component.stageConnectorClass(99, { groups: ['job'] })).toBe('left-margin');
expect(
wrapper
.findAll(stageColumnComponent)
.at(1)
.classes(),
).toContain('left-margin');
});
});
});
describe('capitalizeStageName', () => {
it('capitalizes and escapes stage name', () => {
component = mountComponent(GraphComponent, {
wrapper = mount(graphComponent, {
propsData: {
isLoading: false,
pipeline: graphJSON,
mediator,
},
});
expect(
component.$el.querySelector('.stage-column:nth-child(2) .stage-name').textContent.trim(),
wrapper
.find('.stage-column:nth-child(2) .stage-name')
.text()
.trim(),
).toEqual('Deploy &lt;img src=x onerror=alert(document.domain)&gt;');
});
});
......
spec/javascripts/pipelines/graph/job_group_dropdown_spec.js → spec/frontend/pipelines/graph/job_group_dropdown_spec.js
View file @ 88a4f6a4
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import JobGroupDropdown from '~/pipelines/components/graph/job_group_dropdown.vue';
describe('job group dropdown component', () => {
const Component = Vue.extend(JobGroupDropdown);
let vm;
const group = {
jobs: [
{
......@@ -66,20 +62,23 @@ describe('job group dropdown component', () => {
},
};
let wrapper;
const findButton = () => wrapper.find('button');
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
beforeEach(() => {
vm = mountComponent(Component, { group });
wrapper = shallowMount(JobGroupDropdown, { propsData: { group } });
});
it('renders button with group name and size', () => {
expect(vm.$el.querySelector('button').textContent).toContain(group.name);
expect(vm.$el.querySelector('button').textContent).toContain(group.size);
expect(findButton().text()).toContain(group.name);
expect(findButton().text()).toContain(group.size);
});
it('renders dropdown with jobs', () => {
expect(vm.$el.querySelectorAll('.scrollable-menu>ul>li').length).toEqual(group.jobs.length);
expect(wrapper.findAll('.scrollable-menu>ul>li').length).toBe(group.jobs.length);
});
});
spec/frontend/pipelines/graph/job_item_spec.js
View file @ 88a4f6a4
......@@ -47,7 +47,7 @@ describe('pipeline graph job item', () => {
expect(link.attributes('title')).toEqual(`${mockJob.name} - ${mockJob.status.label}`);
expect(wrapper.find('.js-status-icon-success')).toBeDefined();
expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
expect(trimText(wrapper.find('.ci-status-text').text())).toBe(mockJob.name);
......@@ -73,7 +73,7 @@ describe('pipeline graph job item', () => {
},
});
expect(wrapper.find('.js-status-icon-success')).toBeDefined();
expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
expect(wrapper.find('a').exists()).toBe(false);
expect(trimText(wrapper.find('.ci-status-text').text())).toEqual(mockJob.name);
......@@ -84,8 +84,8 @@ describe('pipeline graph job item', () => {
it('it should render the action icon', () => {
createWrapper({ job: mockJob });
expect(wrapper.find('a.ci-action-icon-container')).toBeDefined();
expect(wrapper.find('i.ci-action-icon-wrapper')).toBeDefined();
expect(wrapper.find('.ci-action-icon-container').exists()).toBe(true);
expect(wrapper.find('.ci-action-icon-wrapper').exists()).toBe(true);
});
});
......
spec/javascripts/pipelines/graph/job_name_component_spec.js → spec/frontend/pipelines/graph/job_name_component_spec.js
View file @ 88a4f6a4
import Vue from 'vue';
import { mount } from '@vue/test-utils';
import ciIcon from '~/vue_shared/components/ci_icon.vue';
import jobNameComponent from '~/pipelines/components/graph/job_name_component.vue';
describe('job name component', () => {
let component;
let wrapper;
beforeEach(() => {
const JobNameComponent = Vue.extend(jobNameComponent);
component = new JobNameComponent({
propsData: {
const propsData = {
name: 'foo',
status: {
icon: 'status_success',
group: 'success',
},
},
}).$mount();
};
beforeEach(() => {
wrapper = mount(jobNameComponent, {
propsData,
});
});
it('should render the provided name', () => {
expect(component.$el.querySelector('.ci-status-text').textContent.trim()).toEqual('foo');
expect(
wrapper
.find('.ci-status-text')
.text()
.trim(),
).toBe(propsData.name);
});
it('should render an icon with the provided status', () => {
expect(component.$el.querySelector('.ci-status-icon-success')).toBeDefined();
expect(component.$el.querySelector('.ci-status-icon-success svg')).toBeDefined();
expect(wrapper.find(ciIcon).exists()).toBe(true);
expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
});
});
spec/frontend/pipelines/graph/linked_pipeline_spec.js
View file @ 88a4f6a4
import { mount } from '@vue/test-utils';
import LinkedPipelineComponent from '~/pipelines/components/graph/linked_pipeline.vue';
import CiStatus from '~/vue_shared/components/ci_icon.vue';
import mockData from './linked_pipelines_mock_data';
const mockPipeline = mockData.triggered[0];
const validTriggeredPipelineId = mockPipeline.project.id;
const invalidTriggeredPipelineId = mockPipeline.project.id + 5;
describe('Linked pipeline', () => {
let wrapper;
const findButton = () => wrapper.find('button');
const createWrapper = propsData => {
wrapper = mount(LinkedPipelineComponent, {
......@@ -21,7 +26,7 @@ describe('Linked pipeline', () => {
describe('rendered output', () => {
const props = {
pipeline: mockPipeline,
projectId: 20,
projectId: invalidTriggeredPipelineId,
columnTitle: 'Downstream',
};
......@@ -44,14 +49,13 @@ describe('Linked pipeline', () => {
});
it('should render an svg within the status container', () => {
const pipelineStatusElement = wrapper.find('.js-linked-pipeline-status');
const pipelineStatusElement = wrapper.find(CiStatus);
expect(pipelineStatusElement.find('svg').exists()).toBe(true);
});
it('should render the pipeline status icon svg', () => {
expect(wrapper.find('.js-ci-status-icon-running').exists()).toBe(true);
expect(wrapper.find('.js-ci-status-icon-running').html()).toContain('<svg');
expect(wrapper.find('.ci-status-icon-failed svg').exists()).toBe(true);
});
it('should have a ci-status child component', () => {
......@@ -88,7 +92,7 @@ describe('Linked pipeline', () => {
describe('parent/child', () => {
const downstreamProps = {
pipeline: mockPipeline,
projectId: 19,
projectId: validTriggeredPipelineId,
columnTitle: 'Downstream',
};
......@@ -116,7 +120,7 @@ describe('Linked pipeline', () => {
describe('when isLoading is true', () => {
const props = {
pipeline: { ...mockPipeline, isLoading: true },
projectId: 19,
projectId: invalidTriggeredPipelineId,
columnTitle: 'Downstream',
};
......@@ -132,7 +136,7 @@ describe('Linked pipeline', () => {
describe('on click', () => {
const props = {
pipeline: mockPipeline,
projectId: 19,
projectId: validTriggeredPipelineId,
columnTitle: 'Downstream',
};
......@@ -142,18 +146,18 @@ describe('Linked pipeline', () => {
it('emits `pipelineClicked` event', () => {
jest.spyOn(wrapper.vm, '$emit');
wrapper.find('button').trigger('click');
findButton().trigger('click');
expect(wrapper.emitted().pipelineClicked).toBeTruthy();
});
it('should emit `bv::hide::tooltip` to close the tooltip', () => {
jest.spyOn(wrapper.vm.$root, '$emit');
wrapper.find('button').trigger('click');
findButton().trigger('click');
expect(wrapper.vm.$root.$emit.mock.calls[0]).toEqual([
'bv::hide::tooltip',
'js-linked-pipeline-132',
'js-linked-pipeline-34993051',
]);
});
});
......
spec/javascripts/pipelines/graph/linked_pipelines_column_spec.js → spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
View file @ 88a4f6a4
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue';
import mockData from './linked_pipelines_mock_data';
describe('Linked Pipelines Column', () => {
const Component = Vue.extend(LinkedPipelinesColumn);
const props = {
const propsData = {
columnTitle: 'Upstream',
linkedPipelines: mockData.triggered,
graphPosition: 'right',
projectId: 19,
};
let vm;
let wrapper;
beforeEach(() => {
vm = mountComponent(Component, props);
wrapper = shallowMount(LinkedPipelinesColumn, { propsData });
});
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
it('renders the pipeline orientation', () => {
const titleElement = vm.$el.querySelector('.linked-pipelines-column-title');
const titleElement = wrapper.find('.linked-pipelines-column-title');
expect(titleElement.innerText).toContain(props.columnTitle);
});
it('has the correct number of linked pipeline child components', () => {
expect(vm.$children.length).toBe(props.linkedPipelines.length);
expect(titleElement.text()).toBe(propsData.columnTitle);
});
it('renders the correct number of linked pipelines', () => {
const linkedPipelineElements = vm.$el.querySelectorAll('.linked-pipeline');
const linkedPipelineElements = wrapper.findAll(LinkedPipeline);
expect(linkedPipelineElements.length).toBe(props.linkedPipelines.length);
expect(linkedPipelineElements.length).toBe(propsData.linkedPipelines.length);
});
it('renders cross project triangle when column is upstream', () => {
expect(vm.$el.querySelector('.cross-project-triangle')).toBeDefined();
expect(wrapper.find('.cross-project-triangle').exists()).toBe(true);
});
});
spec/frontend/pipelines/graph/linked_pipelines_mock_data.js
View file @ 88a4f6a4
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/javascripts/pipelines/graph/stage_column_component_spec.js → spec/frontend/pipelines/graph/stage_column_component_spec.js
View file @ 88a4f6a4
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import stageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
describe('stage column component', () => {
let component;
const StageColumnComponent = Vue.extend(stageColumnComponent);
const mockJob = {
id: 4250,
name: 'test',
......@@ -24,6 +21,8 @@ describe('stage column component', () => {
},
};
let wrapper;
beforeEach(() => {
const mockGroups = [];
for (let i = 0; i < 3; i += 1) {
......@@ -32,24 +31,34 @@ describe('stage column component', () => {
mockGroups.push(mockedJob);
}
component = mountComponent(StageColumnComponent, {
wrapper = shallowMount(stageColumnComponent, {
propsData: {
title: 'foo',
groups: mockGroups,
hasTriggeredBy: false,
},
});
});
it('should render provided title', () => {
expect(component.$el.querySelector('.stage-name').textContent.trim()).toEqual('foo');
expect(
wrapper
.find('.stage-name')
.text()
.trim(),
).toBe('foo');
});
it('should render the provided groups', () => {
expect(component.$el.querySelectorAll('.builds-container > ul > li').length).toEqual(3);
expect(wrapper.findAll('.builds-container > ul > li').length).toBe(
wrapper.props('groups').length,
);
});
describe('jobId', () => {
it('escapes job name', () => {
component = mountComponent(StageColumnComponent, {
wrapper = shallowMount(stageColumnComponent, {
propsData: {
groups: [
{
id: 4259,
......@@ -63,9 +72,10 @@ describe('stage column component', () => {
],
title: 'test',
hasTriggeredBy: false,
},
});
expect(component.$el.querySelector('.builds-container li').getAttribute('id')).toEqual(
expect(wrapper.find('.builds-container li').attributes('id')).toBe(
'ci-badge-&lt;img src=x onerror=alert(document.domain)&gt;',
);
});
......@@ -73,7 +83,8 @@ describe('stage column component', () => {
describe('with action', () => {
it('renders action button', () => {
component = mountComponent(StageColumnComponent, {
wrapper = shallowMount(stageColumnComponent, {
propsData: {
groups: [
{
id: 4259,
......@@ -92,15 +103,17 @@ describe('stage column component', () => {
title: 'Play all',
path: 'action',
},
},
});
expect(component.$el.querySelector('.js-stage-action')).not.toBeNull();
expect(wrapper.find('.js-stage-action').exists()).toBe(true);
});
});
describe('without action', () => {
it('does not render action button', () => {
component = mountComponent(StageColumnComponent, {
wrapper = shallowMount(stageColumnComponent, {
propsData: {
groups: [
{
id: 4259,
......@@ -114,9 +127,10 @@ describe('stage column component', () => {
],
title: 'test',
hasTriggeredBy: false,
},
});
expect(component.$el.querySelector('.js-stage-action')).toBeNull();
expect(wrapper.find('.js-stage-action').exists()).toBe(false);
});
});
});
spec/javascripts/pipelines/graph/linked_pipelines_mock_data.js deleted 100644 → 0
View file @ 20d1bda1
import mockData from '../../../frontend/pipelines/graph/linked_pipelines_mock_data';
export default mockData;
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