65.9K
CodeProject 正在变化。 阅读更多。
Home

Angular 应用程序中的测试自动化

Nikola Breznjak
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2017 年 12 月 29 日

CPOL

8分钟阅读

viewsIcon

24466

Angular 应用中测试自动化的介绍，以及一些关于测试的基本理论概念

简而言之

在这篇文章中，我将为你介绍 Angular 应用中的测试自动化。首先，我将涵盖一些关于测试的基本理论概念，解释各种测试级别（单元测试、集成测试、端到端测试等），并触及测试自动化指标的重要性。然后，我将向你展示如何在简单的演示应用中实现这些测试的一种版本。

让我们来回答一些棘手的问题

你们中有多少人真正测试过你们的代码？别担心；这是一个反问句，你不需要举手。

好吧，如果我们在这里诚实一点，在我（因为我最近主要写 JavaScript/Angular）身上，直到最近，我还在实践所谓的CLT。当然，它代表console.log 测试。

我们都知道我们应该做一些事情来改善这种情况，但太 H 频繁了，我们就像这里的这位绅士一样做法

好的，玩笑归玩笑，让我来强调一下为什么测试对你有用。想想以下问题

  • 你是否曾经修复了一个 bug，却发现它破坏了系统其他部分的东西？
  • 你是否曾经害怕触碰一段复杂代码，生怕会弄坏它？
  • 你是否曾经发现一段代码，你很确定它不再被使用，应该被删除，但你还是留着它以防万一？

好吧，如果这些问题的答案是是，那么你将看到自动化测试能带来的价值。

为什么要费心测试？

那么，你为什么一开始要测试你的代码呢？难道你还有个临近的截止日期，现在应该花宝贵的时间写测试，而不是实际的应用代码，这还不够吗？

好吧，随着功能的增加和代码库的增长，手动 QA 变得越来越昂贵、耗时且容易出错。

比如说，如果你从代码中删除了某个函数，你还记得它所有的潜在副作用吗？可能不记得。但是，如果你有测试，你甚至不需要。如果你删除了某个在别处是必需的东西，那个测试就会失败，你就知道你做错了。

进入生产环境的 bug 所付出的代价，常常比自动化测试捕获的 bug 所付出的代价大很多。这意味着自动化测试能给你带来正向的投资回报率（投资就是你的时间）。

所以，基本上，你应该测试你的代码，以验证它是否按预期运行。作为这个过程的结果，你会发现你为自己和团队中的其他开发人员提供了更好的功能文档。

如果以上都不能让你看到测试的价值，那就记住这一点

永远像维护你代码的人是一个有暴力倾向的疯子，并且知道你住在哪一样去写代码。🤔

测试的类型

我们中的大多数人都是开发者，我们知道什么是测试。我们打开应用程序，然后点击它，确认它是否正常工作，对吗？错！

在这里，我说的是自动化测试，它们会自动运行。

你们中的一些人可能听说过单元测试。然而，这并非唯一的测试类型。

单元测试、集成测试和功能测试都是自动化测试的类型，它们是持续交付的基础，持续交付是一种开发方法，可以让你自动安全地将更改部署到生产环境。

你不应该在单元测试、集成测试和功能测试之间进行选择。使用所有这些测试，并确保你能单独运行每种类型的测试套件。

  • 单元测试
    • 确保应用程序的各个组件按预期工作。断言测试组件 API
  • 集成测试
    • 确保组件协作按预期工作。断言可能测试组件 API、UI 或副作用（如数据库 I/O、日志记录等）
  • 功能测试
    • 确保应用程序从用户的角度按预期工作。断言主要测试用户界面
    • 这些测试有时也被称为端到端 (E2E) 测试或浏览器测试

例如，假设你的应用程序有一个注册流程。可以编写一个单元测试来确保电子邮件验证函数工作正常。

如果你想测试某个账户已被创建，并且相应的记录已添加到数据库中，那将是一个集成测试。

最后，功能测试将是在浏览器中自动化点击并输入电子邮件（和其他相关数据）的过程。

代码覆盖率

随着你在这个领域越来越深入，你将了解到了解你的代码有多少比例被测试覆盖是非常有用的信息。这也被称为代码覆盖率。

代码覆盖率不是唯一的测试自动化指标；我找到了一篇很好的博客文章，其中提到了 11 个有用的测试自动化指标。所以，当你对这个领域有更多了解后，你可能想回顾一下。

了解某些测试自动化指标的数据对于改进至关重要，因为它有助于你识别系统中需要改进的部分。

一些组织将其持续交付系统设置为，如果未达到一定的代码覆盖率，则阻止部署。

演示时间

好了，理论讲够了，现在让我们来看一些代码！

在本教程中，我们将涵盖功能测试。你可以查看 本教程 来查看使用单元测试的示例。

⚠️ 正如你将看到的，这很棒，所以你现在可能会想把它们到处都加上。如果是这样，请阅读这篇文章：Google 对 E2E、集成和单元测试的看法。其要点是，你不应该过度使用这些类型的测试。

必备组件

要能够跟上本教程，你需要安装 Node.js（6.9.0 或更高版本）。此外，通过 npm，你需要全局安装以下包

Angular CLI 是一个用于构建和构建 Angular 应用的命令行界面。它为你提供了一个熟悉的项目结构，并开箱即用地处理了所有常见的繁琐任务（例如生成新服务）。

根据你的设置，你可能需要安装

Protractor 是一个用于在 Angular 应用中编写 E2E 测试的官方库。它只不过是 Selenium WebDriverJS API 的一个包装器，它将其方法转换为 WebDriver JS 方法。

Jasmine 是一个用于测试 JavaScript 代码的行为驱动开发框架。它不依赖任何其他 JavaScript 框架。它不需要 DOM。并且它具有清晰、直观的语法，因此你可以轻松编写测试。

⚠️ 我想在这里补充的是，如今（尤其是在 JavaScript 世界中），你有大量的选择。选择一个选项并实际开始，比无休止地权衡选项要好得多。

使用 Jasmine，我们将使用所谓的行为驱动开发 (BDD) 风格来编写测试。测试的写法如下

  • describe [事情]
  • it should [做某事]

[事情] 可以是模块、类或函数。Jasmine 包含内置函数，如 describe() 和 it()，以便能够以这种风格进行编写。此外，Jasmine 还提供了一些其他很酷的东西，比如间谍，我们在这里不会涵盖，但你可以从 官方文档 中了解更多。

生成新项目

要使用 Angular CLI 启动一个新项目，请在你的终端中执行以下命令

ng new AngularProtractor

现在进入新创建的文件夹（cd AngularProtractor），然后运行

npm start

现在打开你的浏览器，访问 https://:4200/。

你应该会看到这个

最后，让我们来写一些测试

此时，我们已经设置好了一切，可以开始编写我们的测试了。使用 Angular CLI 的好处是，所有的测试工具都会为你安装和设置好。

现在用你的编辑器打开项目，注意 e2e 文件夹。

你会看到三个文件：tsconfig.e2e.json, app.po.ts，app.e2e-spec.ts。

在 app.po.ts 中，我们定义了一个 AppPage 类，其中包含一些方法（我们将在测试文件中使用它们）

import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('/');
  }

  getParagraphText() {
    return element(by.css('app-root h1')).getText();
  }
}

在 app.e2e-spec.ts 文件中，我们首先导入 AppPage

import { AppPage } from './app.po';

describe('angular-protractor App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Welcome to app!');
  });
});

当我们使用 Jasmine 来测试我们的代码时，我们使用 Jasmine 称之为测试套件的方式来组织我们的测试。我们通过调用 Jasmine 的全局 describe 函数来开始我们的测试套件。

这个函数接受两个参数：一个字符串和一个函数。字符串用作标题，函数是实现我们测试的代码。

在这个 describe 块中，我们将添加所谓的spec。在我们的 it 块中，我们将放置测试我们代码的期望。

不用担心语法；通过查看 Jasmine 的文档 可以轻松学会。而且，好消息是，所有的测试工具的语法或多或少都相似。

运行测试

要运行 E2E 测试，请执行

ng e2e

在其他输出中，你应该会看到

Jasmine started

  angular-protractor App
    ✓ should display welcome message

Executed 1 of 1 spec SUCCESS in 0.864 sec.

如果你弄错了测试，例如，写成了

it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Testing failure');
});

您将得到：

**************************************************
*                    Failures                    *
**************************************************

1) protractor-test App should display welcome message
  - Expected 'Welcome to app!' to equal 'Testing failure'.

Executed 1 of 1 spec (1 FAILED) in 0.84 sec.

第三方工具 - 好用，但要花钱！？

我在这里列出一些我发现很有趣的第三方工具。我与任何这些服务都没有关联，我只是在我研究之后，恰好喜欢它们提供的功能

我只想说，每个伟大的工具都有它的价格。而且，如果你在考虑（甚至抱怨）是否应该为某些软件付费，请阅读 Ambrose Little 关于 你的生产力值多少钱？ 的这篇精彩文章。

结论

在这篇文章中，我为你介绍了 Angular 应用中的测试自动化。我涵盖了一些关于测试的基本理论概念，并解释了各种测试类型，如单元测试、集成测试和 E2E 测试。此外，我还谈到了测试自动化指标的重要性。最后，我向你展示了如何在简单的演示应用中实现 E2E 测试。

我希望这篇文章展示了自动化测试的价值，并且你将继续在这个领域学习，并将其应用于你的工作流程。

历史

  • 2017 年 12 月 29 日：初稿
© . All rights reserved.