將 Travis CI 和 Codecov 整合至 Node.js 專案

最近試著將自己的在 GitHub 上 open source projects 整合 Travis CI 與 Codecob 服務，在此記錄一下實踐的過程。

Travis CI

Travis CI 是許多被託管在 GitHub 上的開源專案使用的持續整合服務。其設定非常簡單，只需要幾個步驟：

  • 使用 GitHub 帳號登入 Travis CI。
  • Travis CI 會同步你在 GitHub 上的 public 專案，請選擇要使用的 Travis CI 的 repository 。
  • 在選擇的專案根目錄下新增 .travis.yml 檔案，來定義 CI 流程。

完成以上步驟後，只要有新的 commit 提交到 GitHub 上，就會觸發 Travis CI，以下是一個簡單的例子：

1
2
3
4
5
6
7
8
9
10
11
12
language: node_js
node_js:
  - "7"
  - "6"
  - "5"
  - "4"
install:
  - npm install
script:
  - npm test
after_success:
  - npm run coverage

更多的設定內容可以參考官方文件。

這份設定檔聲明我們測試的環境為 Node.js，並指定版本 v4 ~ v7 。在執行 build 前，會運行 npm install 來安裝該專案的依賴模組，然後執行 npm test 跑測試腳本。在定義的各版本環境皆需通過測試，否則即 build 失敗。build 完成後，則執行 npm run coverage ，整合測試覆蓋率服務。

Codecov

代碼覆蓋率 (code coverage) 是評估程式原始碼被測試的比例和程度的指標。Coveralls 是許多 GitHub 上的開源專案使用的測試覆蓋率服務，不過這裡要介紹的是另外一套 Codecov ，更為簡單易用：

  • 使用 GitHub 帳號登入 Codecov。
  • Codecov 會同步你在 GitHub 上的 public 專案，請選擇要使用的 Codecov 的 repository 。
  • 將測試結果上傳至 Codecov 。

在 Node.js 環境下我們需要安裝該模組至專案：

1
$ npm install codecov --save-dev

我們使用 nyc 提供測試報告，這是基於 istanbul 的代碼覆蓋率工具，支援 tap 、 mocha 、 AVA 等常用的 JavaScript 測試框架。

在 package.json 中定義：

1
2
3
4
5
6
{
   "scripts": {
     "test": "nyc mocha test/**/*.js",
     "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov"
   }
}

我們定義了兩個 script ，執行 npm test 使用 mocha 可運行測試並顯示測試報告， npm run coverage 則將測試報告上傳至 Codecov。然後在 .travis.yml 檔案中加入：

1
after_success: npm run coverage

如此，當 Travis CI 完成測試腳本並 build 成功後，就會將代碼覆蓋率報告上傳至 Codecov。

Adding Badges to Your Project

Travis CI 與 Codecov 都有提供狀態圖示 (badge) ，我們可以在該平台上找到提供的語法加入 README.md 檔案。不過 Codecov 的提供的 badge 顯示為 codecov，想要顯示 coverage 可另使用 Shields.io 提供的服務。

以下是使用 Shields.io 提供的 Travus CI 與 Codecov 狀態圖示，將 USER 與 REPO 換成您的 GitHub 帳號與 repository 名稱，加入 README.md 檔案中即可：

1
2
3
4
5
6
7
[![Build Status][travis-image]][travis-url]
[![Coverage Status][codecov-image]][codecov-url]

[travis-image]: https://img.shields.io/travis/USER/REPO.svg
[travis-url]: https://travis-ci.org/USER/REPO
[codecov-image]: https://img.shields.io/codecov/c/github/USER/REPO.svg
[codecov-url]: https://codecov.io/gh/USER/REPO

然後我們就可以在專案的 GitHub 頁面上看到顯示的 build 與 coverage 狀態：