JavaScript モジュールを Travis CI でテストして Coveralls でカバレッジを計測してバッヂを貼りたい。

GitHub の README とかによくあるバッヂをペタペタ貼ってみたかったので、CIのテストとカバレッジ計測をやってみました。
Travis CI は OSS (GitHub で public repo ならOKっぽい) なら無料っぽいという事だったので選びました。カバレッジの表示は Codecov の方が良いみたいな記事も見たのですが、ぶっちゃげJavaScript のプロジェクトならカバレッジも Jest で良い感じに表示できるから何でもいいやって感覚で Travis CI から楽につなげそうだったので Coveralls を使ってみました。(GitHubにペタペタ貼りたいって目的なのでまぁ何でもいいのです…)

貼ってみたやつ 引数で何やかんや渡すと一意な文字列として返すだけのモジュールです。

テストを実行するコマンドを作成

package.json にテストコマンドを実行する npm script を作成する
テストには Jest を使っているので Jest を実行するだけ

"scripts": {
  "test": "jest",
  "test:coverage": "jest --coverage"
},

Travis CI にリポジトリを登録する

Sign in with GitHub で GitHub アカウントで登録。
CIでテストしたいリポジトリをONにする。

設定はデフォルトのまま。リポジトリに push した時と PR が push された時に CI が実行される

実行するテストの設定

.travis.yml というファイルを作成してテストの設定を書く

language: node_js
node_js:
  - "11.4.0"
  - "10.16.0"

JavaScript (node.js) で、v11.4.0 と v10.16.0 でテストを行う設定にした。特に設定がない場合 JavaScript (node.js) だと npm test が実行される。
各言語の設定は Travis CI User Documentation の Language-specific Guides を参考に

.travis.yml を add して GitHub にpush する。
Travis のサイトでテストが実行されていればOK。

Coveralls との連携

SIGN IN から GitHub アカウントで登録。
ADD REPOS から対象のリポジトリを探して ON にする。

Travis でテスト後にカバレッジを Coveralls に渡す

Coveralls にカバレッジを渡すライブラリをインストール

$ npm install --save-dev coveralls

Travisからカバレッジを渡す設定を追加
.travis.yml

language: node_js
node_js:
  - "11.4.0"
  - "10.16.0"
script: npm run test:coverage && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls

script キーに Travis で実行するスクリプトを指定。
これでブランチに push すれば Travis でテストを実行してテストのカバレッジが Coveralls で表示されるようになる。

テスト結果とカバレッジのバッヂを README に貼る

メイン。

Travis CI

1. テスト結果のページにあるバッヂをクリック
2. モーダルが表示されるので FORMAT を Markdown を選択
3. RESULT に表示されるコードを README.md にコピペ

Coveralls

1. カバレッジが表示されているページに有るバッジ右上の EMBED をクリック
2. モーダルが表示されるので、Markdown のコードをコピー
3. README.md に貼り付け

　
後は README.md をGitHub に push すればバッヂが表示されている。
おわり。

ポエム

ライセンスのバッヂとかは Shields IO で作るのが簡単でした。

他にもいろいろバッヂ作れるっぽいし、結局は markdown で画像表示してるだけだから好き勝手なバッヂも作れるっぽい！
Markdown だからはてなブログにも貼れる。

お子様なので冷蔵庫感覚でバッヂやシール貼りまくるのが好きなのだ。

cf.

---

[参考]

• Travis CI - Test and Deploy Your Code with Confidence
• Coveralls - Test Coverage History & Statistics
• 【比較まとめ】おすすめのCIツール10選。チームの開発効率をアップするのに最も良いのはどれ？ | Workship MAGAZINE(ワークシップマガジン)
• Travis CIを利用したnpmライブラリの継続的運用 - Qiita
• Travis CIでYarn(pkg)を使う設定 (node.js) - Qiita
• npm ライブラリを travis-ci でテストして Coveralls でカバレッジを計測する - Qiita
• CircleCIとCodecovでGitHubにカバレッジバッジをつけよう！ - VELTRA Engineering - Medium
• GithubとTravisCIで継続的インテグレーションする方法を解説します。|おちゃカメラ。
• クラウドサービスを活用して README にバッジをペタペタ貼る - Qiita

TVアニメ/データカードダス『アイカツフレンズ! 』2ndシーズン挿入歌シングル1「SPECTACLE JOURNEY Vol.1」