时间戳

首页 > 解决方案 > 如何在 TypeScript 中轻松测试 void 方法

angular - 如何在 TypeScript 中轻松测试 void 方法

问题描述

我是新手，正在尝试学习 Angular 中的测试，所以我需要测试这个对我来说很难的 void 方法。你能帮忙吗？我看过很多网站，但有很多方法。哪个最适合新手？

 submitForm(): void {
    this.authService.playerName = this.userName.nativeElement.value;
    if (this.login()) {
        if (this.inputMulti.nativeElement.checked) {
            this.openMulti();
        } else if (this.inputSolo) {
            this.closePop();
            this.router.navigate(['/game']);
        }
    }
}

标签： angulartypescriptunit-testing

解决方案

单元测试就是强制您的代码确保它采用特定路径以及何时采用该路径，以确保事情符合预期。单元测试包括 (1) 强制代码采用特定路径/分支的代码和 (2) 期望 - 例如expect(spy).to.notHaveBeenCalled()或expect(a).toStictEqual(1)

您的主要工具是：

存根：在测试套件中调用的方法，而不是它们正在存根的真实方法。

间谍：间谍的作用与存根相同，但更多。间谍不仅允许您返回不同的值。它们还允许您检查方法是否被调用、调用了多少次、调用时传递给该方法的值等。

这里的想法是您只想测试submitForm您正在测试的方法中的代码，而不是该方法之外的任何代码。将submitForm其视为您正在测试的单元。

我不会为您编写代码，因为我没有时间，但这是您想要采用的基本方法。

首先，您要测试所有代码路径，总共有 4 个：

代码路径1：不进入顶层IF语句

在这里，您需要创建一个间谍/存根。您的测试将用 spy / stub 替换真正的this.login方法（仅在您的测试套件中 - 无需更改您正在测试的代码）。该this.login方法的 spy / stub 必须返回 false。在这个测试中，你会期望它openMulti没有被调用并且closePop没有被调用。您将需要监视这两种方法以确保它们未被调用。

代码路径2：进入顶层IF语句，执行嵌套IF语句的IF分支

在这里，您需要this.login再次 spy / stub - 这次强制它返回 true。您需要将 的值初始化this.inputMulti.nativeElement.checked为真（在您的测试套件中）。你会期望this.openMulti被召唤。

代码路径3：进入顶层IF语句，执行嵌套IF语句的ELSE IF分支

与 (2) 类似的方法，但在这里你需要确保this.inputMulti.nativeElement.checked它是假的并且this.inputSolo是真的。您会期望路由器会调用该navigate方法并被closePop调用。您甚至可能想要进行openMulti未调用的测试。

代码路径4：进入顶层IF语句，不执行嵌套IF语句中的任何分支

方法和以前一样。期望什么都不会被调用。

可悲的是，单元测试没有简单的方法。你只需要潜入，感受痛苦并习惯它背后的思考以及如何编写代码。后者有很多有用的教程。这个答案更侧重于思考。

如果您正在使用istanbul（您可能在后台使用它）然后启用覆盖。它将创建一个覆盖文件夹。在此覆盖文件夹中，您将找到一个 HTML 文件，您可以右键单击并在浏览器中打开它，其中显示了哪些代码路径/分支已经过测试（哪些没有）。

一切顺利。

推荐阅读