如何在Angular 2最终版本中编写HTTP模拟单元测试? [英] How to write an HTTP mock unit test in Angular 2 final release?

问题描述

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

I have moved from RC4 to final release (2.1.0) and I am refactoring my unit tests to conform to 2.1.0 syntax. This is easy except for HTTP mocking.

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

I cannot find any examples for how to mock HTTP requests in 2.1.0

这是RC4 HTTP单元测试.我将如何在最终版本2.1.0中重写它?

Here is an RC4 HTTP unit test. How would I re-write this in final release 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代码.谢谢

NOTE: Do NOT provide RC code please. Thanks

推荐答案

您需要做的第一件事就是配置TestBed.没有更多的TestComponentBuilder.使用TestBed，就像从头开始配置@NgModule一样，仅用于测试环境.这意味着您将被测组件添加到declarations，将任何提供程序添加到provider，并将任何导入添加到imports.

First thing you need to do is configure the TestBed. There's no more TestComponentBuilder. With the TestBed, it's like configuring an @NgModule from scratch, just for the test environment. This means you will add the component under test to the declarations, add any providers to the provider, and any imports to the imports.

要为Http提供程序配置模拟后端，只需从MockBackend创建Http.

To configure the mock backend for Http provider, you would just create the Http from the 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 ]
      }
    ]
  })
})

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

That should be it for the configuration, assuming you don't need any other providers or imports I don't know about.

对于测试，您首先要使其成为async测试，因为您将在测试中进行异步操作.这与RC并没有改变，您只需使用async.如果组件使用templateUrl(并且您没有使用Webpack)，则需要调用TestBed.compileComponents()，否则不需要.之后，您可以使用TestBed.createComponent

For the test you'll first want to make it an async test, as you'll be doing asynchronous operations in the test. This hasn't changed from RC, you just use async. If the component uses templateUrl (and you're not using Webpack), then you will need to call TestBed.compileComponents(), otherwise no need to. After that you can create the component with 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的使用仍然相同.

Pretty much all the things above related to testing can be imported from @angular/core/testing. Your use of the MockBackend would still be the same.

另一个说明，您不需要调用component.ngOnInit.当您调用fixture.detectChanges()

Another note, you don't need to call the component.ngOnInit. That is called by the framework when you call fixture.detectChanges()

另请参见:

• 测试文档，以更全面地检查测试支持./li>

• Testing documentation for more complete examination of testing support.

这篇关于如何在Angular 2最终版本中编写HTTP模拟单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！