Angular学习笔记68：Angular项目的单元测试 -- 对路由进行测试

对路由进行测试

对于模版文件中有 的

在TestBed.configureTestingModule()的元数据的imports数据一定要加上"RouterTestingModule";
属于嵌套到组件中的其他组件，并不是单元测试的重点。

第一种处理方式-为创建和声明一些测试桩(无关紧要的组件或指令处理方式相同)

@Component({
   selector: 'router-outlet', template: ''})
class RouterOutletStubComponent {
    }

这个RouterOutletStubComponent测试桩的选择器要和其对应的真实组件一致，但其模板和类是空的，然后在TestBed.configureTestingModule的declarations数组中配置

declarations: [
    BrowseComponent,
    RouterOutletStubComponent,
  ]

第二种处理方式-把 NO_ERRORS_SCHEMA 添加到 TestBed.schemas 的元数据中。

TestBed.configureTestingModule({
   
  declarations: [
    AppComponent,
    RouterLinkDirectiveStub
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
})

这里的NO_ERRORS_SCHEMA 会要求 Angular 编译器忽略不认识的那些元素和属性，并且不会报错，Angular只会把它们渲染成空白标签，而浏览器会忽略这些标签。

两种方法可以同时使用

对于在类文件中有通过 'navigateByUrl()‘或’navigate()’ 方法来跳转路由

在类文件中有一个跳转的路由

this.route.navigateByUrl('/Login');

测试代码：

import {
   async, ComponentFixture, TestBed} from '@angular/core/testing';

import {
   BrowseComponent} from './browse.component';
import {
   NgZorroAntdModule} from 'ng-zorro-antd';
import {
   Router} from '@angular/router';

describe('BrowseComponent', () => {
   
  let component: BrowseComponent;
  let router: Router;
  let fixture: ComponentFixture<BrowseComponent>;
  const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
  beforeEach(async(() => {
   
    TestBed.configureTestingModule({
   
      imports: [NgZorroAntdModule],
      declarations: [BrowseComponent],
      providers: [
        {
   provide: Router, useValue: routerSpy}
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
   
    fixture = TestBed.createComponent(BrowseComponent);
    router = fixture.debugElement.injector.get(Router);
    component = fixture.componentInstance;
    fixture.detectChanges();