Angular13 Angular 测试-介绍

2024-02-25 开发教程 Angular13 匿名 2℃

测试

测试你的 Angular 应用可以帮助你检查此应用是否正常运行。

建立环境

Angular CLI 会下载并安装试用 Jasmine 测试框架测试 Angular 应用时所需的一切。

你使用 CLI 创建的项目是可以立即用于测试的。运行 CLI 命令 ng test 即可：

ng test

ng test 命令在监视模式下构建应用，并启动 karma 测试运行器。

它的控制台输出一般是这样的：

10% building modules 1/1 modules 0 active
…INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
…INFO [launcher]: Launching browser Chrome …
…INFO [launcher]: Starting browser Chrome
…INFO [Chrome …]: Connected on socket …
Chrome …: Executed 3 of 3 SUCCESS (0.135 secs / 0.205 secs)

最后一行很重要。它表示 Karma 运行了三个测试，而且这些测试都通过了。

它还会打开 Chrome 浏览器并在“ Jasmine HTML 报告器”中显示测试输出，就像这样。

大多数人都会觉得浏览器中的报告比控制台中的日志更容易阅读。可以点击某一行测试，来单独重跑这个测试，或者点击一行描述信息来重跑所选测试组（“测试套件”）中的那些测试。

同时，ng test 命令还会监听这些变化。

要查看它的实际效果，就对 app.component.ts 做一个小修改，并保存它。这些测试就会重新运行，浏览器也会刷新，然后新的测试结果就出现了。

配置

CLI 会为你生成 Jasmine 和 Karma 的配置文件。

不过也可以通过编辑 src/ 目录下的 karma.conf.js 和 test.ts 文件来微调很多选项。

karma.conf.js 文件是 karma 配置文件的一部分。CLI 会基于 angular.json 文件中指定的项目结构和 karma.conf.js 文件，来在内存中构建出完整的运行时配置。

其他测试框架

你还可以使用其它的测试库和测试运行器来对 Angular 应用进行单元测试。每个库和运行器都有自己特有的安装过程、配置项和语法。

测试文件名及其位置

查看 src/app 文件夹。

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

测试文件的扩展名必须是 .spec.ts，这样工具才能识别出它是一个测试文件，也叫规约（spec）文件。

app.component.ts 和 app.component.spec.ts 文件位于同一个文件夹中，而且相邻。其根文件名部分（app.component）都是一样的。

请在你的项目中对任意类型的测试文件都坚持这两条约定。

把测试规约（spec）文件放在它要测试的文件旁边

最好把单元测试规约文件放到与它们测试的应用源码文件相同的文件夹中：

这些测试很容易找到。
你一眼就能看到应用中是否缺少一些测试。
临近的测试可以揭示一个部件会如何在上下文中工作。
当移动源代码时（在所难免），你不会忘了同时移动测试。
当重命名源文件时（在所难免），你不会忘了重命名测试文件。

把 spec 文件放到 test 目录下

应用的集成测试规范可以测试跨文件夹和模块的多个部分之间的交互。它们并不属于任何一个特定的部分，所以把它们放在任何一个文件旁都很不自然。

最好在 tests 目录下为它们创建一个合适的文件夹。

当然，用来测试那些测试助手的规约也位于 test 目录下，紧挨着相应的测试助手文件。

建立持续集成环境

避免项目出 BUG 的最佳方式之一，就是使用测试套件。但是很容易忘了一直运行它。持续集成（CI）服务器让你可以配置项目的代码仓库，以便每次提交和收到 Pull Request 时就会运行你的测试。

已经有一些像 Circle CI 和 Travis CI 这样的付费 CI 服务器，你还可以使用 Jenkins 或其它软件来搭建你自己的免费 CI 服务器。虽然 Circle CI 和 Travis CI 是收费服务，但是它们也会为开源项目提供免费服务。你可以在 GitHub 上创建公开项目，并免费享受这些服务。当你为 Angular 仓库贡献代码时，就会自动用 Circle CI 和 Travis CI 运行整个测试套件。

本文档解释了如何配置你的项目，来运行 Circle CI 和 Travis CI，以及如何修改你的测试配置，以便能在这两个环境下用 Chrome 浏览器来运行测试。

为 Circle CI 配置项目

在项目的根目录下创建一个名叫 .circleci 的目录。
在这个新建的目录下，创建一个名为 config.yml 的文件，内容如下：

version: 2
jobs:
  build:
    working_directory: ~/my-project
    docker:
      ‐ image: circleci/node:10-browsers
    steps:
      ‐ checkout
      ‐ restore_cache:
          key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
      ‐ run: npm install
      ‐ save_cache:
          key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
          paths:
            ‐ "node_modules"
      ‐ run: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

该配置会缓存 node_modules/并使用 npm run来运行 CLI 命令，因为 @angular/cli并没有装到全局。要把参数传给 npm脚本，这个单独的双中线（--）是必须的。

提交你的修改，并把它们推送到你的代码仓库中。注册 Circle CI，并添加你的项目。你的项目将会开始构建。

欲知详情，参阅 Circle CI 文档。

为 Travis CI 配置项目

在项目根目录下创建一个名叫 .travis.yml 的文件，内容如下：

language: node_js
node_js:
  ‐ "10"
addons:
  chrome: stable
cache:
  directories:
     ‐ ./node_modules
install:
  ‐ npm install
script:
  ‐ npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

它做的事情和 Circle CI 的配置文件一样，只是 Travis 不用 Chrome，而是用 Chromium 代替。

提交你的更改，并把它们推送到你的代码仓库。注册 Travis CI并添加你的项目。你需要推送一个新的提交，以触发构建。

欲知详情，参阅 Travis CI 文档。

为 GitLab CI 配置项目

在项目根目录下创建一个名为 .gitlab-ci.yml 的文件，内容如下：

image: node:14.15-stretch
variables:
  FF_USE_FASTZIP: "true"
cache:
  untracked: true
  policy: push
  key: ${CI_COMMIT_SHORT_SHA}
  paths:
    ‐ node_modules/
.pull_cached_node_modules:
  cache:
    untracked: true
    key: ${CI_COMMIT_SHORT_SHA}
    policy: pull
stages:
  ‐ setup
  ‐ test
install:
  stage: setup
  script:
    ‐ npm ci
test:
  stage: test
  extends: .pull_cached_node_modules
  before_script:
    ‐ apt-get update
    ‐ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    ‐ apt install -y ./google-chrome*.deb;
    ‐ export CHROME_BIN=/usr/bin/google-chrome
  script:
    ‐ npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

这种配置会在 install 作业下缓存 node_modules/，并在 test 作业中重新使用缓存的 node_modules/。

从 GitLab CI / CD 文档中了解有关 GitLab CI 测试的更多信息。

为 GitHub Actions 配置项目

在项目的根目录下创建一个名叫 .github/workflows 的文件夹。
在新文件夹中，创建一个名为 main.yml 的文件，其内容如下：

name: CI Angular app through Github Actions
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      ‐ uses: actions/checkout@v2
      ‐ name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      ‐ name: Setup
        run: npm ci
      ‐ name: Test
        run: |
          npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

从 GitHub Actions 文档中了解有关 GitHub Actions 的更多信息。

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

当你要用 CLI 命令 ng test 在自己的环境中运行 CI 测试时，你可能需要再调整一下配置，以运行 Chrome 浏览器测试。

这个配置文件是给 Karma（直译 "报应"）测试运行器使用的，你必须改为不用沙箱的 Chrome 启动方式。

这个例子中我们将使用无头 Chrome。

在 Karma 配置文件 karma.conf.js 中，浏览器的紧下方，添加自定义的启动器，名叫 ChromeNoSandbox。

browsers: ['ChromeHeadlessCI'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},

现在，运行下列带有 --no-sandbox 标志的命令：

ng test --no-watch --no-progress --browsers=ChromeHeadlessCI

注意：
目前，如果你正运行在 Windows 中，还要包含 --disable-gpu 标志。参阅 crbug.com/737678。

上一节： Angular HTTP客户端

下一节： Angular 代码覆盖率

"Angular13"的目录