import { ElementFinder } from 'protractor' ; import { imageCompare } from '../common/image-compare' ; import { MarqueeWizardPage } from './marquee-wizard.po.spec' ; describe ( 'Marquee Wizard Tests' , ( ) => { let page ; beforeEach ( async ( ) => { page = new MarqueeWizardPage ( ) ; await page . getPage ( ) ; } ) ; it ( 'should have correct number of steps' , async ( ) => { expect ( await page . stepHeaders . count ( ) ) . toBe ( 4 ) ; expect ( await imageCompare ( 'marquee-wizard-initial' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should have steps with the correct titles' , ( ) => { page . stepHeaders . each ( async ( step , idx ) => expect ( await step . getText ( ) ) . toBe ( `Step ${ idx + 1 }` ) ) ; } ) ; it ( 'should activate the first step by default' , ( ) => { page . stepHeaders . each ( async ( step , idx ) => { if ( idx === 0 ) { expect ( await step . getAttribute ( 'class' ) ) . toContain ( 'active' ) ; } else { expect ( await step . getAttribute ( 'class' ) ) . not . toContain ( 'active' ) ; } } ) ; } ) ; it ( 'should only mark the first step as visited' , ( ) => { page . stepHeaders . each ( async ( step , idx ) => { if ( idx === 0 ) { expect ( await step . getAttribute ( 'class' ) ) . toContain ( 'visited' ) ; } else { expect ( await step . getAttribute ( 'class' ) ) . not . toContain ( 'visited' ) ; } } ) ; } ) ; it ( 'should only show the content of the first step' , async ( ) => { expect ( await page . stepContents . count ( ) ) . toBe ( 4 ) ; page . stepContents . each ( async ( step , idx ) => expect ( await step . $$ ( '*' ) . count ( ) > 0 ) . toBe ( idx === 0 ) ) ; } ) ; it ( 'should show the correct buttons by default' , async ( ) => { const previous = await page . getPreviousButton ( ) ; const next = await page . getNextButton ( ) ; const cancel = await page . getCancelButton ( ) ; const finish = await page . getFinishButton ( ) ; expect ( previous ) . not . toBeNull ( ) ; expect ( next ) . not . toBeNull ( ) ; expect ( cancel ) . not . toBeNull ( ) ; expect ( finish ) . toBeNull ( ) ; } ) ; it ( 'should prevent the user from going back on the first step' , async ( ) => { const previous = await page . getPreviousButton ( ) ; const attr = await previous . getAttribute ( 'disabled' ) ; expect ( attr ) . not . toBeNull ( ) ; } ) ; it ( 'should allow the user to go next on the first step' , async ( ) => { const next = await page . getNextButton ( ) ; const attr = await next . getAttribute ( 'disabled' ) ; expect ( attr ) . toBeNull ( ) ; } ) ; 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 navigate to the next page when the next button is clicked' , async ( ) => { await page . goToNext ( ) ; const 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' ) ; const content = await page . stepContents ; page . stepContents . each ( async ( step , idx ) => expect ( await step . $$ ( '*' ) . count ( ) > 0 ) . toBe ( idx === 1 ) ) ; expect ( await imageCompare ( 'marquee-wizard-next-page' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should navigate back to the first step if clicking on a visited step header' , async ( ) => { await page . goToNext ( ) ; const 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 ) ) ; expect ( await imageCompare ( 'marquee-wizard-visited-header' ) ) . toEqual ( 0 ) ; } ) ; 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 ) ) ; const finish = await page . getFinishButton ( ) ; const next = await page . getNextButton ( ) ; const cancel = await page . getCancelButton ( ) ; expect ( finish ) . not . toBe ( null ) ; expect ( next ) . toBe ( null ) ; expect ( cancel ) . toBe ( null ) ; expect ( await imageCompare ( 'marquee-wizard-final-step' ) ) . toEqual ( 0 ) ; } ) ; 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 ( 'marquee-wizard-footer-template' ) ) . toEqual ( 0 ) ; await page . goToNext ( ) ; expect ( await page . resetButton . getText ( ) ) . toBe ( 'RESET STEP 1' ) ; } ) ; it ( 'should show a close icon when the step is invalid' , async ( ) => { await page . step1InvalidButton . click ( ) ; expect ( await imageCompare ( 'marquee-wizard-step-invalid' ) ) . toEqual ( 0 ) ; } ) ; /**
     * Resizable Marquee Wizard Tests
     */ it ( 'Side panel can be resized using the mouse when [resizable]="true"' , async ( ) => { await page . resizeableButton . click ( ) ; let valuenow = await page . getGutterAriaValue ( ) ; let valuemin = await page . getGutterAriaValueMin ( ) ; let valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '25' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . mouseMoveLeft ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '24' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . mouseMoveRight ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '25' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; expect ( await imageCompare ( 'marquee-wizard-mouse' ) ) . toEqual ( 0 ) ; } ) ; it ( 'Side panel can be resized using the keyboard when [resizable]="true"' , async ( ) => { await page . resizeableButton . click ( ) ; let valuenow = await page . getGutterAriaValue ( ) ; let valuemin = await page . getGutterAriaValueMin ( ) ; let valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '25' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . setGutterFocused ( ) ; await page . sendLeftKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '24' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . sendRightKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '25' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . sendHomeKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '0' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . sendEndKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '100' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . sendHomeKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; expect ( valuenow ) . toContain ( '0' ) ; await page . sendLeftKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '0' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; await page . sendEndKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; expect ( valuenow ) . toContain ( '100' ) ; await page . sendRightKey ( ) ; valuenow = await page . getGutterAriaValue ( ) ; valuemin = await page . getGutterAriaValueMin ( ) ; valuemax = await page . getGutterAriaValueMax ( ) ; expect ( valuenow ) . toContain ( '100' ) ; expect ( valuemin ) . toContain ( '0' ) ; expect ( valuemax ) . toContain ( '100' ) ; expect ( await imageCompare ( 'marquee-wizard-keyboard' ) ) . toEqual ( 0 ) ; } ) ; it ( 'Side panel can be initialized with a provided width' , async ( ) => { await page . resizeableButton . click ( ) ; const inputValue = await page . getInputField ( ) ; expect ( inputValue ) . toContain ( '25' ) ; await page . input . click ( ) ; await page . input . clear ( ) ; await page . input . click ( ) ; await page . input . sendKeys ( '35' ) ; const inputValue2 = await page . getInputField ( ) ; expect ( inputValue2 ) . toContain ( '35' ) ; expect ( await page . emittedWidth . getText ( ) ) . toBe ( '35.0' ) ; expect ( await imageCompare ( 'marquee-wizard-width' ) ) . toEqual ( 0 ) ; } ) ; } ) ;