我有一个Angular2应用程序,它有一个简单的组件
@Component({
selector: 'Techs',
template: '',
providers: [HTTP_PROVIDERS]
})
export class Techs {
public techs: Tech[];
constructor(http: Http) {
http
.get('src/app/techs/techs.json')
.map(response => response.json())
.subscribe(result => this.techs = result);
}
}
我的测试执行了两次:
chrome 49.0.2623(mac os x 10.11.4):执行6次成功中的0次(0秒/0秒)
log:'测试结束'
Chrome 49.0.2623(Mac OS X 10.11.4):执行6/6成功(0.182秒/0.153秒)
但是,如果删除http调用,则测试只执行一次
Chrome 49.0.2623(Mac OS X 10.11.4):执行6/6成功(0.182秒/0.153秒)
这是我的测试
describe('techs component', () => {
it('should render 3 elements <tech>', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(Techs)
.then(fixture => {
fixture.componentInstance.techs = [{}, {}, {}];
fixture.detectChanges();
const techs = fixture.nativeElement;
expect(techs.querySelectorAll('tech').length).toBe(3);
});
}));
});
最佳答案
我认为您的问题来自http调用的异步方面。我想有两种方法来解决这个问题:
另一种方法是模拟http对象以模拟http调用。这可以使用MockBackend
类来完成。
下面是针对XHRBackend
类配置它:
beforeEachProviders(() => {
return [
HTTP_PROVIDERS,
provide(XHRBackend, { useClass: MockBackend }),
];
});
以及一种在响应中返回所需内容的方法:
it('Should return a list of dogs', inject([XHRBackend, HttpService, Injector], (mockBackend, httpService, injector) => {
mockBackend.connections.subscribe(
(connection: MockConnection) => {
connection.mockRespond(new Response(
new ResponseOptions({
body: [ { name: 'test' }, ... ]
})));
}
(...)
也许您可以使用Angular2的假异步支持。这样,你就能够以同步的方式控制异步处理…见https://angular.io/docs/ts/latest/api/testing/fakeAsync-function.html。