import { Component } from '@angular/core' ; import { AppSidenavModule } from '../sidenav.module' ; import { TestBed , ComponentFixture } from '@angular/core/testing' ; import { AppTestingModule } from '../../../testing/app-testing.module' ; import { Router , NavigationEnd } from '@angular/router' ; import { Subject } from 'rxjs' ; @ Component ( { selector : 'app-test-component' , template : ` <span id="test-element" acaActiveLink="active-link-class" [action]="item"></span> ` } ) class TestComponent { item = { route : 'dummy' } ; } class MockRouter { private subject = new Subject ( ) ; events = this . subject . asObservable ( ) ; url = '' ; navigateByUrl ( url ) { const navigationEnd = new NavigationEnd ( 0 , '' , url ) ; this . subject . next ( navigationEnd ) ; } } describe ( 'ActionDirective' , ( ) => { let fixture ; let router ; beforeEach ( ( ) => { TestBed . configureTestingModule ( { imports : [ AppTestingModule , AppSidenavModule ] , declarations : [ TestComponent ] , providers : [ { provide : Router , useClass : MockRouter } ] } ) ; fixture = TestBed . createComponent ( TestComponent ) ; router = TestBed . inject ( Router ) ; } ) ; it ( 'should add active route class name' , ( ) => { fixture . detectChanges ( ) ; router . navigateByUrl ( '/dummy' ) ; expect ( document . body . querySelector ( '#test-element' ) . className . includes ( 'active-link-class' ) ) . toBe ( true ) ; } ) ; it ( 'should remove class name if route not active' , ( ) => { fixture . detectChanges ( ) ; router . navigateByUrl ( '/dummy' ) ; expect ( document . body . querySelector ( '#test-element' ) . className . includes ( 'active-link-class' ) ) . toBe ( true ) ; router . navigateByUrl ( '/other' ) ; expect ( document . body . querySelector ( '#test-element' ) . className . includes ( 'active-link-class' ) ) . not . toBe ( true ) ; } ) ; } ) ;