Skip to content

G
gitlab-ce
Commit 36de6133 authored by Payton Burdette's avatar Payton Burdette Committed by Scott Hampton
Browse files
Options

Refactor stages dropdown spec 

Moving the spec over to use
vue test utils and more modern
practices.
parent a378e3b9
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 96 deletions
app/assets/javascripts/jobs/components/stages_dropdown.vue
View file @ 36de6133
......@@ -44,13 +44,14 @@ export default {
</script>
<template>
<div class="dropdown">
<div class="js-pipeline-info">
<div class="js-pipeline-info" data-testid="pipeline-info">
<ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
<span class="font-weight-bold">{{ s__('Job|Pipeline') }}</span>
<gl-link
:href="pipeline.path"
class="js-pipeline-path link-commit"
data-testid="pipeline-path"
data-qa-selector="pipeline_path"
>#{{ pipeline.id }}</gl-link
>
......@@ -58,13 +59,17 @@ export default {
{{ s__('Job|for') }}
<template v-if="isTriggeredByMergeRequest">
<gl-link :href="pipeline.merge_request.path" class="link-commit ref-name js-mr-link"
<gl-link
:href="pipeline.merge_request.path"
class="link-commit ref-name"
data-testid="mr-link"
>!{{ pipeline.merge_request.iid }}</gl-link
>
{{ s__('Job|with') }}
<gl-link
:href="pipeline.merge_request.source_branch_path"
class="link-commit ref-name js-source-branch-link"
class="link-commit ref-name"
data-testid="source-branch-link"
>{{ pipeline.merge_request.source_branch }}</gl-link
>
......@@ -72,7 +77,8 @@ export default {
{{ s__('Job|into') }}
<gl-link
:href="pipeline.merge_request.target_branch_path"
class="link-commit ref-name js-target-branch-link"
class="link-commit ref-name"
data-testid="target-branch-link"
>{{ pipeline.merge_request.target_branch }}</gl-link
>
</template>
......
spec/frontend/jobs/components/stages_dropdown_spec.js
View file @ 36de6133
import Vue from 'vue';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { trimText } from 'helpers/text_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import component from '~/jobs/components/stages_dropdown.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import StagesDropdown from '~/jobs/components/stages_dropdown.vue';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import {
mockPipelineWithoutMR,
mockPipelineWithAttachedMR,
mockPipelineDetached,
} from '../mock_data';
describe('Stages Dropdown', () => {
const Component = Vue.extend(component);
let vm;
const mockPipelineData = {
id: 28029444,
details: {
status: {
details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
group: 'success',
has_details: true,
icon: 'status_success',
label: 'passed',
text: 'passed',
tooltip: 'passed',
},
},
path: 'pipeline/28029444',
flags: {
merge_request_pipeline: true,
detached_merge_request_pipeline: false,
},
merge_request: {
iid: 1234,
path: '/root/detached-merge-request-pipelines/-/merge_requests/1',
title: 'Update README.md',
source_branch: 'feature-1234',
source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1234',
target_branch: 'master',
target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
},
ref: {
name: 'test-branch',
},
let wrapper;
const findStatus = () => wrapper.findComponent(CiIcon);
const findSelectedStageText = () => wrapper.findComponent(GlDropdown).props('text');
const findStageItem = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
const findPipelineInfoText = () => wrapper.findByTestId('pipeline-info').text();
const findPipelinePath = () => wrapper.findByTestId('pipeline-path').attributes('href');
const findMRLinkPath = () => wrapper.findByTestId('mr-link').attributes('href');
const findSourceBranchLinkPath = () =>
wrapper.findByTestId('source-branch-link').attributes('href');
const findTargetBranchLinkPath = () =>
wrapper.findByTestId('target-branch-link').attributes('href');
const createComponent = (props) => {
wrapper = extendedWrapper(
shallowMount(StagesDropdown, {
propsData: {
...props,
},
}),
);
};
describe('without a merge request pipeline', () => {
let pipeline;
afterEach(() => {
wrapper.destroy();
});
describe('without a merge request pipeline', () => {
beforeEach(() => {
pipeline = JSON.parse(JSON.stringify(mockPipelineData));
delete pipeline.merge_request;
delete pipeline.flags.merge_request_pipeline;
delete pipeline.flags.detached_merge_request_pipeline;
vm = mountComponent(Component, {
pipeline,
createComponent({
pipeline: mockPipelineWithoutMR,
stages: [{ name: 'build' }, { name: 'test' }],
selectedStage: 'deploy',
});
});
afterEach(() => {
vm.$destroy();
});
it('renders pipeline status', () => {
expect(vm.$el.querySelector('.js-ci-status-icon-success')).not.toBeNull();
expect(findStatus().exists()).toBe(true);
});
it('renders pipeline link', () => {
expect(vm.$el.querySelector('.js-pipeline-path').getAttribute('href')).toEqual(
'pipeline/28029444',
);
expect(findPipelinePath()).toBe('pipeline/28029444');
});
it('renders dropdown with stages', () => {
expect(vm.$el.querySelector('.dropdown .js-stage-item').textContent).toContain('build');
expect(findStageItem(0).text()).toBe('build');
});
it('rendes selected stage', () => {
expect(vm.$el.querySelector('.dropdown .js-selected-stage').textContent).toContain('deploy');
expect(findSelectedStageText()).toBe('deploy');
});
it(`renders the pipeline info text like "Pipeline #123 for source_branch"`, () => {
const expected = `Pipeline #${pipeline.id} for ${pipeline.ref.name}`;
const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
const expected = `Pipeline #${mockPipelineWithoutMR.id} for ${mockPipelineWithoutMR.ref.name}`;
const actual = trimText(findPipelineInfoText());
expect(actual).toBe(expected);
});
});
describe('with an "attached" merge request pipeline', () => {
let pipeline;
beforeEach(() => {
pipeline = JSON.parse(JSON.stringify(mockPipelineData));
pipeline.flags.merge_request_pipeline = true;
pipeline.flags.detached_merge_request_pipeline = false;
vm = mountComponent(Component, {
pipeline,
createComponent({
pipeline: mockPipelineWithAttachedMR,
stages: [],
selectedStage: 'deploy',
});
});
it(`renders the pipeline info text like "Pipeline #123 for !456 with source_branch into target_branch"`, () => {
const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch} into ${pipeline.merge_request.target_branch}`;
const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
const expected = `Pipeline #${mockPipelineWithAttachedMR.id} for !${mockPipelineWithAttachedMR.merge_request.iid} with ${mockPipelineWithAttachedMR.merge_request.source_branch} into ${mockPipelineWithAttachedMR.merge_request.target_branch}`;
const actual = trimText(findPipelineInfoText());
expect(actual).toBe(expected);
});
it(`renders the correct merge request link`, () => {
const actual = vm.$el.querySelector('.js-mr-link').href;
expect(actual).toContain(pipeline.merge_request.path);
expect(findMRLinkPath()).toBe(mockPipelineWithAttachedMR.merge_request.path);
});
it(`renders the correct source branch link`, () => {
const actual = vm.$el.querySelector('.js-source-branch-link').href;
expect(actual).toContain(pipeline.merge_request.source_branch_path);
expect(findSourceBranchLinkPath()).toBe(
mockPipelineWithAttachedMR.merge_request.source_branch_path,
);
});
it(`renders the correct target branch link`, () => {
const actual = vm.$el.querySelector('.js-target-branch-link').href;
expect(actual).toContain(pipeline.merge_request.target_branch_path);
expect(findTargetBranchLinkPath()).toBe(
mockPipelineWithAttachedMR.merge_request.target_branch_path,
);
});
});
describe('with a detached merge request pipeline', () => {
let pipeline;
beforeEach(() => {
pipeline = JSON.parse(JSON.stringify(mockPipelineData));
pipeline.flags.merge_request_pipeline = false;
pipeline.flags.detached_merge_request_pipeline = true;
vm = mountComponent(Component, {
pipeline,
createComponent({
pipeline: mockPipelineDetached,
stages: [],
selectedStage: 'deploy',
});
});
it(`renders the pipeline info like "Pipeline #123 for !456 with source_branch"`, () => {
const expected = `Pipeline #${pipeline.id} for !${pipeline.merge_request.iid} with ${pipeline.merge_request.source_branch}`;
const actual = trimText(vm.$el.querySelector('.js-pipeline-info').innerText);
const expected = `Pipeline #${mockPipelineDetached.id} for !${mockPipelineDetached.merge_request.iid} with ${mockPipelineDetached.merge_request.source_branch}`;
const actual = trimText(findPipelineInfoText());
expect(actual).toBe(expected);
});
it(`renders the correct merge request link`, () => {
const actual = vm.$el.querySelector('.js-mr-link').href;
expect(actual).toContain(pipeline.merge_request.path);
expect(findMRLinkPath()).toBe(mockPipelineDetached.merge_request.path);
});
it(`renders the correct source branch link`, () => {
const actual = vm.$el.querySelector('.js-source-branch-link').href;
expect(actual).toContain(pipeline.merge_request.source_branch_path);
expect(findSourceBranchLinkPath()).toBe(
mockPipelineDetached.merge_request.source_branch_path,
);
});
});
});
spec/frontend/jobs/mock_data.js
View file @ 36de6133
......@@ -1189,3 +1189,86 @@ export const jobsInStage = {
path: '/gitlab-org/gitlab-shell/pipelines/27#build',
dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=build',
};
export const mockPipelineWithoutMR = {
id: 28029444,
details: {
status: {
details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
group: 'success',
has_details: true,
icon: 'status_success',
label: 'passed',
text: 'passed',
tooltip: 'passed',
},
},
path: 'pipeline/28029444',
ref: {
name: 'test-branch',
},
};
export const mockPipelineWithAttachedMR = {
id: 28029444,
details: {
status: {
details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
group: 'success',
has_details: true,
icon: 'status_success',
label: 'passed',
text: 'passed',
tooltip: 'passed',
},
},
path: 'pipeline/28029444',
flags: {
merge_request_pipeline: true,
detached_merge_request_pipeline: false,
},
merge_request: {
iid: 1234,
path: '/root/detached-merge-request-pipelines/-/merge_requests/1',
title: 'Update README.md',
source_branch: 'feature-1234',
source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1234',
target_branch: 'master',
target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
},
ref: {
name: 'test-branch',
},
};
export const mockPipelineDetached = {
id: 28029444,
details: {
status: {
details_path: '/gitlab-org/gitlab-foss/pipelines/28029444',
group: 'success',
has_details: true,
icon: 'status_success',
label: 'passed',
text: 'passed',
tooltip: 'passed',
},
},
path: 'pipeline/28029444',
flags: {
merge_request_pipeline: false,
detached_merge_request_pipeline: true,
},
merge_request: {
iid: 1234,
path: '/root/detached-merge-request-pipelines/-/merge_requests/1',
title: 'Update README.md',
source_branch: 'feature-1234',
source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1234',
target_branch: 'master',
target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
},
ref: {
name: 'test-branch',
},
};
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