import { browser , Key } from 'protractor' ; import { imageCompare } from '../common/image-compare' ; import { NavigationPage } from './navigation.po.spec' ; describe ( 'Navigation Tests' , ( ) => { let page ; beforeEach ( async ( ) => { page = new NavigationPage ( ) ; await page . getPage ( ) ; } ) ; it ( 'should intially be collapsed with no items selected' , async ( ) => { const items = await page . getTopLevelItems ( ) ; expect ( items . length ) . toBe ( 4 ) ; expect ( await page . isItemActive ( items [ 0 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 2 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 3 ] ) ) . toBeFalsy ( ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; expect ( await imageCompare ( 'navigation-initial' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should navigate to the routerLink when clicked' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 0 ] ) ; expect ( await page . isItemActive ( items [ 0 ] ) ) . toBeTruthy ( ) ; expect ( await page . isItemActive ( items [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 2 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 3 ] ) ) . toBeFalsy ( ) ; } ) ; it ( 'should expand but not change route when item has children but no routerLink' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 1 ] ) ; expect ( await page . isItemActive ( items [ 0 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 2 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 3 ] ) ) . toBeFalsy ( ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; expect ( await imageCompare ( 'navigation-expanded' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should expand and change route when item has children and routerLink' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 2 ] ) ; expect ( await page . isItemActive ( items [ 0 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 2 ] ) ) . toBeTruthy ( ) ; expect ( await page . isItemActive ( items [ 3 ] ) ) . toBeFalsy ( ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; expect ( await page . getPageContent ( ) ) . toBe ( 'Accounts' ) ; } ) ; it ( 'should allow selection of child nodes' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 1 ] ) ; const children = await page . getItemChildren ( items [ 1 ] ) ; await page . selectItem ( children [ 0 ] ) ; expect ( await page . isItemActive ( children [ 0 ] ) ) . toBeTruthy ( ) ; expect ( await page . isItemActive ( children [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . getPageContent ( ) ) . toBe ( 'Product Add' ) ; expect ( await imageCompare ( 'navigation-child-selection' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should collapse an expanded node on click' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 1 ] ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; await page . selectItem ( items [ 1 ] ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; } ) ; it ( 'should not collapse other items when autoCollapse is false' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 1 ] ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; await page . selectItem ( items [ 2 ] ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; } ) ; it ( 'should collapse other items when autoCollapse is true' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 1 ] ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; await page . enableAutoCollapse . click ( ) ; await page . selectItem ( items [ 2 ] ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 2 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; } ) ; it ( 'should select parent and child when exact is false' , async ( ) => { await page . disableExact . click ( ) ; const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 2 ] ) ; const children = await page . getItemChildren ( items [ 2 ] ) ; await page . selectItem ( children [ 0 ] ) ; expect ( await page . isItemActive ( items [ 0 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 2 ] ) ) . toBeTruthy ( ) ; expect ( await page . isItemActive ( items [ 3 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( children [ 0 ] ) ) . toBeTruthy ( ) ; expect ( await page . isItemActive ( children [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . getPageContent ( ) ) . toBe ( 'Accounts Add' ) ; } ) ; it ( 'should disable node when disabled is to true' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 3 ] ) ; const children = await page . getItemChildren ( items [ 3 ] ) ; expect ( await page . isItemDisabled ( children [ 0 ] ) ) . toBe ( true ) ; } ) ; it ( 'should disable the options node when disabled is set to true' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . disableOptions . click ( ) ; expect ( await page . isItemDisabled ( items [ 3 ] ) ) . toBe ( true ) ; expect ( await imageCompare ( 'navigation-options-disabled' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should prevent routerLinks from activating when disabled is true' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . disableOptions . click ( ) ; await browser . actions ( ) . mouseMove ( items [ 3 ] ) . click ( ) ; expect ( await imageCompare ( 'navigation-options-disabled' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should fire click events when disabled is false or not set' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . selectItem ( items [ 3 ] ) ; expect ( await page . getOptionsClicked ( ) ) . toBe ( 'Options click event' ) ; } ) ; it ( 'should prevent click events from activating when disabled is true' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . disableOptions . click ( ) ; await browser . actions ( ) . mouseMove ( items [ 3 ] ) . click ( ) ; expect ( await imageCompare ( 'navigation-options-disabled' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should not collapse disabled nodes when disabled is true' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await items [ 3 ] . click ( ) ; expect ( await page . isItemSelected ( items [ 3 ] ) ) . toBe ( true ) ; expect ( await page . getOptionsClicked ( ) ) . toBe ( 'Options click event' ) ; await page . disableOptions . click ( ) ; await browser . actions ( ) . mouseMove ( items [ 3 ] ) . click ( ) ; expect ( await page . isItemSelected ( items [ 3 ] ) ) . toBe ( true ) ; expect ( await imageCompare ( 'navigation-options-expanded-disabled' ) ) ; } ) ; it ( 'should prevent clicking of child nodes when they are disabled' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await items [ 3 ] . click ( ) ; expect ( await page . isItemSelected ( items [ 3 ] ) ) . toBe ( true ) ; expect ( await page . getPageContent ( ) ) . toBe ( 'Options' ) ; expect ( await page . getOptionsClicked ( ) ) . toBe ( 'Options click event' ) ; const childNodes = await page . getItemChildren ( items [ 3 ] ) ; await browser . actions ( ) . mouseMove ( childNodes [ 0 ] ) . click ( ) ; expect ( await page . getPageContent ( ) ) . toBe ( 'Options' ) ; } ) ; it ( 'should prevent disabled items from receiving focus' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . disableOptions . click ( ) ; await page . topFocus . click ( ) ; await browser . actions ( ) . sendKeys ( Key . TAB ) . perform ( ) ; await browser . actions ( ) . sendKeys ( Key . ARROW_DOWN ) . perform ( ) ; await browser . actions ( ) . sendKeys ( Key . ARROW_DOWN ) . perform ( ) ; expect ( await page . isItemFocused ( items [ 2 ] ) ) . toBe ( true ) ; await browser . actions ( ) . sendKeys ( Key . ARROW_DOWN ) . perform ( ) ; expect ( await page . isItemFocused ( items [ 3 ] ) ) . toBe ( false ) ; expect ( await page . isItemFocused ( items [ 0 ] ) ) . toBe ( true ) ; expect ( await imageCompare ( 'navigation-disabled-focus' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should disabled items in tree mode preventing navigation and click events' , async ( ) => { const items = await page . getTopLevelItems ( ) ; await page . enableTreeBtn . click ( ) ; await page . disableOptions . click ( ) ; expect ( await page . isTreeModeActive ( ) ) . toBe ( true ) ; await browser . actions ( ) . mouseMove ( items [ 3 ] ) . click ( ) ; expect ( await page . isItemSelected ( items [ 3 ] ) ) . toBe ( false ) ; expect ( await imageCompare ( 'navigation-tree-mode-options-disabled' ) ) ; } ) ; it ( 'should update the UI when tree mode is enabled' , async ( ) => { expect ( await page . isTreeModeActive ( ) ) . toBe ( false ) ; await page . enableTreeBtn . click ( ) ; expect ( await page . isTreeModeActive ( ) ) . toBe ( true ) ; expect ( await imageCompare ( 'navigation-tree-initial' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should not activate item when queryParams are set' , async ( ) => { await browser . get ( '#/navigation/products/add?search=phone' ) ; const items = await page . getTopLevelItems ( ) ; expect ( await page . isItemActive ( items [ 0 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 1 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 2 ] ) ) . toBeFalsy ( ) ; expect ( await page . isItemActive ( items [ 3 ] ) ) . toBeFalsy ( ) ; expect ( ( await page . getItemChildren ( items [ 0 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 1 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 2 ] ) ) . length ) . toBe ( 0 ) ; expect ( ( await page . getItemChildren ( items [ 3 ] ) ) . length ) . toBe ( 0 ) ; } ) ; } ) ;