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

问题描述

在Angular 7单元测试中，将异步支持与async..await关键字结合使用时，是否可以避免双重async( 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.

以下其中一项似乎更好:

It seems like one of the following would be better:

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. 使用内置的因果完成功能:(doneFunction) => {async test here... then eventually call done();}.它使您可以对测试的结束位置进行细粒度的控制，但可以让您自己使用done.fail(error)自行处理错误.
2. 包装角度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避免嵌套的异步代码，但我不确定这样做的好处是否会超过成本.根据您的建议，如果对您很重要，您可能需要考虑向角度存储库提交功能请求

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.

有关更多信息，我发现此来源非常有帮助:

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屋！