閱讀(1.4k) 書(shū)簽贊(0) 我要糾錯(cuò)

Angular 測(cè)試-介紹

2022-07-07 09:59 更新

測(cè)試

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

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

建立環(huán)境

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

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

ng test

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

它的控制臺(tái)輸出一般是這樣的：

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)行了三個(gè)測(cè)試，而且這些測(cè)試都通過(guò)了。

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

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

同時(shí)，?ng test? 命令還會(huì)監(jiān)聽(tīng)這些變化。

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

配置

CLI 會(huì)為你生成 Jasmine 和 Karma 的配置文件。

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

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

其他測(cè)試框架

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

測(cè)試文件名及其位置

查看 ?src/app? 文件夾。

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

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

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

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

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

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

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

把 spec 文件放到 test 目錄下

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

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

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

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

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

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

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

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

在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名叫 ?.circleci? 的目錄。
在這個(gè)新建的目錄下，創(chuàng)建一個(gè)名為 ?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

該配置會(huì)緩存 node_modules/ 并使用 npm run 來(lái)運(yùn)行 CLI 命令，因?yàn)?nbsp;@angular/cli 并沒(méi)有裝到全局。要把參數(shù)傳給 npm 腳本，這個(gè)單獨(dú)的雙中線(xiàn)（--）是必須的。

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

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

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

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名叫 ?.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 代替。

提交你的更改，并把它們推送到你的代碼倉(cāng)庫(kù)。
注冊(cè) Travis CI 并添加你的項(xiàng)目。你需要推送一個(gè)新的提交，以觸發(fā)構(gòu)建。

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

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

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 ?.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

這種配置會(huì) 在 ?install ?作業(yè)下緩存 ?node_modules/?，并在 ?test ?作業(yè)中重新使用緩存的 ?node_modules/?。

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

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

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

在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名叫 ?.github/workflows? 的文件夾。
在新文件夾中，創(chuàng)建一個(gè)名為 ?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

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

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

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

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

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

這個(gè)例子中我們將使用無(wú)頭 Chrome。

在 Karma 配置文件 ?karma.conf.js? 中，瀏覽器的緊下方，添加自定義的啟動(dòng)器，名叫 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)容是否對(duì)您有幫助：

← Angular HTTP客戶(hù)端

Angular 代碼覆蓋率 →

寫(xiě)筆記

我要補(bǔ)充