2

我正在努力测试一个注入了服务的 Angular2 组件。测试代码如下，但基本上是：

• SearchComponent 在构造函数中采用 FightService。

• 构造函数调用触发HTTP 请求的flightsService.getFlights()。flightService.getFlights() 返回一个 observable。

• 构造函数订阅了填充 allSummaryItems 数组的 observable 返回。

我的 MockFlightService 没有被使用，它基本上没有说没有 Http 提供者（在 FlightService 构造函数中）。如果我将 HttpModule 添加到 TestBed 中的提供程序，那么它会关闭并触发真正的 Http 请求。

如何确保我使用的是 MockFlightService？即使在触发真正的 Http 请求时，这也会正确测试 observable，我可以看到订阅的方法没有被调用？

谢谢

class MockFlightsService {
  public getFlights = () => {
    return new Observable<any>(() => { return dummyData.json(); });
  };
}

describe('SearchComponent Tests', () => {
  let fixture: ComponentFixture<SearchComponent>;
  let component: SearchComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [SearchComponent],
      imports: [RouterModule],
      providers: [{ provide: FlightsService, useClass: MockFlightsService }]
    });

    fixture = TestBed.createComponent(SearchComponent);
    fixture.detectChanges();
  });

  it('should render list', fakeAsync(() => {
    fixture.whenStable();
    component = fixture.componentInstance;
    console.log(component.allSummaryItems); // this is empty, shouldn't be
  }));
});

我正在使用 Angular 2.0.1。

4

1 回答 1

2

我的 MockFlightService 没有被使用，它基本上没有说没有 Http 提供者（在 FlightService 构造函数中）

使用您显示的配置，我可以看到这种情况发生的唯一方法是，如果您在@Component.providers. 这将覆盖任何模块级提供程序。我整整一天都在扯头发，因为我完全忘记了我有它。

如果该服务应该是应用程序范围的提供者，则将其@Component.providers从@NgModule.providers.

如果您的目标是将服务限制在组件级别，那么您应该做的是覆盖测试组件中的提供程序，而不是将提供程序添加到测试模块中。

TestBed.overrideComponent(SearchComponent, {
  set: {
    providers: [
      { provide: FlightsService, useClass: MockFlightsService }
    ]
  }
});

这应该在创建组件之前完成。

您可以在Overriding Test Providers中看到更多信息。

其他与错误无关的事情。

  • 您对RouterModule. 对于测试，您应该使用RouterTestingModule，如此处所述

  • whenStable返回一个承诺。只是打电话，并不能保护你。你需要订阅它，然后在那里做你的事情。

    whenStable().then(() => {
  // Do stuff here. This is when the async tasks are completed.
})

  • 查看这篇文章，了解如何模拟的示例Http，如果你需要的话，这样你就不会在测试期间发出 XHR 请求。

于 2016-09-30T10:15:20.003 回答