Angular jasmine/karma 测试承诺功能答案

【问题标题】：Angular jamine/karma test promise functionAngular jasmine/karma 测试承诺功能
【发布时间】：2017-12-19 00:10:32
【问题描述】：

我正在尝试测试以下函数中的 promse 函数

loadDetail(id) {
    this.bookingService.getServices(id).then((ret) => {
        if (ret.result) {
            this.sevices = ret.payload;
        } 
    }).catch((error) => {});       
}

我的测试是：

it('loadDetail successfully return services.', inject(
    [BookingService], (service: BookingService) => {
        service.initBooking();

        let ret = new returnObj();
        ret.result = true;
        ret.payload = new Array<any>();
        ret.payload.push({id: 1, title: "Title 1"});
        ret.payload.push({id: 2, title: "Title 2"});
        ret.payload.push({id: 3, title: "Title 3"});

        const spy = spyOn(service, "getServices").and.returnValue(Promise.resolve(ret));

        component.loadDetail(1);

        expect(component.sevices.length).toEqual(3);
    }
));

当我运行测试时，我收到错误“预期 0 等于 3”。我在这里做错了什么？我已经按照示例进行了操作，并且我很确定我正确使用了间谍。

【问题讨论】：

标签： angular jasmine karma-runner karma-jasmine

【解决方案1】：

问题是promise是异步的，结果是在loadDetail(1)完成之前断言的。

为了有效地测试，异步函数应该总是返回一个promise或者一个observable：

loadDetail(id) {
  return this.bookingService.getServices(id)....
}

如果它不应该返回结果，它将是undefined 的承诺。

这样它可以被链接。这对 async..await 和 async 或 fakeAsync Angular 助手特别有用：

it('loadDetail successfully return services.', fakeAsync(inject(
    [BookingService], async (service: BookingService) => {
        ...
        const spy = spyOn(service, "getServices").and.returnValue(Promise.resolve(ret));

        await component.loadDetail(1);

        expect(component.sevices.length).toEqual(3);
    }
));

这也可以通过 fakeAsync 和 tick 帮助程序以同步方式测试异步代码来解决（这不适用于真正的异步操作，如真正的 HTTP 请求）：

it('loadDetail successfully return services.', fakeAsync(inject(
    [BookingService], (service: BookingService) => {
        ...
        const spy = spyOn(service, "getServices").and.returnValue(Promise.resolve(ret));

        component.loadDetail(1);
        tick(0); // promise chain was executed

        expect(component.sevices.length).toEqual(3);
    }
));

【讨论】：