import { ElementFinder } from 'protractor' ; import { imageCompare } from '../common/image-compare' ; import { WizardPage } from './wizard.po.spec' ; describe ( 'Wizard Tests' , ( ) => { let page ; beforeEach ( async ( ) => { page = new WizardPage ( ) ; await page . getPage ( ) ; } ) ; it ( 'should have correct initial state' , async ( ) => { expect ( await page . stepHeaders . count ( ) ) . toBe ( 4 ) ; expect ( await page . wizard . getAttribute ( 'class' ) ) . toContain ( 'horizontal' ) ; page . stepHeaders . each ( async ( step , idx ) => expect ( await step . getText ( ) ) . toBe ( `Step ${ idx + 1 }` ) ) ; page . stepHeaders . each ( async ( step , idx ) => { if ( idx === 0 ) { expect ( await step . getAttribute ( 'class' ) ) . toContain ( 'active' ) ; expect ( await step . getAttribute ( 'class' ) ) . toContain ( 'visited' ) ; } else { expect ( await step . getAttribute ( 'class' ) ) . not . toContain ( 'active' ) ; expect ( await step . getAttribute ( 'class' ) ) . not . toContain ( 'visited' ) ; } } ) ; page . stepContents . each ( async ( step , idx ) => expect ( await step . $$ ( '*' ) . count ( ) > 0 ) . toBe ( idx === 0 ) ) ; let previous = await page . getPreviousButton ( ) ; let next = await page . getNextButton ( ) ; let cancel = await page . getCancelButton ( ) ; let finish = await page . getFinishButton ( ) ; expect ( previous ) . not . toBeNull ( ) ; expect ( await previous . getAttribute ( 'disabled' ) ) . not . toBeNull ( ) ; expect ( next ) . not . toBeNull ( ) ; expect ( await next . getAttribute ( 'disabled' ) ) . toBeNull ( ) ; expect ( cancel ) . not . toBeNull ( ) ; expect ( finish ) . toBeNull ( ) ; expect ( await imageCompare ( 'wizard-initial' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should navigate to the next page when the next button is clicked' , async ( ) => { await page . goToNext ( ) ; let steps = await page . stepHeaders ; expect ( await steps [ 0 ] . getAttribute ( 'class' ) ) . toContain ( 'visited' ) ; expect ( await steps [ 0 ] . getAttribute ( 'class' ) ) . not . toContain ( 'active' ) ; expect ( await steps [ 1 ] . getAttribute ( 'class' ) ) . toContain ( 'visited' ) ; expect ( await steps [ 1 ] . getAttribute ( 'class' ) ) . toContain ( 'active' ) ; page . stepContents . each ( async ( step , idx ) => expect ( await step . $$ ( '*' ) . count ( ) > 0 ) . toBe ( idx === 1 ) ) ; expect ( await imageCompare ( 'wizard-step2' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should navigate back to the first step if clicking on a visted step header' , async ( ) => { await page . goToNext ( ) ; let headers = await page . stepHeaders ; await headers [ 0 ] . click ( ) ; expect ( await headers [ 0 ] . getAttribute ( 'class' ) ) . toContain ( 'visited' ) ; expect ( await headers [ 0 ] . getAttribute ( 'class' ) ) . toContain ( 'active' ) ; expect ( await headers [ 1 ] . getAttribute ( 'class' ) ) . toContain ( 'visited' ) ; expect ( await headers [ 1 ] . getAttribute ( 'class' ) ) . not . toContain ( 'active' ) ; page . stepContents . each ( async ( step , idx ) => expect ( await step . $$ ( '*' ) . count ( ) > 0 ) . toBe ( idx === 0 ) ) ; } ) ; it ( 'should disable the next and finish buttons when the step is invalid and disableNextWhenInvalid = true' , async ( ) => { await page . disableNextWhenInvalidWizardButton . click ( ) ; await page . step1InvalidButton . click ( ) ; const next = await page . getNextButton ( ) ; expect ( await next . isEnabled ( ) ) . toBe ( false , 'Step 1 next button should be disabled when invalid' ) ; await page . step1InvalidButton . click ( ) ; expect ( await next . isEnabled ( ) ) . toBe ( true , 'Step 1 next button should be enabled when valid' ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . step4InvalidButton . click ( ) ; const finish = await page . getFinishButton ( ) ; expect ( await finish . isEnabled ( ) ) . toBe ( false , 'Step 4 finish button should be disabled when invalid' ) ; await page . step4InvalidButton . click ( ) ; expect ( await finish . isEnabled ( ) ) . toBe ( true , 'Step 4 finish button should be enabled when valid' ) ; } ) ; it ( 'should not disable the next and finish buttons when the step is invalid and disableNextWhenInvalid = false' , async ( ) => { await page . step1InvalidButton . click ( ) ; const next = await page . getNextButton ( ) ; expect ( await next . isEnabled ( ) ) . toBe ( true , 'Step 1 next button should be enabled when invalid' ) ; await page . step1InvalidButton . click ( ) ; expect ( await next . isEnabled ( ) ) . toBe ( true , 'Step 1 next button should be enabled when valid' ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . step4InvalidButton . click ( ) ; const finish = await page . getFinishButton ( ) ; expect ( await finish . isEnabled ( ) ) . toBe ( true , 'Step 4 finish button should be enabled when invalid' ) ; await page . step4InvalidButton . click ( ) ; expect ( await finish . isEnabled ( ) ) . toBe ( true , 'Step 4 finish button should be enabled when valid' ) ; } ) ; it ( 'should allow disableNextWhenInvalid at the step level to override the wizard input' , async ( ) => { await page . disableNextWhenInvalidStep1Button . click ( ) ; await page . step1InvalidButton . click ( ) ; const next = await page . getNextButton ( ) ; expect ( await next . isEnabled ( ) ) . toBe ( false , 'Step 1 next button should be disabled when invalid' ) ; await page . step1InvalidButton . click ( ) ; expect ( await next . isEnabled ( ) ) . toBe ( true , 'Step 1 next button should be enabled when valid' ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . step4InvalidButton . click ( ) ; const finish = await page . getFinishButton ( ) ; expect ( await finish . isEnabled ( ) ) . toBe ( true , 'Step 4 finish button should be enabled when invalid' ) ; await page . step4InvalidButton . click ( ) ; expect ( await finish . isEnabled ( ) ) . toBe ( true , 'Step 4 finish button should be enabled when valid' ) ; } ) ; it ( 'should be able to go to the final step' , async ( ) => { await page . goToNext ( ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; page . stepContents . each ( async ( step , idx ) => expect ( await step . $$ ( '*' ) . count ( ) > 0 ) . toBe ( idx === 3 ) ) ; let finish = await page . getFinishButton ( ) ; let next = await page . getNextButton ( ) ; let cancel = await page . getCancelButton ( ) ; expect ( finish ) . not . toBe ( null ) ; expect ( next ) . toBe ( null ) ; expect ( cancel ) . toBe ( null ) ; } ) ; it ( 'should update when a step is added and removed' , async ( ) => { expect ( await page . stepHeaders . count ( ) ) . toBe ( 4 ) ; await page . addStep5 ( ) ; expect ( await page . stepHeaders . count ( ) ) . toBe ( 5 ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; await page . goToNext ( ) ; page . stepContents . each ( async ( step , idx ) => expect ( await step . $$ ( '*' ) . count ( ) > 0 ) . toBe ( idx === 4 ) ) ; expect ( await page . getFinishButton ( ) ) . not . toBe ( null ) ; expect ( await page . getNextButton ( ) ) . toBe ( null ) ; expect ( await page . getCancelButton ( ) ) . toBe ( null ) ; await page . goToPrevious ( ) ; expect ( await page . getFinishButton ( ) ) . toBe ( null ) ; expect ( await page . getNextButton ( ) ) . not . toBe ( null ) ; expect ( await page . getCancelButton ( ) ) . not . toBe ( null ) ; await page . removeStep5 ( ) ; expect ( await page . stepHeaders . count ( ) ) . toBe ( 4 ) ; expect ( await page . getFinishButton ( ) ) . not . toBe ( null ) ; expect ( await page . getNextButton ( ) ) . toBe ( null ) ; expect ( await page . getCancelButton ( ) ) . toBe ( null ) ; } ) ; it ( 'should allow a footerTemplate to be added' , async ( ) => { expect ( page . resetButton . isPresent ( ) ) . toBeFalsy ( ) ; await page . footerTemplateButton . click ( ) ; expect ( await page . resetButton . isPresent ( ) ) . toBeTruthy ( ) ; expect ( await page . resetButton . getText ( ) ) . toBe ( 'RESET STEP 0' ) ; expect ( await imageCompare ( 'wizard-footer-template' ) ) . toEqual ( 0 ) ; await page . goToNext ( ) ; expect ( await page . resetButton . getText ( ) ) . toBe ( 'RESET STEP 1' ) ; } ) ; } ) ;