2021-04-29 21:17:54 +05:30
import { GlDropdown , GlDropdownItem } from '@gitlab/ui' ;
import { shallowMount } from '@vue/test-utils' ;
2020-05-24 23:13:21 +05:30
import { trimText } from 'helpers/text_helper' ;
2021-04-29 21:17:54 +05:30
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' ;
2018-11-20 20:47:30 +05:30
2018-12-05 23:21:45 +05:30
describe ( 'Stages Dropdown' , ( ) => {
2021-04-29 21:17:54 +05:30
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 ,
} ,
} ) ,
) ;
2019-07-07 11:18:12 +05:30
} ;
2021-04-29 21:17:54 +05:30
afterEach ( ( ) => {
wrapper . destroy ( ) ;
} ) ;
2019-07-07 11:18:12 +05:30
2021-04-29 21:17:54 +05:30
describe ( 'without a merge request pipeline' , ( ) => {
2019-07-07 11:18:12 +05:30
beforeEach ( ( ) => {
2021-04-29 21:17:54 +05:30
createComponent ( {
pipeline : mockPipelineWithoutMR ,
2019-07-07 11:18:12 +05:30
stages : [ { name : 'build' } , { name : 'test' } ] ,
selectedStage : 'deploy' ,
} ) ;
2019-05-18 00:54:41 +05:30
} ) ;
2018-11-20 20:47:30 +05:30
2019-07-07 11:18:12 +05:30
it ( 'renders pipeline status' , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findStatus ( ) . exists ( ) ) . toBe ( true ) ;
2019-07-07 11:18:12 +05:30
} ) ;
it ( 'renders pipeline link' , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findPipelinePath ( ) ) . toBe ( 'pipeline/28029444' ) ;
2019-07-07 11:18:12 +05:30
} ) ;
it ( 'renders dropdown with stages' , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findStageItem ( 0 ) . text ( ) ) . toBe ( 'build' ) ;
2019-07-07 11:18:12 +05:30
} ) ;
it ( 'rendes selected stage' , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findSelectedStageText ( ) ) . toBe ( 'deploy' ) ;
2019-07-07 11:18:12 +05:30
} ) ;
2019-05-18 00:54:41 +05:30
2019-07-07 11:18:12 +05:30
it ( ` renders the pipeline info text like "Pipeline #123 for source_branch" ` , ( ) => {
2021-04-29 21:17:54 +05:30
const expected = ` Pipeline # ${ mockPipelineWithoutMR . id } for ${ mockPipelineWithoutMR . ref . name } ` ;
const actual = trimText ( findPipelineInfoText ( ) ) ;
2019-07-07 11:18:12 +05:30
expect ( actual ) . toBe ( expected ) ;
} ) ;
2019-05-30 16:15:17 +05:30
} ) ;
2019-05-18 00:54:41 +05:30
2019-07-07 11:18:12 +05:30
describe ( 'with an "attached" merge request pipeline' , ( ) => {
beforeEach ( ( ) => {
2021-04-29 21:17:54 +05:30
createComponent ( {
pipeline : mockPipelineWithAttachedMR ,
2019-07-07 11:18:12 +05:30
stages : [ ] ,
selectedStage : 'deploy' ,
} ) ;
} ) ;
it ( ` renders the pipeline info text like "Pipeline #123 for !456 with source_branch into target_branch" ` , ( ) => {
2021-04-29 21:17:54 +05:30
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 ( ) ) ;
2019-07-07 11:18:12 +05:30
expect ( actual ) . toBe ( expected ) ;
} ) ;
it ( ` renders the correct merge request link ` , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findMRLinkPath ( ) ) . toBe ( mockPipelineWithAttachedMR . merge _request . path ) ;
2019-07-07 11:18:12 +05:30
} ) ;
it ( ` renders the correct source branch link ` , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findSourceBranchLinkPath ( ) ) . toBe (
mockPipelineWithAttachedMR . merge _request . source _branch _path ,
) ;
2019-07-07 11:18:12 +05:30
} ) ;
it ( ` renders the correct target branch link ` , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findTargetBranchLinkPath ( ) ) . toBe (
mockPipelineWithAttachedMR . merge _request . target _branch _path ,
) ;
2019-07-07 11:18:12 +05:30
} ) ;
2019-05-30 16:15:17 +05:30
} ) ;
2019-05-18 00:54:41 +05:30
2019-07-07 11:18:12 +05:30
describe ( 'with a detached merge request pipeline' , ( ) => {
beforeEach ( ( ) => {
2021-04-29 21:17:54 +05:30
createComponent ( {
pipeline : mockPipelineDetached ,
2019-07-07 11:18:12 +05:30
stages : [ ] ,
selectedStage : 'deploy' ,
} ) ;
} ) ;
it ( ` renders the pipeline info like "Pipeline #123 for !456 with source_branch" ` , ( ) => {
2021-04-29 21:17:54 +05:30
const expected = ` Pipeline # ${ mockPipelineDetached . id } for ! ${ mockPipelineDetached . merge _request . iid } with ${ mockPipelineDetached . merge _request . source _branch } ` ;
const actual = trimText ( findPipelineInfoText ( ) ) ;
2019-07-07 11:18:12 +05:30
expect ( actual ) . toBe ( expected ) ;
} ) ;
it ( ` renders the correct merge request link ` , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findMRLinkPath ( ) ) . toBe ( mockPipelineDetached . merge _request . path ) ;
2019-07-07 11:18:12 +05:30
} ) ;
it ( ` renders the correct source branch link ` , ( ) => {
2021-04-29 21:17:54 +05:30
expect ( findSourceBranchLinkPath ( ) ) . toBe (
mockPipelineDetached . merge _request . source _branch _path ,
) ;
2019-07-07 11:18:12 +05:30
} ) ;
2018-11-20 20:47:30 +05:30
} ) ;
} ) ;