Angular jamine/karma 测试promise函数

Question

我正在尝试测试以下函数中的 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);
    }
));

当我运行测试时，我得到错误 "Expected 0 to equal 3." 我在这里做错了什么？我已经按照示例进行操作，而且我很确定我正确地使用了间谍程序。

Answer 1

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

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

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

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

这样就可以链接了。这对于 async..await 和 async 或 fakeAsync Angular helper:

特别有用

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);
    }
));

Angular jamine/karma 测试promise函数

Angular jamine/karma test promise function

jasmine

karma-runner

karma-jasmine

angular