import { browser , protractor } from 'protractor' ; import { imageCompare } from '../common/image-compare' ; import { ToolbarSearchPage } from './toolbar-search.po.spec' ; const ec = protractor . ExpectedConditions ; describe ( 'Toolbar Search' , ( ) => { const ANIMATION_TIMEOUT = 500 ; let page ; beforeEach ( async ( ) => { page = new ToolbarSearchPage ( ) ; await page . getPage ( ) ; } ) ; it ( 'should have correct initial states' , async ( ) => { expect ( await page . leftInput . isDisplayed ( ) ) . toBeFalsy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . rightInput . isDisplayed ( ) ) . toBeFalsy ( ) ; expect ( await page . rightButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; expect ( await imageCompare ( 'toolbar-search-initial' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should display search input when the button is clicked' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await browser . driver . switchTo ( ) . activeElement ( ) . getId ( ) ) . toEqual ( await page . leftInput . getId ( ) ) ; expect ( await page . leftInput . getAttribute ( 'value' ) ) . toBe ( '' ) ; expect ( await page . rightInput . isDisplayed ( ) ) . toBeFalsy ( ) ; expect ( await page . rightButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightClear . isPresent ( ) ) . toBeFalsy ( ) ; await page . rightButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . rightInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . rightInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await imageCompare ( 'toolbar-search-expanded-both' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should hide search input when the button is clicked and the input is empty' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftButton . click ( ) ; await browser . wait ( ec . invisibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeFalsy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; } ) ; it ( 'should execute search handler when the button is clicked and the input has text' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftInput . sendKeys ( 'orange' ) ; await page . leftButton . click ( ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( 'orange' ) ; } ) ; it ( 'should hide search input when the button is clicked and the input was deleted' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftInput . sendKeys ( 'orange' ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeTruthy ( ) ; await page . leftClear . click ( ) ; expect ( await page . leftInput . getAttribute ( 'value' ) ) . toBe ( '' ) ; await page . leftButton . click ( ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; } ) ; describe ( 'key handling' , ( ) => { it ( 'should hide search input when the escape key is pressed' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await browser . actions ( ) . sendKeys ( protractor . Key . ESCAPE ) . perform ( ) ; await browser . wait ( ec . invisibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeFalsy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; } ) ; it ( 'should clear search input when the escape key is pressed' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftInput . sendKeys ( 'orange' ) ; expect ( await page . leftInput . getAttribute ( 'value' ) ) . toBe ( 'orange' ) ; await browser . actions ( ) . sendKeys ( protractor . Key . ESCAPE ) . perform ( ) ; await browser . wait ( ec . invisibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeFalsy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . getAttribute ( 'value' ) ) . toBe ( '' ) ; } ) ; it ( 'should execute search handler when the enter key is pressed' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftInput . sendKeys ( 'orange' ) ; await browser . actions ( ) . sendKeys ( protractor . Key . ENTER ) . perform ( ) ; await browser . wait ( ec . invisibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeFalsy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( 'orange' ) ; } ) ; } ) ; describe ( 'right alignment' , ( ) => { it ( 'should display search input when the button is clicked' , async ( ) => { await page . rightButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . rightInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . rightInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await browser . driver . switchTo ( ) . activeElement ( ) . getId ( ) ) . toEqual ( await page . rightInput . getId ( ) ) ; expect ( await page . rightInput . getAttribute ( 'value' ) ) . toBe ( '' ) ; } ) ; } ) ; describe ( 'always expanded' , ( ) => { it ( 'should be initially expanded' , async ( ) => { await page . alwaysExpandedBtn . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . rightInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightClear . isPresent ( ) ) . toBeFalsy ( ) ; } ) ; it ( 'should not hide search input when the button is clicked and the input is empty' , async ( ) => { await page . alwaysExpandedBtn . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftButton . click ( ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . rightInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; } ) ; it ( 'should not clear search input and not close when the escape key is pressed' , async ( ) => { await page . alwaysExpandedBtn . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftInput . sendKeys ( 'orange' ) ; expect ( await page . leftInput . getAttribute ( 'value' ) ) . toBe ( 'orange' ) ; await browser . actions ( ) . sendKeys ( protractor . Key . ESCAPE ) . perform ( ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeTruthy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; } ) ; it ( 'should execute search handler when the enter key is pressed' , async ( ) => { await page . alwaysExpandedBtn . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftInput . sendKeys ( 'orange' ) ; await browser . actions ( ) . sendKeys ( protractor . Key . ENTER ) . perform ( ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeTruthy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( 'orange' ) ; } ) ; it ( 'should not allow text to overflow behind buttons on toolbar search component' , async ( ) => { await page . leftButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . leftInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . leftInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . leftInput . sendKeys ( 'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm' ) ; expect ( await page . leftClear . isPresent ( ) ) . toBeTruthy ( ) ; expect ( await page . leftInput . getAttribute ( 'class' ) ) . toContain ( 'ux-toolbar-search-clear-offset' ) ; await page . rightButton . click ( ) ; await browser . wait ( ec . visibilityOf ( page . rightInput ) , ANIMATION_TIMEOUT ) ; expect ( await page . rightInput . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightButton . isDisplayed ( ) ) . toBeTruthy ( ) ; expect ( await page . rightClear . isPresent ( ) ) . toBeFalsy ( ) ; expect ( await page . searchedFor . getText ( ) ) . toBe ( '' ) ; await page . rightInput . sendKeys ( 'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm' ) ; expect ( await imageCompare ( 'toolbar-search-not-overflow-clear' ) ) . toEqual ( 0 ) ; } ) ; } ) ; } ) ;