import { ComponentFixture } from '@angular/core/testing' ; export class WizardTestWrapper < T > { nativeElement : HTMLElement ; protected allStepsSelector = '.wizard-step' ; protected activeStepSelector = '.wizard-step.active' ; protected contentSelector = '.test-step-content' ; protected stepButtonsSelector = '.wizard-footer button' ; constructor ( private _fixture ) { this . nativeElement = _fixture . nativeElement ; } isStepVisited ( index ) { const stepHeaders = this . getStepHeaders ( ) ; return stepHeaders [ index ] . classList . contains ( 'visited' ) ; } isStepValid ( index ) { const stepHeaders = this . getStepHeaders ( ) ; return ! stepHeaders [ index ] . classList . contains ( 'invalid' ) ; } getStepHeaders ( ) { return Array . from ( this . nativeElement . querySelectorAll ( this . allStepsSelector ) ) ; } getActiveStepHeader ( ) { return this . nativeElement . querySelector ( this . activeStepSelector ) ; } getContentText ( ) { return this . nativeElement . querySelector < HTMLElement > ( this . contentSelector ) . innerText ; } getStepButtons ( ) { return Array . from ( this . nativeElement . querySelectorAll ( this . stepButtonsSelector ) ) ; } getStepButton ( buttonText ) { const buttons = this . getStepButtons ( ) ; return buttons . find ( button => button . innerText . toUpperCase ( ) === buttonText . toUpperCase ( ) ) ; } async clickStepButton ( buttonText ) { const button = this . getStepButton ( buttonText ) ; if ( ! button ) { throw new Error ( `Button "${ buttonText }" not found` ) ; } button . click ( ) ; this . _fixture . detectChanges ( ) ; return await this . _fixture . whenStable ( ) ; } }