かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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 GitHubGitHub アカウントで登録。
CIでテストしたいリポジトリをONにする。
Travas CI settings
設定はデフォルトのまま。リポジトリに 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 にコピペ

f:id:kikiki-kiki:20190717164340p:plain

Coveralls

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

f:id:kikiki-kiki:20190717164942p:plain

 
後は README.md をGitHub に push すればバッヂが表示されている。 f:id:kikiki-kiki:20190717165342p:plain
おわり。

ポエム

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

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

ソレイユ 星宮いちご 霧矢あおい 紫吹蘭

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

cf.


[参考]

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

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