import { browser , by , element , ElementArrayFinder , Key , ExpectedConditions } from 'protractor' ; import { pressKeys } from '../util/index' ; describe ( 'tabs' , ( ) => { describe ( 'basic behavior' , ( ) => { let tabLabels ; let tabBodies ; beforeEach ( ( ) => { browser . get ( '/tabs' ) ; tabLabels = element . all ( by . css ( '.mat-tab-label' ) ) ; tabBodies = element . all ( by . css ( 'mat-tab-body' ) ) ; } ) ; it ( 'should change tabs when the label is clicked' , async ( ) => { tabLabels . get ( 1 ) . click ( ) ; expect ( await getLabelActiveStates ( tabLabels ) ) . toEqual ( [ false , true , false ] ) ; expect ( await getBodyActiveStates ( tabBodies ) ) . toEqual ( [ false , true , false ] ) ; await browser . wait ( ExpectedConditions . not ( ExpectedConditions . presenceOf ( element ( by . css ( 'div.mat-ripple-element' ) ) ) ) ) ; tabLabels . get ( 0 ) . click ( ) ; expect ( await getLabelActiveStates ( tabLabels ) ) . toEqual ( [ true , false , false ] ) ; expect ( await getBodyActiveStates ( tabBodies ) ) . toEqual ( [ true , false , false ] ) ; await browser . wait ( ExpectedConditions . not ( ExpectedConditions . presenceOf ( element ( by . css ( 'div.mat-ripple-element' ) ) ) ) ) ; } ) ; it ( 'should change focus with keyboard interaction' , async ( ) => { const right = Key . RIGHT ; const left = Key . LEFT ; tabLabels . get ( 0 ) . click ( ) ; expect ( await getFocusStates ( tabLabels ) ) . toEqual ( [ true , false , false ] ) ; pressKeys ( right ) ; expect ( await getFocusStates ( tabLabels ) ) . toEqual ( [ false , true , false ] ) ; pressKeys ( right ) ; expect ( await getFocusStates ( tabLabels ) ) . toEqual ( [ false , false , true ] ) ; pressKeys ( left ) ; expect ( await getFocusStates ( tabLabels ) ) . toEqual ( [ false , true , false ] ) ; pressKeys ( left ) ; expect ( await getFocusStates ( tabLabels ) ) . toEqual ( [ true , false , false ] ) ; } ) ; } ) ; } ) ; /**
 * Returns an array of true/false that represents the focus states of the provided elements.
 */ async function getFocusStates ( elements ) { return elements . map ( async ( el ) => { const elementText = await el ! . getText ( ) ; const activeText = await browser . driver . switchTo ( ) . activeElement ( ) . getText ( ) ; return activeText === elementText ; } ) ; } /** Returns an array of true/false that represents the active states for the provided elements. */ function getLabelActiveStates ( elements ) { return getClassStates ( elements , 'mat-tab-label-active' ) ; } /** Returns an array of true/false that represents the active states for the provided elements */ function getBodyActiveStates ( elements ) { return getClassStates ( elements , 'mat-tab-body-active' ) ; } /**
 * Returns an array of true/false values that represents whether the provided className is on
 * each element.
 */ async function getClassStates ( elements , className ) { return elements . map ( async ( el ) => { const classes = await el ! . getAttribute ( 'class' ) ; return classes . split ( / +/g ) . indexOf ( className ) > - 1 ; } ) ; }