Angular2/测试 : how to run test with mock service provider?

Question

Angular2 测试

我想使用模拟服务而不是实际服务来运行我的组件。我在 beforeEachProviders 中提供了模拟服务(MockMyService)，它仍然在调用实际服务。

describe('List view component', () => {

  beforeEachProviders(() => {
    return [
      ROUTER_PROVIDERS,
      HTTP_PROVIDERS,
      provide(RouteParams, { useValue: new RouteParams({ query: 'test' }) }),
      provide(MyService, { useClass: MockMyService }),
      MyComponent,
      provide(APP_BASE_HREF, { useValue: '/' }),
      provide(ROUTER_PRIMARY_COMPONENT, { useValue: AppComponent }),
      provide(ApplicationRef, { useClass: MockApplicationRef })
    ];
  });

  it('1: component value check',
      async(inject([TestComponentBuilder, MyComponent], (tcb: TestComponentBuilder, myComponent) => {
        return tcb.createAsync(MyComponent).then((fixture) => {
          fixture.detectChanges();
          /**
           * my custom stuff
           */
        });
    })));

  });

Answer 1

您还可以覆盖 TestComponentBuilder 本身中的提供程序。

解决方法如下:(只是覆盖了 tcb 中的服务)

describe('List view component', () => {

  beforeEachProviders(() => {
    return [
      ROUTER_PROVIDERS,
      HTTP_PROVIDERS,
      { provide: RouteParams, useValue: new RouteParams({ query: 'test' }) },
      { provide: MyService, useClass: MockMyService },
      MyComponent,
      { provide: APP_BASE_HREF, useValue: '/' }),
      { provide: ROUTER_PRIMARY_COMPONENT, useValue: AppComponent }),
      { provide: ApplicationRef, useClass: MockApplicationRef })
    ];
  });

  it('1: component value check',
      async(inject([TestComponentBuilder, MyComponent], (tcb: TestComponentBuilder, myComponent) => {
        return tcb.overrideProviders(MyComponent, [
          { provide: MyService, useClass: MockMyService }
        ]).createAsync(MyComponent).then((fixture) => {
          fixture.detectChanges();
          /**
           * my custom stuff
           */
        });
    })));

  });

我希望，这会有所帮助:)