顯示 JavaScript 項目的構建狀態和測試覆蓋率標誌

最近，我為我一直在做的一個項目寫了很多測試，在完成所有這些工作之後，我想在我的 repo 上放一些漂亮的徽章。

我有一個徽章顯示我的構建已通過（希望如此），另一個顯示我的代碼覆蓋率。

步數

• 在您的項目中設置 Jest 並安裝 Coveralls
• 創建一個 Travis CI 帳戶（與 GitHub 集成），啟用 repo
• 創建一個 Coveralls 帳戶（與 GitHub 集成），啟用 repo
• 創建一個travis.yml 和 coveralls.yml
• 推送和部署代碼

第 1 步 - 設置 Jest 和工作服

本教程假設您已經基本熟悉如何設置 Jest 來測試您的 JavaScript 代碼，並且已經編寫了一些測試。如果沒有，只需將 Jest 在本地安裝到您的開發依賴項中，然後運行 jest 命令。我們還將安裝工作服，我們將使用它來託管覆蓋率報告。

npm i --save-dev jest coveralls

jest

==> jest
 PASS  tests/instructions.test.js
 PASS  tests/cpu.test.js

Test Suites: 2 passed, 2 total
Tests:       97 passed, 97 total
Snapshots:   0 total
Time:        2.867s, estimated 3s
Ran all test suites.

第 2 步 - 創建 Travis CI 帳戶

Travis CI 是一個 CI/CD（持續集成/持續開發）工具。每次你推送到 GitHub 時，它都會運行你的代碼，並確定構建是否通過，以及其他任務。轉到 travis-ci.org 並創建一個帳戶。將其與您現有的 GitHub 帳戶集成。找到你想要顯示構建狀態的倉庫並打開它。

頁面特定的 URL 應該是 https://travis-ci.org/taniarascia/chip8。

第 2 步 - 創建工作服帳戶

工作服是一項幫助您跟踪覆蓋範圍的服務。轉到 coveralls.io，創建一個帳戶並與您的 GitHub 帳戶集成，然後在您選擇的 repo 上啟用 Coveralls。

頁面特定的 URL 應該是 https://coveralls.io/github/taniarascia/chip8。

第 3 步 - 創建腳本

創建一個名為 coveralls 的腳本 在你的 package.json .這將通過 Jest 生成覆蓋範圍，然後部署到 Coveralls。

"scripts": {
  "test": "jest",
  "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls"
}

配置 Jest 覆蓋率（可選）

Jest 會在沒有配置的情況下自動配置一些像樣的東西，但是如果你想特別包含或排除一些文件，你可以通過將此配置添加到 package.json 來實現 .

"jest": {
  "collectCoverageFrom": [
      "**/*.js",
      "!data/keyMap.js",
      "!/node_modules/",
  ]
}

第 4 步 - 創建配置

現在你必須創建一個 .travis.yml 設置你的 Travis 配置和一個 .coveralls.yml 設置您的工作服令牌。

這是我的 travis.yml 看起來像：我正在設置語言、節點的版本，並告訴它要運行哪個附加腳本。

language: node_js
node_js:
  - '11'
script:
  - npm run coveralls

coveralls.yml 文件將僅包含他們在您創建帳戶並分配存儲庫時提供給您的令牌。

repo_token: YOUR_TOKEN_HERE

第 4 步 - 部署代碼並顯示徽章

僅僅為了獲得一些徽章似乎需要做很多工作，但總是很高興知道您的項目的狀態和覆蓋範圍。這是兩個徽章的代碼。 Travis 和 Coveralls 都將為這些提供嵌入鏈接。

[![Build Status](https://travis-ci.org/<your-account>/<your-repo>.svg?branch=master)](https://travis-ci.org/taniarascia/chip8)

[![Coverage Status](https://coveralls.io/repos/github/<your-account>/<your-repo>/badge.svg?branch=master)](https://coveralls.io/github/taniarascia/chip8?branch=master)

現在，一旦您使用配置文件和 README 標記將代碼推送到 GitHub，它應該將構建發送給 Travis，而 Travis 應該將覆蓋範圍發送給 Coveralls。

就這樣！如果一切按計劃進行，您應該有一個合格的構建、代碼覆蓋率和一些功能徽章。