title: How to mock router events subscribe response in angular using jasmine test framework
body: <p>I am trying to test ng2-slim-loading-bar. For that the code is trying to the subscribe to the router.events action.</p>
  
  <p>However, I am unable to mock the router events subscription and consequently the loader functions. I have tried the below provider approach but to no avail.</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
  import { NavigationCancel,
          Event,
          NavigationEnd,
          NavigationError,
          NavigationStart,
          Router } from '@angular/router';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Angular 7 CRUD App';
    constructor(private loadingBar: SlimLoadingBarService, private router: Router) {
      this.router.events.subscribe((event: Event) =&gt; {
        this.navigationInterceptor(event);
      });
    }
    private navigationInterceptor(event: Event): void {
      if (event instanceof NavigationStart) {
        this.loadingBar.start();
      }
      if (event instanceof NavigationEnd) {
        this.loadingBar.complete();
      }
      if (event instanceof NavigationCancel) {
        this.loadingBar.stop();
      }
      if (event instanceof NavigationError) {
        this.loadingBar.stop();
      }
    }
  }
  </code></pre>
  
  <p>app.component.spec.ts</p>
  
  <pre><code>import { TestBed, async } from '@angular/core/testing';
  import { RouterTestingModule } from '@angular/router/testing';
  import { SlimLoadingBarModule, SlimLoadingBarService } from 'ng2-slim-loading-bar';
  import { NavigationCancel,
    Event,
    NavigationEnd,
    NavigationError,
    NavigationStart,
    Router } from '@angular/router';
  import { AppComponent } from './app.component';
  import { NO_ERRORS_SCHEMA } from '@angular/core';
  import { of } from 'rxjs';
  
  describe('AppComponent', () =&gt; {
    let loadingBar: SlimLoadingBarService;
    let router: Router;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        schemas: [NO_ERRORS_SCHEMA],
        imports: [
          RouterTestingModule,
          SlimLoadingBarModule
        ],
        declarations: [
          AppComponent
        ],
        providers: [
          { provide: SlimLoadingBarService, useValue: loadingBar },
          {
            provide: Router,
            useValue: {
              url: 'business/create',
              events: of(new NavigationStart(0, 'http://localhost:4200/business/create')),
              navigate: jasmine.createSpy('navigate')
            }
          }
        ],
      }).compileComponents();
    }));
  
    function setup() {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      return { fixture, app };
    }
  
    it('should render title in a h2 tag', () =&gt; {
      const { app, fixture } = setup();
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h2').textContent).toContain('Welcome to Angular 7 CRUD App');
      expect(loadingBar.start).toHaveBeenCalled();
    });
  });
  </code></pre>
  
  <p>Error:</p>
  
  <pre><code>TypeError: Cannot read property 'root' of undefined
          at rootRoute (node_modules/@angular/router/fesm5/router.js:5604:1)
  ...
  </code></pre>
  
  <p><a href="https://stackoverflow.com/questions/52901047/angular-6-how-to-mock-router-events-url-response-in-unit-test">Angular 6 - how to mock router.events url response in unit test</a></p>
  
  <p>I have tried the above approaches (mentioned in the link), but none of it seems to work. The provider useValue way it seems to recognise the router and the code executes to a certain extent, but ultimately fails.</p>
  
  <p>Any leads will be helpful.</p>
  
  <p>TIA!</p>