diff options
Diffstat (limited to 'spec/frontend/jobs/components/stages_dropdown_spec.js')
| -rw-r--r-- | spec/frontend/jobs/components/stages_dropdown_spec.js | 155 |
1 files changed, 63 insertions, 92 deletions
diff --git a/spec/frontend/jobs/components/stages_dropdown_spec.js b/spec/frontend/jobs/components/stages_dropdown_spec.js index 72d5d0f9d44..b75d1707a8d 100644 --- a/spec/frontend/jobs/components/stages_dropdown_spec.js +++ b/spec/frontend/jobs/components/stages_dropdown_spec.js @@ -1,163 +1,134 @@ -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, + ); }); }); }); |