import { TabbableListTestPageComponent } from './tabbable-list.po.spec' ; describe ( 'Tabbable List Tests' , ( ) => { let page ; beforeEach ( async ( ) => { page = new TabbableListTestPageComponent ( ) ; await page . getPage ( ) ; } ) ; it ( 'should allow the first item to be tabbable (and only the first)' , async ( ) => { expect ( await page . getTabIndex ( 0 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should make an item tabbable on click' , async ( ) => { await page . clickOnRow ( 2 ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should navigate using arrow keys' , async ( ) => { await page . clickOnRow ( 0 ) ; await page . moveFocusDown ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( true ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; await page . moveFocusUp ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( true ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should wrap focus when [wrap]="true"' , async ( ) => { await page . clickOnRow ( 3 ) ; await page . moveFocusDown ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '0' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( true ) ; await page . moveFocusDown ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( true ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should not wrap focus when [wrap]="false"' , async ( ) => { await page . toggleWrap ( ) ; await page . clickOnRow ( 3 ) ; await page . moveFocusDown ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '0' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( true ) ; await page . moveFocusDown ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '0' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( true ) ; } ) ; it ( 'should navigate to first item when HOME key is pressed when [allowBoundaryKeys]="true"' , async ( ) => { await page . clickOnRow ( 2 ) ; await page . moveFocusHome ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( true ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should navigate to last item when END key is pressed when [allowBoundaryKeys]="true"' , async ( ) => { await page . clickOnRow ( 2 ) ; await page . moveFocusEnd ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '0' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( true ) ; } ) ; it ( 'should not navigate to first item when HOME key is pressed when [allowBoundaryKeys]="false"' , async ( ) => { await page . toggleBoundaryKeys ( ) ; await page . clickOnRow ( 2 ) ; await page . moveFocusHome ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should not navigate to last item when END key is pressed when [allowBoundaryKeys]="false"' , async ( ) => { await page . toggleBoundaryKeys ( ) ; await page . clickOnRow ( 2 ) ; await page . moveFocusEnd ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should not steal focus an item when the list changes' , async ( ) => { await page . clickOnRow ( 0 ) ; await page . moveFocusDown ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( true ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; await page . search ( 'zzz' ) ; await page . clearSearch ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; it ( 'should ensure there is always one tabbable item when the list changes' , async ( ) => { expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; await page . search ( 'Document 3' ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '0' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( false ) ; } ) ; it ( 'should initially focus the first item when [focusOnShow]="true"' , async ( ) => { await page . toggleFocusOnShow ( ) ; expect ( await page . getTabIndex ( 0 ) ) . toBe ( '0' ) ; expect ( await page . getTabIndex ( 1 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 2 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 3 ) ) . toBe ( '-1' ) ; expect ( await page . getTabIndex ( 4 ) ) . toBe ( '-1' ) ; expect ( await page . getFocused ( 0 ) ) . toBe ( true ) ; expect ( await page . getFocused ( 1 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 2 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 3 ) ) . toBe ( false ) ; expect ( await page . getFocused ( 4 ) ) . toBe ( false ) ; } ) ; } ) ;