javascript - Jasmine 在测试函数中等待异步函数

Question

我正在尝试测试依赖于服务调用来填充数据的 Angular 2 组件。但是，这个服务调用 promise 是在另一个函数中处理的。

this.data = null; //empty data is defined here.

public getDataMethod(){
    // controller related logic
    privateService.privateMethod(
        (data) => {this.data = data} //the data is populated here
    )
}

如何等待内部函数解析？

我读到我们可以等待 promise 以“完成”解决，但我发现的唯一例子是直接调用 promise。 (不是函数内的嵌套 promise )

我尝试将 done 方法传递给函数，它运行良好。

public getDataMethod(done){
    // controller related logic
    privateService.privateMethod(
        (data) => {this.data = data} //the data is populated here
        done(); //Calling done when the promise is resolved. 
    )
}

但是，这确实会使被测试的代码变得困惑。在运行测试之前等待 data 值填充是否有更好的方法？

Answer 1

这一切都在 Angular 文档测试部分进行了解释 Test a component with an async service .您基本上有几个选择。

1. 使用async 来包装测试。 Angular 知道何时有异步任务发生，因为它使用区域猴子修补所有异步函数，如 setTimeout。当我们使用 async 时，Angular 将阻止测试完成，直到所有异步任务都离开队列。

    import { async } from '@angular/core/testing';
   
    it('..', async(() => {
       // any async calls that happen between here
       // will be completed before the test completes
    }))
   

   另一部分是在我们做出任何断言之前等待异步任务完成。为此，我们可以使用 fixture.whenStable()，它会在异步任务完成之前等待，然后通过 promise 通知我们

    it('..', async(() => {
       service.someAsyncTask();
       fixture.whenStable().then(() => {
         expect(...) 
       })
    }))
   

2. 另一种选择是使用 fakeAsync/tick 组合。 Angular 允许我们通过调用 tick 来等待异步任务完成。这使我们能够使测试看起来是同步的

    import { fakeAsync, tick } from '@angular/core/testing';
   
    it('..', fakeAsync(() => {
       service.someAsyncTask();
       tick();
       expect(...)
    }))