Angular 7 测试 - 异步函数调用 + async..await [英] Angular 7 Testing - Async function call + async..await

问题描述

在 Angular 7 单元测试中，是否有办法在将异步支持与 async..awaitasync( async(){} ) 语法代码>关键字?

In an Angular 7 unit test, is there a way to avoid the double async( async(){} ) syntax when combining async support along with the async..await keywords?

我是 Angular 的新手，但我是一位经验丰富的程序员，我无法选择我喜欢的测试风格.

I'm new to angular but am an experienced programmer, and I'm having trouble landing on my preferred test style.

我想在测试中安全地使用 async..await，并且我理解以下语法.然而，当指导开发人员不熟悉现代 javascript 和/或 async..await 的概念时，双重 async(async()) 语法对他们来说是多余的和混乱的.他们忽略了外部异步.服务中抛出的异常会导致在实际测试之外报告失败，这很难追踪.

I would like to safely use async..await in tests, and I understand the below syntax. However, when instructing devs new to modern javascript and/or the concept of async..await the double async(async()) syntax is redundant and confusing to them. They are leaving out the outer async. Exceptions thrown in the service are causing failures to be reported outside of the actual test which is difficult to track down.

似乎以下之一会更好:

1. it() 应该神奇地支持 async..await 并将我的回调包装在 async() 中，这样我就不必考虑一下.
2. it() 应该采用一个可选的函数参数(即 async 或 fakeAsync)来包装我的回调.
3. it() 变体 ita() 和 itfa() 应该存在，它们将使用适当的异步助手包装我的回调.立>
4. it() 用 async 包装我的回调，另外一个 itf() 将我的回调包装在 fakeAsync.

1. it() should magically support async..await and wrap my callback in async() so that I don't have to think about it.
2. it() should take an optional function parameter (i.e., async or fakeAsync) that will wrap my callback.
3. it() variations ita() and itfa() should exist that will wrap my callback with the appropriate async helper.
4. it() wraps my callback with async, and an additional itf() will wrap my callback in fakeAsync.

我是否遗漏了现有的概念或语法?有没有更好的选择?

Am I missing an existing concept or syntax? Is there a better alternative?

    import { async } from '@angular/core/testing';

    describe('MyService', () => {
        let service: MyService;

        ...

        it('should get data', async( async() => {
            // arrange
            let expectedData = { answer: 42 };

            // act
            let data = await service.getDataAsync();

            // assert
            expect(data).toEqual(expectedData);
        } ));
    })

推荐答案

有几种不同的方式来处理异步测试:

there are a couple different ways to handle async testing:

1. 使用内置的 karma doneFunction:(doneFunction) =>{async test here... 然后最终调用 done();}.它让您可以精细地控制测试结束的位置，但让您可以使用 done.fail(error) 自行处理错误.
2. 包裹在 angular async() 函数中.这是上面示例的一部分，但正如您所指出的，Angular 异步函数似乎不会自动支持内部的 await 语法，因此需要使用内部异步来获得对 await 的支持.
3. 使用 Angular fakeAsync() 包装函数，它允许您在代码中的任何位置调用 tick() 来模拟时间的流逝和可观察对象、承诺和其他异步函数的分辨率.一个缺点:您不能在此进行 HTTP 调用，因为它们会实时发生.

1. Use the built-in karma doneFunction: (doneFunction) => {async test here... then eventually call done();}. It gives you fine-grain control over where your test ends, but makes you kinda handle errors on your own with done.fail(error).
2. Wrap in the angular async() function. This is part of your example above, but as you noted, it seems that the Angular async function doesn't automatically support await syntax inside, thus necessitating the use of the inner async to get support for await.
3. Use the Angular fakeAsync() wrapper function, which allows you to call tick() wherever in your code to simulate the passage of time and resolution of observables, promises, and other async functions. One downside: you can't do HTTP calls in this, since they would happen real-time.

虽然我发现这 3 种方法中的每一种都有优点 &缺点，我发现 #2 对于创建易于阅读的流畅测试最有用.因此，尽管您可以通过使用 #1 或 #3 来避免嵌套异步代码，但我不确定收益是否会超过成本.就您的建议而言，如果对您很重要，您可能需要考虑向 angular repo 提交功能请求.

Although I've found each of the 3 methods has pros & cons, I have found #2 to be the most useful for creating a smooth flowing test that is easily readable. So although you could avoid the nested async code with using #1 or #3, I'm not sure the benefit would outweigh the costs. As far as your suggestions, you may want to consider submitting a feature request to the angular repo if its important to you.

有关更多信息，我发现此来源非常有用:https://medium.com/@michaelericksen_12434/angular-asynchronous-test-patterns-and-recipes-202cf7d47ec7.希望有帮助！

For more info, I found this source to be quite helpful: https://medium.com/@michaelericksen_12434/angular-asynchronous-test-patterns-and-recipes-202cf7d47ec7. Hope that helps!

这篇关于Angular 7 测试 - 异步函数调用 + async..await的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！