角茉莉/业力测试承诺功能

Posted 2021-04-19

我正在尝试在以下函数中测试promise函数

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”。我在这做错了什么？我已经按照例子，我很确定我正在使用间谍。

答案

问题是promises是异步的，结果在loadDetail(1)完成之前被声明。

为了进行有效测试，异步函数应始终返回promise或observable：

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

如果它不应该返回结果，那将是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);
    }
));