2018-11-20 20:47:30 +05:30
import Vue from 'vue' ;
2019-09-04 21:01:54 +05:30
import { trimText } from 'spec/helpers/text_helper' ;
2020-01-01 13:55:28 +05:30
import component from '~/jobs/components/stages_dropdown.vue' ;
2018-11-20 20:47:30 +05:30
import mountComponent from '../../helpers/vue_mount_component_helper' ;
2018-12-05 23:21:45 +05:30
describe ( 'Stages Dropdown' , ( ) => {
2018-11-20 20:47:30 +05:30
const Component = Vue . extend ( component ) ;
let vm ;
2019-07-07 11:18:12 +05:30
const mockPipelineData = {
id : 28029444 ,
details : {
status : {
2019-12-04 20:38:33 +05:30
details _path : '/gitlab-org/gitlab-foss/pipelines/28029444' ,
2019-07-07 11:18:12 +05:30
group : 'success' ,
has _details : true ,
icon : 'status_success' ,
label : 'passed' ,
text : 'passed' ,
tooltip : 'passed' ,
2018-12-05 23:21:45 +05:30
} ,
2019-07-07 11:18:12 +05:30
} ,
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' ,
} ,
} ;
describe ( 'without a merge request pipeline' , ( ) => {
let 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 ,
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
afterEach ( ( ) => {
vm . $destroy ( ) ;
} ) ;
2018-11-20 20:47:30 +05:30
2019-07-07 11:18:12 +05:30
it ( 'renders pipeline status' , ( ) => {
expect ( vm . $el . querySelector ( '.js-ci-status-icon-success' ) ) . not . toBeNull ( ) ;
} ) ;
it ( 'renders pipeline link' , ( ) => {
expect ( vm . $el . querySelector ( '.js-pipeline-path' ) . getAttribute ( 'href' ) ) . toEqual (
'pipeline/28029444' ,
) ;
} ) ;
it ( 'renders dropdown with stages' , ( ) => {
expect ( vm . $el . querySelector ( '.dropdown .js-stage-item' ) . textContent ) . toContain ( 'build' ) ;
} ) ;
it ( 'rendes selected stage' , ( ) => {
expect ( vm . $el . querySelector ( '.dropdown .js-selected-stage' ) . textContent ) . toContain ( 'deploy' ) ;
} ) ;
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" ` , ( ) => {
const expected = ` Pipeline # ${ pipeline . id } for ${ pipeline . ref . name } ` ;
const actual = trimText ( vm . $el . querySelector ( '.js-pipeline-info' ) . innerText ) ;
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' , ( ) => {
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 ,
stages : [ ] ,
selectedStage : 'deploy' ,
} ) ;
} ) ;
it ( ` renders the pipeline info text like "Pipeline #123 for !456 with source_branch into target_branch" ` , ( ) => {
2019-09-30 21:07:59 +05:30
const expected = ` Pipeline # ${ pipeline . id } for ! ${ pipeline . merge _request . iid } with ${ pipeline . merge _request . source _branch } into ${ pipeline . merge _request . target _branch } ` ;
2019-07-07 11:18:12 +05:30
const actual = trimText ( vm . $el . querySelector ( '.js-pipeline-info' ) . innerText ) ;
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 ) ;
} ) ;
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 ) ;
} ) ;
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 ) ;
} ) ;
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' , ( ) => {
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 ,
stages : [ ] ,
selectedStage : 'deploy' ,
} ) ;
} ) ;
it ( ` renders the pipeline info like "Pipeline #123 for !456 with source_branch" ` , ( ) => {
2019-09-30 21:07:59 +05:30
const expected = ` Pipeline # ${ pipeline . id } for ! ${ pipeline . merge _request . iid } with ${ pipeline . merge _request . source _branch } ` ;
2019-07-07 11:18:12 +05:30
const actual = trimText ( vm . $el . querySelector ( '.js-pipeline-info' ) . innerText ) ;
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 ) ;
} ) ;
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 ) ;
} ) ;
2018-11-20 20:47:30 +05:30
} ) ;
} ) ;