閱讀(1.6k) 書簽贊(0) 我要糾錯

Angular 測試-介紹

2022-07-07 09:59 更新

測試

測試你的 Angular 應(yīng)用可以幫助你檢查此應(yīng)用是否正常運(yùn)行。

如果你要試用本指南中所講的應(yīng)用，請在瀏覽器中運(yùn)行它或下載并在本地運(yùn)行它。

建立環(huán)境

Angular CLI 會下載并安裝試用 Jasmine 測試框架測試 Angular 應(yīng)用時所需的一切。

你使用 CLI 創(chuàng)建的項(xiàng)目是可以立即用于測試的。運(yùn)行 CLI 命令 ?ng test? 即可：

ng test

?ng test? 命令在監(jiān)視模式下構(gòu)建應(yīng)用，并啟動 karma 測試運(yùn)行器。

它的控制臺輸出一般是這樣的：

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 運(yùn)行了三個測試，而且這些測試都通過了。

它還會打開 Chrome 瀏覽器并在“ Jasmine HTML 報(bào)告器”中顯示測試輸出，就像這樣。

大多數(shù)人都會覺得瀏覽器中的報(bào)告比控制臺中的日志更容易閱讀?？梢渣c(diǎn)擊某一行測試，來單獨(dú)重跑這個測試，或者點(diǎn)擊一行描述信息來重跑所選測試組（“測試套件”）中的那些測試。

同時，?ng test? 命令還會監(jiān)聽這些變化。

要查看它的實(shí)際效果，就對 ?app.component.ts? 做一個小修改，并保存它。這些測試就會重新運(yùn)行，瀏覽器也會刷新，然后新的測試結(jié)果就出現(xiàn)了。

配置

CLI 會為你生成 Jasmine 和 Karma 的配置文件。

不過也可以通過編輯 ?src/? 目錄下的 ?karma.conf.js? 和 ?test.ts? 文件來微調(diào)很多選項(xiàng)。

?karma.conf.js? 文件是 karma 配置文件的一部分。CLI 會基于 ?angular.json? 文件中指定的項(xiàng)目結(jié)構(gòu)和 ?karma.conf.js? 文件，來在內(nèi)存中構(gòu)建出完整的運(yùn)行時配置。

其他測試框架

你還可以使用其它的測試庫和測試運(yùn)行器來對 Angular 應(yīng)用進(jìn)行單元測試。每個庫和運(yùn)行器都有自己特有的安裝過程、配置項(xiàng)和語法。

測試文件名及其位置

查看 ?src/app? 文件夾。

CLI 為 ?AppComponent ?生成了一個名叫 ?app.component.spec.ts? 的測試文件。

測試文件的擴(kuò)展名必須是 ?.spec.ts?，這樣工具才能識別出它是一個測試文件，也叫規(guī)約（spec）文件。

?app.component.ts? 和 ?app.component.spec.ts? 文件位于同一個文件夾中，而且相鄰。其根文件名部分（?app.component?）都是一樣的。

請?jiān)谀愕捻?xiàng)目中對任意類型的測試文件都堅(jiān)持這兩條約定。

把測試規(guī)約（spec）文件放在它要測試的文件旁邊

最好把單元測試規(guī)約文件放到與它們測試的應(yīng)用源碼文件相同的文件夾中：

這些測試很容易找到。
你一眼就能看到應(yīng)用中是否缺少一些測試。
臨近的測試可以揭示一個部件會如何在上下文中工作。
當(dāng)移動源代碼時（在所難免），你不會忘了同時移動測試。
當(dāng)重命名源文件時（在所難免），你不會忘了重命名測試文件。

把 spec 文件放到 test 目錄下

應(yīng)用的集成測試規(guī)范可以測試跨文件夾和模塊的多個部分之間的交互。它們并不屬于任何一個特定的部分，所以把它們放在任何一個文件旁都很不自然。

最好在 ?tests ?目錄下為它們創(chuàng)建一個合適的文件夾。

當(dāng)然，用來測試那些測試助手的規(guī)約也位于 ?test ?目錄下，緊挨著相應(yīng)的測試助手文件。

建立持續(xù)集成環(huán)境

避免項(xiàng)目出 BUG 的最佳方式之一，就是使用測試套件。但是很容易忘了一直運(yùn)行它。持續(xù)集成（CI）服務(wù)器讓你可以配置項(xiàng)目的代碼倉庫，以便每次提交和收到 Pull Request 時就會運(yùn)行你的測試。

已經(jīng)有一些像 Circle CI 和 Travis CI 這樣的付費(fèi) CI 服務(wù)器，你還可以使用 Jenkins 或其它軟件來搭建你自己的免費(fèi) CI 服務(wù)器。雖然 Circle CI 和 Travis CI 是收費(fèi)服務(wù)，但是它們也會為開源項(xiàng)目提供免費(fèi)服務(wù)。你可以在 GitHub 上創(chuàng)建公開項(xiàng)目，并免費(fèi)享受這些服務(wù)。當(dāng)你為 Angular 倉庫貢獻(xiàn)代碼時，就會自動用 Circle CI 和 Travis CI 運(yùn)行整個測試套件。

本文檔解釋了如何配置你的項(xiàng)目，來運(yùn)行 Circle CI 和 Travis CI，以及如何修改你的測試配置，以便能在這兩個環(huán)境下用 Chrome 瀏覽器來運(yùn)行測試。

為 Circle CI 配置項(xiàng)目

在項(xiàng)目的根目錄下創(chuàng)建一個名叫 ?.circleci? 的目錄。
在這個新建的目錄下，創(chuàng)建一個名為 ?config.yml? 的文件，內(nèi)容如下：

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 來運(yùn)行 CLI 命令，因?yàn)?nbsp;@angular/cli 并沒有裝到全局。要把參數(shù)傳給 npm 腳本，這個單獨(dú)的雙中線（--）是必須的。

提交你的修改，并把它們推送到你的代碼倉庫中。
注冊 Circle CI，并添加你的項(xiàng)目。你的項(xiàng)目將會開始構(gòu)建。

欲知詳情，參閱 Circle CI 文檔。

為 Travis CI 配置項(xiàng)目

在項(xiàng)目根目錄下創(chuàng)建一個名叫 ?.travis.yml? 的文件，內(nèi)容如下：

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 并添加你的項(xiàng)目。你需要推送一個新的提交，以觸發(fā)構(gòu)建。

欲知詳情，參閱 Travis CI 文檔。

為 GitLab CI 配置項(xiàng)目

在項(xiàng)目根目錄下創(chuàng)建一個名為 ?.gitlab-ci.yml? 的文件，內(nèi)容如下：

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 ?作業(yè)下緩存 ?node_modules/?，并在 ?test ?作業(yè)中重新使用緩存的 ?node_modules/?。

注冊 GitLab CI 并添加你的項(xiàng)目。你需要推送新的提交以觸發(fā)構(gòu)建。
提交你的更改并將其推送到你的代碼倉庫。

從 GitLab CI / CD 文檔中了解有關(guān) GitLab CI 測試的更多信息。

為 GitHub Actions 配置項(xiàng)目

在項(xiàng)目的根目錄下創(chuàng)建一個名叫 ?.github/workflows? 的文件夾。
在新文件夾中，創(chuàng)建一個名為 ?main.yml? 的文件，其內(nèi)容如下：

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 并添加你的項(xiàng)目。你需要推送新的提交以觸發(fā)構(gòu)建。
提交你的更改并將其推送到你的代碼倉庫。

從 GitHub Actions 文檔中了解有關(guān) GitHub Actions 的更多信息。

在 Chrome 中配置 CLI 以進(jìn)行 CI 測試

當(dāng)你要用 CLI 命令 ng test 在自己的環(huán)境中運(yùn)行 CI 測試時，你可能需要再調(diào)整一下配置，以運(yùn)行 Chrome 瀏覽器測試。

這個配置文件是給 Karma（直譯 "報(bào)應(yīng)"）測試運(yùn)行器使用的，你必須改為不用沙箱的 Chrome 啟動方式。

這個例子中我們將使用無頭 Chrome。

在 Karma 配置文件 ?karma.conf.js? 中，瀏覽器的緊下方，添加自定義的啟動器，名叫 ChromeNoSandbox。

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

現(xiàn)在，運(yùn)行下列帶有 ?--no-sandbox? 標(biāo)志的命令：

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

注意：
目前，如果你正運(yùn)行在 Windows 中，還要包含 ?--disable-gpu? 標(biāo)志。參閱 crbug.com/737678。

以上內(nèi)容是否對您有幫助：

← Angular HTTP客戶端

Angular 代碼覆蓋率 →

寫筆記

我要補(bǔ)充