import { imageCompare } from '../common/image-compare' ; import { HierarchyBarPage } from './hierarchy-bar.po.spec' ; describe ( 'Hierarchy Bar Tests - standard Mode' , ( ) => { let page ; beforeEach ( async ( ) => { page = new HierarchyBarPage ( ) ; await page . getPage ( ) ; } ) ; it ( 'should have correct initial states' , async ( ) => { expect ( await page . getNodeCount ( ) ) . toBe ( 1 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Theresa Chandler' ) ; expect ( await imageCompare ( 'hierarchy-bar-initial' ) ) . toEqual ( 0 ) ; } ) ; it ( 'can programmatically set the selected node' , async ( ) => { await page . selectButton . click ( ) ; expect ( await page . getNodeCount ( ) ) . toBe ( 2 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; } ) ; it ( 'should display arrow when item has children' , async ( ) => { expect ( await page . nodeHasChildren ( 0 ) ) . toBe ( true ) ; } ) ; it ( 'should display children in popover' , async ( ) => { const titles = await page . getNodeChildrenTitles ( 0 ) ; expect ( titles ) . toEqual ( [ 'Leroy Rose' , 'Lilly Shaw Lilly Shaw Lilly Shaw Lilly Shaw Lilly Shaw Lilly Shaw Lilly Shaw Lilly Shaw Lilly Shaw Lilly Shaw' ] ) ; expect ( await imageCompare ( 'hierarchy-bar-popover' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should have selected the correct node on popover click' , async ( ) => { await page . selectPopoverNode ( 0 , 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; expect ( await imageCompare ( 'hierarchy-bar-selected' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should show correct children when an observable is used' , async ( ) => { await page . selectPopoverNode ( 0 , 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; const titles = await page . getNodeChildrenTitles ( 1 ) ; expect ( titles ) . toEqual ( [ 'Christian Olson' , 'Ernest Foster' ] ) ; } ) ; it ( 'should remove children when parent is clicked' , async ( ) => { await page . selectButton . click ( ) ; expect ( await page . getNodeCount ( ) ) . toBe ( 2 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; await page . clickNode ( 0 ) ; expect ( await page . getNodeCount ( ) ) . toBe ( 1 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Theresa Chandler' ) ; } ) ; it ( 'should not have any addons initially' , async ( ) => { expect ( ( await page . getAddons ( ) ) . length ) . toBe ( 0 ) ; } ) ; it ( 'should show left addon' , async ( ) => { await page . showLeftAddonBtn . click ( ) ; expect ( ( await page . getAddons ( ) ) . length ) . toBe ( 1 ) ; const addon = ( await page . getAddons ( ) ) [ 0 ] ; expect ( await addon . getAttribute ( 'innerText' ) ) . toBe ( 'LEFT ADDON' ) ; } ) ; it ( 'should show trailing addon' , async ( ) => { await page . showTrailingAddonBtn . click ( ) ; expect ( ( await page . getAddons ( ) ) . length ) . toBe ( 1 ) ; const addon = ( await page . getAddons ( ) ) [ 0 ] ; expect ( await addon . getAttribute ( 'innerText' ) ) . toBe ( 'TRAILING ADDON' ) ; expect ( await imageCompare ( 'hierarchy-bar-trailing-addon' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should show right addon' , async ( ) => { await page . showRightAddonBtn . click ( ) ; expect ( ( await page . getAddons ( ) ) . length ) . toBe ( 1 ) ; const addon = ( await page . getAddons ( ) ) [ 0 ] ; expect ( await addon . getAttribute ( 'innerText' ) ) . toBe ( 'RIGHT ADDON' ) ; expect ( await imageCompare ( 'hierarchy-bar-right-addon' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should display collapsed view when 3 or more nodes are selected - collapsed mode' , async ( ) => { await page . collapsedMode . click ( ) ; await page . selectPopoverNode ( 0 , 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; await page . selectPopoverNode ( 1 , 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Christian Olson' ) ; } ) ; it ( 'should allow nodes to be selected when clicking on ellipsis - collapsed mode' , async ( ) => { await page . collapsedMode . click ( ) ; await page . selectPopoverNode ( 0 , 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; await page . selectPopoverNode ( 1 , 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Christian Olson' ) ; await page . selectPopoverNodeCollapsed ( 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; } ) ; it ( 'should not display a popover when clicked when standard mode and readonly' , async ( ) => { await page . readOnlyBtn . click ( ) ; await page . selectButton . click ( ) ; await page . clickNode ( 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; } ) ; it ( 'should not display a popover when clicked when collapsed mode and readonly' , async ( ) => { await page . collapsedMode . click ( ) ; await page . readOnlyBtn . click ( ) ; await page . selectButton . click ( ) ; await page . clickNode ( 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; } ) ; it ( 'should not display a popover when clicked when dropdown mode and readonly' , async ( ) => { await page . dropdownMode . click ( ) ; await page . readOnlyBtn . click ( ) ; await page . selectButton . click ( ) ; await page . clickNode ( 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; } ) ; it ( 'should allow whole node to be selected - dropdown mode' , async ( ) => { await page . dropdownMode . click ( ) ; await page . selectButton . click ( ) ; expect ( await page . getNodeCount ( ) ) . toBe ( 2 ) ; expect ( await page . nodeHasChildrenDropdown ( 1 ) ) . toBe ( true ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Leroy Rose' ) ; await page . selectPopoverNodeDropdown ( 1 , 0 ) ; expect ( await page . getSelectedNodeTitle ( ) ) . toBe ( 'Christian Olson' ) ; expect ( await imageCompare ( 'hierarchy-bar-dropdown' ) ) . toEqual ( 0 ) ; } ) ; it ( 'should correctly hide overflow of nodes' , async ( ) => { await page . showRightAddonBtn . click ( ) ; await page . selectPopoverNode ( 0 , 1 ) ; await page . collapsedMode . click ( ) ; expect ( await imageCompare ( 'hierarchy-bar-overflow-collapsed' ) ) . toEqual ( 0 , 'collapsed mode - node overflow' ) ; await page . dropdownMode . click ( ) ; expect ( await imageCompare ( 'hierarchy-bar-overflow-dropdown' ) ) . toEqual ( 0 , 'dropdown mode - node overflow' ) ; await page . standardMode . click ( ) ; expect ( await imageCompare ( 'hierarchy-bar-overflow-standard' ) ) . toEqual ( 0 , 'standard mode - node overflow' ) ; } ) ; } ) ;