在容器中執行 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 測試工作流程

後續步驟

接下來，你將學習如何使用 GitHub Actions 設定 CI/CD 管道，以在容器化環境中自動構建和測試你的 Angular 應用程式。這確保了你的程式碼在每次推送或拉取請求時都經過驗證，從而保持了開發工作流程的一致性和可靠性。

使用 GitHub Actions 自動化你的構建 »