[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。