[Guide] 發佈 npm 套件 - 從手動到自動(7):Coveralls 的測試覆蓋率與 README 中的標章(code test coverage badge)
keywords: deploy
, publish
, release
, CLI
, npm
, package.json
這篇將會是這個系列文章的最後一篇,到目前為止已經可以在「把專案推到 github 上」後,自動在 CI 上幫執行測試、打包專案、更新版號、建立 CHANGELOG、發佈到 npm、產生 commit 和在 Github 上產生 release tags。
最後一篇則要來說明 README 中常使用到的標章(badge)。先來看一些常見的標章,最後再說明如何產生相當重要的「程式碼測試覆蓋率(code test coverage)」標章吧!
在 README 中加入常見的 badge
Travis CI 的 badge
一般 README 中的 badge 其實就是單純套用在 markdown 中的圖檔,而許多不同的服務會提供各自的 badge 讓大家使用,以 Travis CI 來說,在官網的文件 Embedding Status Images 即有說明套用的方式,只需點選 Travis CI 專案中的 badge 即會顯示嵌入 markdown 的寫法:
[![Build status](https://badgen.net/travis/pjchender/react-use-opentok)](https://travis-ci.com/pjchender/react-use-opentok)
透過 shields.io 取得各種不同 badge
除了 Travis CI 的標章之外,在 shields.io 上也提供了很多不同的 badge 可以自己套用:
其中像是 npm 上套件的版本:
只需在 README.md
中加入:
# 記得要把連結改成自己的專案
[![version](https://img.shields.io/npm/v/@pjchender/function-benchmarker.svg)](https://www.npmjs.com/package/@pjchender/function-benchmarker)
透過 Coveralls 產生測試覆蓋率標章(code test coverage badge)
由 Jest 檢視程式碼測試覆蓋率
程式碼的測試覆蓋率標章(code test coverage badge)指的是在整個專案中有多少百分比的程式碼有撰寫對應的測試,以我們在 @pjchender/function-benchmarker 中使用的 Jest 來說,只要在 command line 執行:
$ npm run test -- --coverage
就會幫我們產生對應的測試覆蓋率結果:
但如果我們想要在 README 中產生測試覆蓋率的標章就沒這麼簡單了。一般來說同樣會需要一個第三方的服務幫我們執行測試,這個服務會再把測試執行的結果保存一份下來,接著就可以從這個第三方的服務取得 badge。
透過 Coveralls 保存測試結果並產生標章
其中 Coveralls 是相當常見用來執行測試的第三方服務,並且支援許多持續整合的服務。
因為整個流程有些繁瑣,先來簡單瞭解一下 Coverall 的流程和作用的時機點:
- 先註冊 Coverall 的帳號,並與 Github 連動,選擇要加入 Coverall 中的 Github 專案
- 在專案中安裝 Coverall 的 npm 套件,並在專案的
packages.json
設定執行該套件的指令 - 在 Travis CI 的環境變數中需要先設定 Coverall 的 token,如此才能在 Travis CI 執行的過程中通知 Coverall 執行的結果
- 修改
.travis.yml
的檔案,讓它在持續整合的過程中可以去執行coveralls
的指令 - 推上 Github 觸發 CI
現在就讓我們一步一步開始吧!
註冊 Coveralls 帳號
要使用這個服務一樣需要先到 Coveralls 的官方網站註冊一個帳號,因為我們要和 Github 上的 repository 連動,所以可以選擇使用 Github 登入。
與 Github 連動並加入對應的 Repository
接著在最左邊的地方可以看到「ADD REPOS」的加號:
然後選擇想要加入 Coveralls 的 Github 專案,把它「打開(ON)」: