unit-testing - 如何在 Angular 2 最终版本中编写 HTTP 模拟单元测试？

Question

我已经从 RC4 转移到最终版本 (2.1.0)，并且正在重构我的单元测试以符合 2.1.0 语法。这很容易，除了 HTTP 模拟。

我找不到任何关于如何在 2.1.0 中模拟 HTTP 请求的示例

这是一个 RC4 HTTP 单元测试。我将如何在最终版本 2.1.0 中重写它？

it('ngOnInit()',
  async(inject([TestComponentBuilder, XHRBackend], (tcb:TestComponentBuilder, mockBackend:MockBackend) => {
  tcb.createAsync(Route1ListComponent).then((fix:ComponentFixture<Route1ListComponent>) => {

    // THIS BLOCK OF CODE I NEED HELP TO RE-WRITE TO 2.1.0
    mockBackend.connections.subscribe(
      (connection:MockConnection) => {
        connection.mockRespond(new Response(
          new ResponseOptions({
              body: persons
            }
          )));
      });

    // THIS BLOCK OF CODE WILL NOT CHANGE
    let instance = fix.componentInstance;
    instance.ngOnInit();
    expect(instance.persons.length).toBe(3);
  });
})));

注意:请勿提供 RC 代码。谢谢

Answer 1

您需要做的第一件事是配置 TestBed .没有了 TestComponentBuilder .随着TestBed ，这就像配置一个 @NgModule从头开始，只是为了测试环境。这意味着您将把被测组件添加到 declarations ，将任何提供商添加到 provider , 以及任何对 imports 的导入.

为 Http 配置模拟后端提供商，您只需创建 Http来自 MockBackend .

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [ HttpModule ],
    declarations: [ RouteListComponent ],
    providers: [
      MockBackend,
      BaseRequestOptions,
      {
        provide: Http,
        useFactory: (backend: MockBackend, options: BaseRequestOptions) => {
          return new Http(backend, options);
        },
        deps: [ MockBackend, BaseRequestOptions ]
      }
    ]
  })
})

假设您不需要我不知道的任何其他提供程序或导入，那么配置应该就是这样。

对于测试，您首先要将其设为 async测试，因为您将在测试中执行异步操作。这与 RC 没有变化，您只需使用 async .如果组件使用 templateUrl (而且你没有使用 Webpack)，那么你需要调用 TestBed.compileComponents() ，否则不需要。之后，您可以使用 TestBed.createComponent 创建组件

let fixture: ComponentFixture<RouteListComponent>;
let component: RouteListComponent;

beforeEach(async(() => {
  TestBed.configureTestingModule({ ... })
  .compileComponents().then(() => {
    fixture = TestBed.createComponent(RouteListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
}));

it('...', async(inject([MockBackend], (backend: MockBackend) => {

})))

上面几乎所有与测试相关的东西都可以从@angular/core/testing导入.您对 MockBackend 的使用还是一样。

另外请注意，您不需要调用 component.ngOnInit .当您调用 fixture.detectChanges() 时，框架会调用它

另请参阅:

• Testing documentation对测试支持进行更全面的检查。