import { ComponentFixture , TestBed , waitForAsync } from '@angular/core/testing' ; import { RouterTestingModule } from '@angular/router/testing' ; import { By } from '@angular/platform-browser' ; import { Component , DebugElement , NO_ERRORS_SCHEMA } from '@angular/core' ; import { TranslateService } from '@ngx-translate/core' ; import { ObMockTranslatePipe } from '../_mocks/mock-translate.pipe' ; import { ObMockTranslateService } from '../_mocks/mock-translate.service' ; import { ObNavTreeItemModel } from './nav-tree-item.model' ; import { ObNavTreeComponent } from './nav-tree.component' ; @ Component ( { template : ` <ob-nav-tree
		[items]="items"
		[prefix]="prefix"
		[variant]="variant"
		[filterPattern]="filterPattern"
		[labelFormatter]="labelFormatter"
		[activateAncestors]="activateAncestors"
	></ob-nav-tree>` } ) class TestComponent { items = [ new ObNavTreeItemModel ( { id : 'A' , label : 'A - Label' , fragment : 'fragment' , queryParams : { foo : 'bar' } } ) , new ObNavTreeItemModel ( { id : 'B' , label : 'B - Label' , items : [ new ObNavTreeItemModel ( { id : 'B-1' , label : 'B.1 - Label' } ) , new ObNavTreeItemModel ( { id : 'B-2' , label : 'B.2 - Label' , items : [ new ObNavTreeItemModel ( { id : 'B2-1' , label : 'B.2.1 - Label' } ) , new ObNavTreeItemModel ( { id : 'B2-2' , label : 'B.2.2 - Label' } ) , new ObNavTreeItemModel ( { id : 'B2-3' , label : 'B.2.3 - Label' } ) ] } ) , new ObNavTreeItemModel ( { id : 'B-3' , label : 'B.3 - Label' } ) ] } ) , new ObNavTreeItemModel ( { id : 'C' , label : 'C - Label' , items : [ new ObNavTreeItemModel ( { id : 'C-1' , label : 'C.1 - Label' } ) , new ObNavTreeItemModel ( { id : 'C-2' , label : 'C.2 - Label' } ) , new ObNavTreeItemModel ( { id : 'C-3' , label : 'C.3 - Label' } ) ] } ) ] ; prefix = 'nav-tree-test' ; variant = ObNavTreeComponent . DEFAULTS . VARIANT ; filterPattern : string ; public activateAncestors = true ; labelFormatter ( label ) { return `${ label } - ${ this . prefix }` ; } } describe ( 'NavTreeComponent' , ( ) => { let testComponent ; let component ; let fixture ; let element ; beforeEach ( waitForAsync ( ( ) => { TestBed . configureTestingModule ( { imports : [ RouterTestingModule ] , declarations : [ TestComponent , ObNavTreeComponent , ObMockTranslatePipe ] , providers : [ { provide : TranslateService , useClass : ObMockTranslateService } ] , schemas : [ NO_ERRORS_SCHEMA ] } ) . compileComponents ( ) ; } ) ) ; beforeEach ( ( ) => { fixture = TestBed . createComponent ( TestComponent ) ; testComponent = fixture . componentInstance ; fixture . detectChanges ( ) ; element = fixture . debugElement . query ( By . directive ( ObNavTreeComponent ) ) ; component = element . injector . get ( ObNavTreeComponent ) ; } ) ; it ( 'should be created' , ( ) => { expect ( component ) . toBeTruthy ( ) ; } ) ; it ( 'should create 4 navigation trees after recursive rendering' , ( ) => { const navTrees = fixture . debugElement . queryAll ( By . css ( 'ul' ) ) ; expect ( navTrees . length ) . toBe ( 4 ) ; } ) ; it ( 'should create 12 navigation items after recursive rendering' , ( ) => { const navItems = fixture . debugElement . queryAll ( By . css ( 'li' ) ) ; expect ( navItems . length ) . toBe ( 12 ) ; } ) ; it ( 'should detect changes if another `NavTreeItemModel is added`' , ( ) => { testComponent . items . push ( new ObNavTreeItemModel ( { id : 'X' , label : 'X - Label' } ) ) ; fixture . detectChanges ( ) ; const navItems = fixture . debugElement . queryAll ( By . css ( 'li' ) ) ; expect ( navItems . length ) . toBe ( 13 ) ; } ) ; it ( 'should add a variant CSS class to the navigation trees' , ( ) => { testComponent . variant = 'ob-nav-custom' ; fixture . detectChanges ( ) ; const navTrees = fixture . debugElement . queryAll ( By . css ( '.ob-nav-tree.ob-nav-custom' ) ) ; expect ( navTrees . length ) . toBe ( 4 ) ; } ) ; it ( 'should custom format item labels' , ( ) => { const suffix = '[custom]' ; component . labelFormatter = ( item ) => `${ item . label } - ${ suffix }` ; fixture . detectChanges ( ) ; const firstNavItem = fixture . debugElement . query ( By . css ( 'li' ) ) ; expect ( firstNavItem . nativeElement . innerHTML ) . toContain ( suffix ) ; } ) ; it ( 'should add URL fragment to `href` attribute' , ( ) => { const fragment = `#${ testComponent . items [ 0 ] . fragment }` ; const firstNavItem = fixture . debugElement . query ( By . css ( 'a.ob-nav-link' ) ) ; expect ( firstNavItem . nativeElement . attributes . getNamedItem ( 'href' ) ) . toBeDefined ( ) ; expect ( firstNavItem . nativeElement . attributes . getNamedItem ( 'href' ) . value ) . toContain ( fragment ) ; } ) ; it ( 'should add URL query params to `href` attribute' , ( ) => { const urlQueryParams = `foo=${ testComponent . items [ 0 ] . queryParams . foo }` ; const firstNavItem = fixture . debugElement . query ( By . css ( 'a.ob-nav-link' ) ) ; expect ( firstNavItem . nativeElement . attributes . getNamedItem ( 'href' ) ) . toBeDefined ( ) ; expect ( firstNavItem . nativeElement . attributes . getNamedItem ( 'href' ) . value ) . toContain ( urlQueryParams ) ; } ) ; it ( 'should filter navigation items' , ( ) => { component . filterPattern = '2' ; fixture . detectChanges ( ) ; const navItems = fixture . debugElement . queryAll ( By . css ( 'li' ) ) ; expect ( navItems . length ) . toBe ( 7 ) ; } ) ; it ( 'should highlight patterns on filtered navigation items' , ( ) => { const translate = TestBed . inject ( TranslateService ) ; component . labelFormatter = ObNavTreeComponent . DEFAULTS . LABEL_FORMATTER ( translate ) ; component . filterPattern = 'C' ; fixture . detectChanges ( ) ; const navItems = fixture . debugElement . queryAll ( By . css ( 'li' ) ) ; expect ( navItems . length ) . toBe ( 4 ) ; navItems . forEach ( item => { expect ( item . nativeElement . innerHTML ) . toContain ( ObNavTreeComponent . DEFAULTS . HIGHLIGHT ) ; } ) ; } ) ; it ( 'should collapse all navigation items' , ( ) => { component . collapseAll ( ) ; fixture . detectChanges ( ) ; const collapsed = fixture . debugElement . queryAll ( By . css ( '.collapsed' ) ) ; expect ( collapsed . length ) . toBe ( 3 ) ; } ) ; it ( 'should expand all navigation items' , ( ) => { component . collapseAll ( ) ; fixture . detectChanges ( ) ; component . expandAll ( ) ; fixture . detectChanges ( ) ; const collapsed = fixture . debugElement . queryAll ( By . css ( '.collapsed' ) ) ; expect ( collapsed . length ) . toBe ( 0 ) ; } ) ; } ) ;