import { ExpandMenuComponent } from './expand-menu.component' ; import { TestBed , ComponentFixture } from '@angular/core/testing' ; import { AppTestingModule } from '../../../testing/app-testing.module' ; import { Router } from '@angular/router' ; import { TranslateModule , TranslateLoader , TranslateFakeLoader } from '@ngx-translate/core' ; import { AppSidenavModule } from '../sidenav.module' ; describe ( 'ExpandMenuComponent' , ( ) => { let component ; let fixture ; let router ; beforeEach ( ( ) => { TestBed . configureTestingModule ( { imports : [ AppTestingModule , AppSidenavModule , TranslateModule . forRoot ( { loader : { provide : TranslateLoader , useClass : TranslateFakeLoader } } ) ] } ) ; fixture = TestBed . createComponent ( ExpandMenuComponent ) ; component = fixture . componentInstance ; router = TestBed . inject ( Router ) ; spyOn ( router , 'navigate' ) ; } ) ; it ( 'should render action item' , ( ) => { component . item = { id : 'test-action-button' , url : 'dummy' , title : null , icon : null , route : null } ; fixture . detectChanges ( ) ; const actionButton = document . body . querySelector ( '#test-action-button' ) ; expect ( actionButton ) . not . toBeNull ( ) ; } ) ; it ( 'should render action item with children' , ( ) => { component . item = { id : 'test-action-button' , icon : null , title : null , route : null , children : [ { id : 'child-1' , title : 'child-1' , url : 'dummy' , icon : null , route : null } , { id : 'child-2' , title : 'child-2' , url : 'dummy' , icon : null , route : null } ] } ; fixture . detectChanges ( ) ; const actionButton = document . body . querySelector ( '[id="test-action-button"]' ) ; actionButton . dispatchEvent ( new Event ( 'click' ) ) ; expect ( document . querySelector ( '[id="child-1"]' ) ) . not . toBeNull ( ) ; expect ( document . querySelector ( '[id="child-2"]' ) ) . not . toBeNull ( ) ; } ) ; } ) ;