Angular 单元测试

测试 Angular 应用程序可以帮助我们确定您的应用程序是否按预期工作。该测试文档通过 Angular CLI 创建的示例应用程序，提供了一些用于单元测试和集成测试 Angular 应用程序的技术。

前提条件

如果您在编写 Angular App 的测试用例之前对以下概念有基本了解，那将会有所帮助

Angular 基础知识

• Javascript
• HTML
• CSS
• Angular CLI

在阅读本指南时，您可以在浏览器中浏览测试代码以获得实践经验。

如果您想尝试本指南中描述的应用程序，可以在浏览器中运行它，或者下载并本地运行它。

设置测试

Angular CLI 下载并安装了使用 Jasmine 测试框架 测试 Angular 应用程序所需的所有内容。

您使用 CLI 创建的项目已准备好进行测试。运行 ng-test cli 命令

ng-test 命令会以监视模式运行应用程序并启动 Karma 测试运行器。

控制台输出如下所示

Chrome 浏览器将打开并显示“Jasmine HTML Reporter”测试输出，如下所示。

您可以点击测试行仅重新运行该测试，或点击“详细信息”重新运行所选测试组（“测试套件”）中的测试。

ng-test 命令正在监视更改。

要查看效果，请对 app.component.ts 做出微小更改。测试将再次运行，并显示新的测试结果。

配置

您可以通过编辑项目根文件夹中的 karma.conf.js 文件和 src/ 文件夹中的 test.ts 文件来微调多个选项。

karma.conf.js 文件是一种配置文件。CLI 会根据 angular.json 文件中指定的应用程序结构，通过 karma.config.js 实现，在内存中创建完整的运行时配置。

其他测试框架

您还可以使用其他测试库和测试运行器来测试 Angular 应用程序。每个库和运行器都有其特定的安装过程、配置和语法。请上网搜索以了解更多信息。

测试文件名和位置

查看 src/app 文件夹。

CLI 为 appComponent 生成了一个名为 app.component.spec.ts 的测试文件。

• 测试文件的扩展名为 .spec.ts，以便工具能够将其识别为测试文件（又称，特定文件）。
• app.component.ts 和 app.component.spec.ts 文件位于同一个文件夹中。对于这两个文件，根文件名（应用程序组件）是相同的。
• 在您的项目中，为每种类型的测试文件遵循这两个约定。
• 它将您的特定文件放在它所测试的文件旁边。
• 这些测试易于获取。
• 您可以一目了然地看到您的应用程序的任何部分都缺乏测试。
• 围绕测试可以揭示一个部分在上下文中的表现。
• 重命名源文件时，您必须记住重命名测试文件。
• 将您的特定文件放在测试文件夹中。

应用程序集成规范可以测试文件夹和模块之间多个部分的交互。最好在测试目录中为它们创建一个合适的文件夹。

测试助手正在测试的规范位于测试文件夹中，在其相应文件旁边。

设置持续集成

使您的项目无 bug 的最佳方法是使用测试套件，但很容易忘记一直运行测试。持续集成 (CI) 服务器允许我们设置您的项目存储库，以便我们可以测试每个提交和拉取请求。

有付费的 CI 服务，如 Circle CI 和 Travis CI，您还可以通过 Jenkins 来托管您的代码。Circle CI 和 Travis CI 是付费服务，并且对开源项目免费提供。对 Angular 存储库的贡献是由完整的 Circle CI 测试套件运行的。

配置 Circle CI 项目

步骤 1：在项目根目录下创建一个名为 .circleci 的文件夹。

步骤 2：在新文件夹中创建一个名为 config.yml 的文件，其中包含以下内容

该配置会缓存 node_modules/，使用 npm run 来运行 CLI 命令，因为 @angular/cli 没有全局安装。双 连字符 (--) 用于将参数传递给 npm 脚本。

步骤 3：提交更改并将其推送到存储库。

步骤 4：注册 Circle CI 并将您的项目添加到那里。您的项目将开始构建。

配置 GitLab CI 项目

步骤 1：在项目根目录下创建一个名为 .gitlab-ci.yml 的文件。

该配置会在 install 作业中缓存 node_modules/，并在 test 作业中重用缓存的 node_modules/。

步骤 2：注册 GitLab CI。您需要推送一个新提交来触发构建。

步骤 3：提交更改并将其推送到存储库。

配置 GitHub Actions 项目

步骤 1：在项目根目录下创建一个名为 .github/workflows 的文件夹。

步骤 2：在新文件夹中创建一个名为 main.yml 的文件，其中包含以下内容

步骤 3：您需要推送一个新提交来触发构建。

步骤 4：提交您的更改。

配置 CLI 以在 Chrome 中进行 CI 测试

您可能需要调整配置才能运行 Chrome 浏览器测试，而 CLI 命令 ng-test 会在您的环境中运行 CI 测试。

我们在以下示例中使用无头 Chrome

现在，运行该命令以使用 --no-sandbox 标志

注意：如果您在 Windows 上运行这些代码，必须包含 --disable-GPU 标志。