Angular Testing 模块和覆盖

Question

我是 Angular Testing 的初学者，我的问题可能是“Angular Testing 最佳实践”的一部分。

我正在寻找一种方法来在测试中包含最小的模块并覆盖一些需要我模拟的部分。

假设我有一个需要路由器才能工作的按钮组件。它的模块是这样的:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyButtonComponent } from './mybutton.component';
import { Router } from '@angular/router';
@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    MyButtonComponent,
  ],
  exports: [
    MyButtonComponent,
  ],
  providers: [
    Router,
  ]
})
export class MyButtonModule { }

现在我想像这样测试它:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyButtonModule } from './viewer-button.module';
import { RouterTestingModule } from '@angular/router/testing';

// Tests Begining
describe('ViewerButtonComponent', () => {
  let component: MyButtonComponent;
  let fixture: ComponentFixture<MyButtonComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        ViewerButtonModule,
        RouterTestingModule.withRoutes([]),
      ],
    })
    .compileComponents();

    fixture = TestBed.createComponent(MyButtonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

  });

  it('#should create the component', () => {
    expect(component).toBeTruthy(' fail at creation');
  });
});

但是 Router 不会覆盖 RouterTestingModule 导入。 (得到 Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?). 错误)

我知道这个例子的一个更好的方法是只声明 MyButtonComponent，然后导入 RouterTestingModule，但我想问的是是否有一种方法可以在没有 NO_ERRORS_SCHEMAshallow 东西的情况下使用更大的组件来做到这一点。

例如:

 beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        // my childs component module
        MyChildComponentModule1,
        MyChildComponentModule2,
        ...
        MyChildComponentModuleX,

        //the modules that mock what needed (or use custom mock in the providers part)
        RouterTestingModule,
        HttpClientTestingModule,
        ....
        SomethingTestingModule
      ],
    })
    .compileComponents();

    fixture = TestBed.createComponent(MyButtonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

  });

Answer 1

RouterTestingModule 用于 stub 路由和导航。

这里有几点:

1) 你不应该在你的 widget 模块中自己提供 Router。相反，您应该将 RouterModule.forRoot() 添加到 AppModule 中，它将提供 Router 服务及其依赖项。

2) 你不应该创建混合的 Angular 模块，这意味着不要在单个 Angular 模块中提供和声明。

3) Angular 模块导入顺序很重要。使用此导入顺序，RouterTestingModule 的提供程序将覆盖 ViewButtonModule 中的 Router 提供程序。

TestBed.configureTestingModule({
  imports: [
    ViewerButtonModule,
    RouterTestingModule.withRoutes([]),
  ],
});

4) 您始终可以使用 Angular 测试模块覆盖提供者。例如

TestBed.overrideProvider(Router, { useValue: routerStub });

或

TestBed.configureTestingModule({
  providers: [
    { provide: Router, useValue: routerStub },
  ],
});

如果你有兴趣了解更多，可以保留我的文章Testing and Faking Angular Dependencies作为那些难以记住的细节的引用。

2020年我写了这些文章:

• > Testing Angular routing components with the RouterTestingModule
• > Testing routed Angular components with the RouterTestingModule