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

我已从 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 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 代码。

您需要做的第一件事是配置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()

也可以看看：

• 测试文档 https://angular.io/docs/ts/latest/guide/testing.html更完整地检查测试支持。