模拟router.events.subscribe（）Angular2 [英] Mocking router.events.subscribe() Angular2

问题描述

在我的app.component.ts中，我有以下ngOnInit函数：

  ngOnInit（）{
 this .sub = this.router.events.subscribe（e => {
 if（e instanceof NavigationEnd）{
 if（！e.url.includes（'login'））{
 this.loggedIn = true; 
} else {
 this.loggedIn = false; 
} 
} 
}）; 
} 
  

目前我正在测试sub是否为null但我想测试具有100％覆盖率的函数。

我想模拟路由器对象，以便我可以模拟URL，然后测试是否正确设置了this.loggedIn。 / p>

我将如何继续模拟此功能？我尝试了但是我不知道如何通过涉及的回调和使用NavigationEnd进行此操作。

解决方案

我已找到答案，如果有人正在寻找它：

  import {
 addProviders，
 async，来自'@ angular / core / testing'的
注入，
 TestComponentBuilder，
 ComponentFixture，
 fakeAsync，
 tick 
};来自'./app.component'的
 import {AppComponent};来自'@ angular / router'的
 import {Router，ROUTER_DIRECTIVES，NavigationEnd}; 
从'@ angular / http'导入{HTTP_PROVIDERS};来自'h5webstorage'的
 import {LocalStorage，WEB_STORAGE_PROVIDERS};来自'../nav/nav.component'的
 import {NavComponent};来自'../footer/footer.component'的
 import {FooterComponent};来自'rxjs / Observable'的
 import {Observable}; 
 
 class MockRouter {
 public ne = new NavigationEnd（0，'http：// localhost：4200 / login'，'http：// localhost：4200 / login'）; 
 public events = new Observable（observer => {
 observer.next（this.ne）; 
 observer.complete（）; 
}）; 
} 
 
 class MockRouterNoLogin {
 public ne = new NavigationEnd（0，'http：// localhost：4200 / dashboard'，'http：// localhost：4200 / dashboard ）; 
 public events = new Observable（observer => {
 observer.next（this.ne）; 
 observer.complete（）; 
}）; 
} 
  

In my app.component.ts I have the following ngOnInit function:

ngOnInit() {
    this.sub = this.router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        if (!e.url.includes('login')) {
          this.loggedIn = true;
        } else {
          this.loggedIn = false;
        }
      }
    });
  }

Currently I'm testing if the sub is not null but I want to test the function with a 100% coverage.

I want to mock the router object so that I can simulate the URL and then test if the this.loggedIn is correctly set.

How would I proceed to mock this function? I tried it but I don't know how I would take this on with the callback involved and with the NavigationEnd.

解决方案

I have found the answer, if someone is looking for it:

import {
  addProviders,
  async,
  inject,
  TestComponentBuilder,
  ComponentFixture,
  fakeAsync,
  tick
} from '@angular/core/testing';
import { AppComponent } from './app.component';
import { Router, ROUTER_DIRECTIVES, NavigationEnd } from '@angular/router';
import { HTTP_PROVIDERS } from '@angular/http';
import { LocalStorage, WEB_STORAGE_PROVIDERS } from 'h5webstorage';
import { NavComponent } from '../nav/nav.component';
import { FooterComponent } from '../footer/footer.component';
import { Observable } from 'rxjs/Observable';

class MockRouter {
  public ne = new NavigationEnd(0, 'http://localhost:4200/login', 'http://localhost:4200/login');
  public events = new Observable(observer => {
    observer.next(this.ne);
    observer.complete();
  });
}

class MockRouterNoLogin {
  public ne = new NavigationEnd(0, 'http://localhost:4200/dashboard', 'http://localhost:4200/dashboard');
  public events = new Observable(observer => {
    observer.next(this.ne);
    observer.complete();
  });
}

这篇关于模拟router.events.subscribe（）Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！