测试link

Testinglink

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

Testing your Angular application helps you check that your app is working as you expect.

先决条件link

Prerequisiteslink

在为 Angular 应用编写测试之前，你应该对这些概念有一个基本的了解：

Before writing tests for your Angular app, you should have a basic understanding of the following concepts:

• Angular 的基本原理

  Angular fundamentals

• JavaScript

• HTML

• CSS

• Angular CLI

本测试文档通过使用 Angular CLI 创建的范例应用，为对 Angular 应用进行单元测试和集成测试提供了技巧和方法。这个范例应用很像“英雄之旅”教程中的应用。

The testing documentation offers tips and techniques for unit and integration testing Angular applications through a sample application created with the Angular CLI. This sample application is much like the one in the Tour of Heroes tutorial.

建立环境link

Set up testinglink

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

The Angular CLI downloads and installs everything you need to test an Angular application with the Jasmine test framework.

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

The project you create with the CLI is immediately ready to test. Just run the ng testCLI command:

      
        content_copy
      
      ng test
    

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

The ng test command builds the app in watch mode, and launches the Karma test runner.

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

The console output looks a bit like this:

      
        content_copy
      
      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 运行了三个测试，而且这些测试都通过了。

The last line of the log is the most important. It shows that Karma ran three tests that all passed.

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

A Chrome browser also opens and displays the test output in the "Jasmine HTML Reporter" like this.

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

Most people find this browser output easier to read than the console log. You can click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group ("test suite").

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

Meanwhile, the ng test command is watching for changes.

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

To see this in action, make a small change to app.component.ts and save. The tests run again, the browser refreshes, and the new test results appear.

配置link

Configurationlink

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

The CLI takes care of Jasmine and Karma configuration for you.

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

You can fine-tune many options by editing the karma.conf.js in the root folder of the project and the test.ts files in the src/ folder.

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

The karma.conf.js file is a partial Karma configuration file. The CLI constructs the full runtime configuration in memory, based on application structure specified in the angular.json file, supplemented by karma.conf.js.

要进一步了解 Jasmine 和 Karma 的配置项，请搜索网络。

Search the web for more details about Jasmine and Karma configuration.

其他测试框架link

Other test frameworkslink

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

You can also unit test an Angular app with other testing libraries and test runners. Each library and runner has its own distinctive installation procedures, configuration, and syntax.

要了解更多，请搜索网络。

Search the web to learn more.

测试文件名及其位置link

Test file name and locationlink

查看 src/app 文件夹。

Look inside the src/app folder.

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

The CLI generated a test file for the AppComponent named app.component.spec.ts.

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

The app.component.ts and app.component.spec.ts files are siblings in the same folder. The root file names (app.component) are the same for both files.

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

Adopt these two conventions in your own projects for every kind of test file.

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

Place your spec file next to the file it testslink

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

It's a good idea to put unit test spec files in the same folder as the application source code files that they test:

• 这些测试很容易找到。

  Such tests are easy to find.

• 你一眼就能看到应用中是否缺少一些测试。

  You see at a glance if a part of your application lacks tests.

• 临近的测试可以揭示一个部件会如何在上下文中工作。

  Nearby tests can reveal how a part works in context.

• 当移动源代码时（在所难免），你不会忘了同时移动测试。

  When you move the source (inevitable), you remember to move the test.

• 当重命名源文件时（在所难免），你不会忘了重命名测试文件。

  When you rename the source file (inevitable), you remember to rename the test file.

把 spec 文件放到 test 目录下link

Place your spec files in a test folderlink

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

Application integration specs can test the interactions of multiple parts spread across folders and modules. They don't really belong to any part in particular, so they don't have a natural home next to any one file.

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

It's often better to create an appropriate folder for them in the tests directory.

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

Of course specs that test the test helpers belong in the test folder, next to their corresponding helper files.

建立持续集成环境link

Set up continuous integrationlink

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

One of the best ways to keep your project bug-free is through a test suite, but it's easy to forget to run tests all the time. Continuous integration (CI) servers let you set up your project repository so that your tests run on every commit and pull request.

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

There are paid CI services like Circle CI and Travis CI, and you can also host your own for free using Jenkins and others. Although Circle CI and Travis CI are paid services, they are provided free for open source projects. You can create a public project on GitHub and add these services without paying. Contributions to the Angular repo are automatically run through a whole suite of Circle CI tests.

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

This article explains how to configure your project to run Circle CI and Travis CI, and also update your test configuration to be able to run tests in the Chrome browser in either environment.

为 Circle CI 配置项目link

Configure project for Circle CIlink

步骤一：在项目的根目录下创建一个名叫 .circleci 的目录。

Step 1: Create a folder called .circleci at the project root.

步骤二：在这个新建的目录下，创建一个名为 config.yml 的文件，内容如下：

Step 2: In the new folder, create a file called config.yml with the following content:

      
        content_copy
      
      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 脚本，这个单独的双中线（--）是必须的。

This configuration caches node_modules/ and uses npm runto run CLI commands, because @angular/cli is not installed globally. The double dash (--) is needed to pass arguments into the npm script.

步骤三：提交你的修改，并把它们推送到你的代码仓库中。

Step 3: Commit your changes and push them to your repository.

步骤四：注册 Circle CI，并添加你的项目。你的项目将会开始构建。

Step 4: Sign up for Circle CI and add your project. Your project should start building.

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

  Learn more about Circle CI from Circle CI documentation.

为 Travis CI 配置项目link

Configure project for Travis CIlink

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

Step 1: Create a file called .travis.yml at the project root, with the following content:

      
        content_copy
      
      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 代替。

This does the same things as the CircleCI configuration, except that Travis doesn't come with Chrome, so use Chromium instead.

步骤二：提交你的更改，并把它们推送到你的代码仓库。

Step 2: Commit your changes and push them to your repository.

步骤三：注册 Travis CI 并添加你的项目。 你需要推送一个新的提交，以触发构建。

Step 3: Sign up for Travis CI and add your project. You'll need to push a new commit to trigger a build.

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

  Learn more about Travis CI testing from Travis CI documentation.

为 GitLab CI 配置项目link

Configure project for GitLab CIlink

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

Step 1: Create a file called .gitlab-ci.yml at the project root, with the following content:

      
        content_copy
      
      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/。

This configuration caches node_modules/ in the install job and re-uses the cached node_modules/ in the test job.

步骤 2：注册 GitLab CI 并添加你的项目。你需要推送新的提交以触发构建。

Step 2: Sign up for GitLab CI and add your project. You'll need to push a new commit to trigger a build.

步骤 3：提交你的更改并将其推送到你的代码仓库。

Step 3: Commit your changes and push them to your repository.

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

  Learn more about GitLab CI testing from GitLab CI/CD documentation.

为 GitHub Actions 配置项目link

Configure project for GitHub Actionslink

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

Step 1: Create a folder called .github/workflows at root of your project

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

Step 2: In the new folder, create a file called main.yml with the following content:

      
        content_copy
      
      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
    

步骤 3：注册 GitHub 并添加你的项目。你需要推送新的提交以触发构建。

Step 3: Sign up for GitHub and add your project. You'll need to push a new commit to trigger a build.

步骤 4：提交你的更改并将其推送到你的代码仓库。

Step 4: Commit your changes and push them to your repository.

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

  Learn more about GitHub Actions from GitHub Actions documentation.

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

Configure CLI for CI testing in Chromelink

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

While the CLI command ng test is generally running the CI tests in your environment, you might still need to adjust your configuration to run the Chrome browser tests.

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

There is a configuration file for the Karma JavaScript test runner, which you must adjust to start Chrome without sandboxing.

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

We'll be using Headless Chrome in these examples.

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

  In the Karma configuration file, karma.conf.js, add a custom launcher called ChromeHeadlessCI below browsers:

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

现在你可以运行下列带有 --no-sandbox 标志的命令了：

Now you can run the following command to use the --no-sandbox flag:

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

关于测试的更多信息link

More info on testinglink

当你设置准备好测试环境之后，可能会发现以下测试指南很有用。

After you've set up your app for testing, you may find the following testing guides useful.

• 代码覆盖 - 找出你的测试覆盖了多少应用，以及如何指定所需的数量。

  Code coverage—find out how much of your app your tests are covering and how to specify required amounts.

• 测试服务 - 了解如何测试应用中所用的服务。

  Testing services—learn how to test the services your app uses.

• 测试组件的基础知识 - 了解测试 Angular 组件的基础知识。

  Basics of testing components—discover the basics of testing Angular components.

• 组件测试场景 - 了解各种组件测试场景和用例。

  Component testing scenarios—read about the various kinds of component testing scenarios and use cases.

• 测试属性型指令 - 了解如何测试你的属性型指令。

  Testing attribute directives—learn about how to test your attribute directives.

• 测试管道 - 了解测试管道的方法。

  Testing pipes—find out how to test attribute directives.

• 调试测试代码 - 发现测试代码的常见 BUG。

  Debugging tests—uncover common testing bugs.

• 测试实用工具 API - 了解 Angular 的测试特性。

  Testing utility APIs—get familiar with Angular testing features.