在容器中运行 Angular 测试

先决条件

完成本指南的所有先前章节，从容器化 Angular 应用程序开始。

概述

测试是开发过程中的关键部分。在本节中，你将学习如何

使用 Angular CLI 在 Docker 容器内运行 Jasmine 单元测试。
使用 Docker Compose 隔离你的测试环境。
确保本地和基于容器的测试之间的一致性。

docker-angular-sample 项目预先配置了 Jasmine，因此你可以快速开始而无需额外设置。

在开发过程中运行测试

docker-angular-sample 应用程序包含一个位于以下位置的示例测试文件

$ src/app/app.component.spec.ts

此测试使用 Jasmine 验证 AppComponent 逻辑。

步骤 1：更新 compose.yaml

在你的 compose.yaml 文件中添加一个名为 angular-test 的新服务。此服务允许你在隔离的、容器化的环境中运行你的测试套件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
services:
  angular-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

  angular-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-angular-sample
    ports:
      - "8080:8080"

  angular-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: ["npm", "run", "test"]

angular-test 服务重用用于开发的相同 Dockerfile.dev，并覆盖默认命令以使用 npm run test 运行测试。此设置确保了与你的本地开发配置匹配的一致测试环境。

完成以上步骤后，你的项目目录应包含以下文件

├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

步骤 2：运行测试

要在容器内执行你的测试套件，请从项目根目录运行以下命令

$ docker compose run --rm angular-test

此命令将

启动在你的 compose.yaml 文件中定义的 angular-test 服务。
使用与开发相同的环境执行 npm run test 脚本。
在测试完成后，使用docker compose run --rm 命令自动删除容器。

你应该看到类似于以下内容的输出

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.529 s

注意
有关 Compose 命令的更多信息，请参阅Compose CLI 参考。

摘要

在本节中，你学习了如何使用 Jasmine 和 Docker Compose 在 Docker 容器内为你的 Angular 应用程序运行单元测试。

你完成了什么

在 compose.yaml 中创建了 angular-test 服务以隔离测试执行。
重用了开发 Dockerfile.dev 以确保开发和测试环境之间的一致性。
使用 docker compose run --rm angular-test 在容器内运行了测试。
确保了跨环境的可靠、可重复的测试，而无需依赖你的本地机器设置。

探索官方参考资料和最佳实践以提升你的 Docker 测试工作流程

Dockerfile 参考 – 理解所有 Dockerfile 指令及语法。
编写 Dockerfile 的最佳实践 – 编写高效、可维护且安全的 Dockerfile。
Compose 文件参考 – 学习在 compose.yaml 中配置服务的完整语法和可用选项。
docker compose run CLI 参考 – 在服务容器中运行一次性命令。

后续步骤

接下来，你将学习如何使用 GitHub Actions 设置 CI/CD 管道，以在容器化环境中自动构建和测试你的 Angular 应用程序。这确保了你的代码在每次推送或拉取请求时都经过验证，从而保持了开发工作流程的一致性和可靠性。