この記事を書いてる人: 
tea

javascriptまたはEcmaScript6(ES6)のコードを継続的インテグレーションする方法をまとめてみたいと思います。

develop or drink ?
 develop or drink ?  photo by tea ©

今回は第5回目最終回です。GithubにpushしたリポジトリをTravis CIというサービスを使って自動的にテストを行う手順について触れていきたいと思います。

GithubとTravisCIを連携させると、GithubリポジトリのREADME.mdでテストやカバレッジの結果をバッジ表示させる事ができます。

Githubにテストやカバレッジの結果をバッジで表示
Githubにテストやカバレッジの結果をバッジで表示 ©

前回は、javascriptやES6のプログラム構文(文法)をチェックする方法を解説しました。npmパッケージのeslintを使うと、プログラムがルールで定めた通りに記述されているか否かを機械的に検証することができます。

自身のブログ
javascriptで構文をチェックする方法を解説します。ESLintの簡単な使い方

私自身もテスト初心者ですので、できるだけ平たく説明していきます。もしこれは違う!という内容があればツッコミをお待ちしております。

Ads

目次

継続的インテグレーション(CI)とは何か?

継続的インテグレーション(CIと呼ばれる)は以下のような定義だそうです。

Wikipedia
継続的インテグレーション
(以下引用)継続的インテグレーション、CI(英: continuous integration)とは、主にプログラマーのアプリケーション作成時の品質改善や納期の短縮のための習慣のことである。エクストリーム・プログラミング (XP) のプラクティスの一つで、狭義にはビルドやテスト、インスペクションなどを継続的に実行していくことを意味する[1]

今回の記事で扱うのは、wikipediaで説明されている中でも、テストを継続的に実行する方法に限定して触れていきたいと思います。

テストを継続的かつ自動的に行うためには、テストプログラムを実行できるサーバーが必要になります。そこで活用するのが、GithubとTravisCIです。

Github(ギットハブ)は、プログラムを共有するWebサービスです。TravisCI(トラビスシーアイ)は継続的インテグレーションを支援するサービスの一つです。Githubにプログラムをアップしたタイミングで、TravisCIではテストなどのプログラムを実行させる事ができます。

Ads

GithubとTravisCIを使ってテストする手順

ということで、GithubとTravisCIを使って継続的インテグレーション、つまり自動テストさせる手順をまとめてみたいと思います。手順は次の通りです。

  1. Githubのアカウントを作成
  2. 公開したいプログラムをGithubの新規リポジトリにpush
  3. TravisCIにGithubアカウントでサインイン
  4. TravisCIを使うGithubリポジトリを選択
  5. COVERALLSにGithubアカウントでサインイン
  6. COVERALLSを使うGithubリポジトリを選択
  7. Gtihubのリポジトリにpushする.travis.ymlやテストプログラムを配置
  8. 再びGithubにプログラムをpush
  9. pushされたタイミングでTravisCIがテストを実行される

手順1と2は、Githubの通常の使い方と同様です。Githubの使い方については下記の記事が参考になりますので、以下をご覧ください。

Qiita
【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践~とりあえず一緒に動かしてみようぜ!~

当記事では、3以降の手順を解説していきたいと思います。まずは、次項のサンプルコードを入手しておきましょう。

サンプルプロジェクトをダウンロード

それではまず、サンプルコードをダウンロードしましょう。

 サンプルコード

サンプルコードはgithubにアップしていますので、そちらをご覧ください。

まずは、サンプルコードを実行するプロジェクトjs-test-practiceディレクトリを作成し、npmパッケージをインストールします。

bash
1
2
3
4
5
$ git clone https://github.com/tea3/js-test-practice.git
$ mkdir js-test-practice
$ cd js-test-practice
$ npm init
$ npm install
 save-devオプションって何?

npm installコマンドの--save-devオプションは、開発で使うパッケージという意味合いを示すために指定しています。本体のプログラムでは使用せず、テストなど本体のプログラムで使わないパッケージがあれば、このオプションを指定してインストールしましょう。

また、node.jsやnpm、そしてコマンドラインについてご不明な場合は以下をご覧ください。

TravisCIにサインイン

続いてTravisCIにサインインします。

TravisCI
https://travis-ci.org/

サインインにはGithubのアカウントを使いますので、Sign in with githubを選びます。

Travis CIにGithubアカウントでサインイン
Travis CIにGithubアカウントでサインイン ©

Githubアカウントで認証します。

認証する
認証する ©

TravisCIを使うGithubリポジトリを選択

続いて、TravisCIを使用したいGithubリポジトリを選択します。TravisCIの右上にあるアカウントアイコンを選択し、Accountsを選択します。

Accountsを選択すると、Githubに公開しているリポジトリが下部にリスト表示されます。リストの中から、TravisCIを使いたいリポジトリを選択し、TravisCIを有効にします。

リポジトリのTravisCIを有効にする
リポジトリのTravisCIを有効にする ©

上記でTracisCIを有効にしているのは、サンプルコードとしても前述で紹介したtea3/js-test-practiceリポジトリです。

COVERALLSにGithubアカウントでサインイン

続いて、カバレッジの結果を表示するCOVERALLSというサービスにもサインインしておきます。

COVERALLS
https://coveralls.io/

COVERALLSのトップページの右上にあるSIGN INでサインインします。

COVERALLSにサインインする
COVERALLSにサインインする ©

更に、どのようにサインインするか聞かれるので、Githubアカウントでサインインします。

COVERALLSにGithubアカウントでサインインする
COVERALLSにGithubアカウントでサインインする ©

こちらもTravisCIとほとんど同じ流れです。Githubアカウントで認証します。

Githubアカウントで認証する
Githubアカウントで認証する ©

COVERALLSを使うGithubリポジトリを選択

次に、COVERALLSで使うGithubリポジトリを選択します。メニュー左側からADD REPOSを選択します。

ADD REPOSでリポジトリを選択する画面へ遷移する
ADD REPOSでリポジトリを選択する画面へ遷移する ©

使うGithubリポジトリを選択する
使うGithubリポジトリを選択する ©

以上の流れで、COVERALLSからカバレッジレポートが確認できるようになります。

.travis.ymlやテストプログラムを配置

前述までの流れで、TravisCIは有効になりました。続いてTravisCIで実行するプログラムを.travis.ymlというファイルで定義します。

ローカルにあるプロジェクトに.travis.ymlファイルを作成し、以下を記述します。

.travis.yml
1
2
3
4
5
6
7
8
9
10
language: node_js
node_js:
- "8"
script:
- npm run eslint
- npm run test-cov
after_script:
- npm install coveralls
- cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

上記の.travis.ymlでは、次のような内容を定義しています。

  • language:

    TravisCIで使うプログラム言語を指定します。サンプルコードではnode.jsを使います。

  • node_js:

    TravisCIで実行するnode.jsのバージョンを定義します。サンプルではnode.js v8を使用します。

  • script:

    travisCIで実行したいプログラムをここで定義します。サンプルでは、第2回第3回目で解説したテストとカバレッジを行う命令npm run test-covと、第4回目で解説した構文チェックを行う命令npm run eslintを定義しています。

  • after_script:

    TravisCIでプログラムを実行した後で、行いたい処理をここで定義します。サンプルでは、カバレッジの結果となるカバレッジレポートやバッジをTravisCIやGithubに反映させるための処理を書いています。カバレッジレポート作成にはcoverallsというnode.js製のnpmパッケージを使います。

また、ローカルにあるプロジェクトにはテストのコードも用意します。手順は第2回第3回目第4回目をご覧ください。

自身のブログ
javascriptでプログラムのテストを行う方法を解説します。mocha・power-assertの簡単な使い方
javascriptでテストカバレッジ(網羅率)を取得する方法を解説します。istanbulの簡単な使い方
javascriptで構文をチェックする方法を解説します。ESLintの簡単な使い方

再びGithubにプログラムをpush

続いてローカルのプログラムをGithubのリポジトリにプッシュします。リモートリポジトリが無い場合は、予めGithubのリポジトリを登録しておきます。

bash
1
2
3
$ git remote -v
$ git remote add origin https://your-github-repository.git
$ git push origin master

上記コマンドでは、

  1. $ git remote -vで何も返ってこない場合
  2. $ git remote add origin githubリポジトリでリポジトリのURLを登録
  3. 登録したGithubリポジトリにプッシュ

という処理を行っています。

Ads

pushされたタイミングでTravisCIがテストを実行される

続いて、Githubのリポジトリを見てみましょう。リポジトリでcommits(コミット履歴)を開きます。

githubリポジトリのコミット履歴を開く
githubリポジトリのコミット履歴を開く ©

GithubリポジトリにPushした後で、TravisCIが動作していれば、下図のようにテストやカバレッジの結果がアイコンで表示されます。チェックマークが表示されれば、テストプログラムやカバレッジが問題なく通った事を示しています。

コミット履歴にテストやカバレッジの結果が表示される
コミット履歴にテストやカバレッジの結果が表示される ©

上図のように、Detailsでテストやカバレッジの詳細レポートを見てみましょう。

まずは、TravisCIによるテストと構文チェックの結果を確認してみたいと思います。TravisCIのDetailsを開くと、下図ようにTravisCIで実行されたプログラムのログが確認できます。

TravisCIのプログラム・ログ
TravisCIのプログラム・ログ ©

ログの後半を下図のように確認していくと、第3回目第4回目で書いたテストプログラムや構文チェックが実行されているのが分かります。

実行結果はローカル環境で行った結果と同じです。

TravisCIのプログラム・ログ後半
TravisCIのプログラム・ログ後半 ©

続いて、カバレッジ・レポートも見てみましょう。Githubのコミット履歴から、coverallsのDetailsを開きます。

コミット履歴にテストやカバレッジの結果が表示される
コミット履歴にテストやカバレッジの結果が表示される ©

こちらも第3回目で解説したように、ローカル環境でカバレッジ・レポートを確認した内容と同じものが表示されています。

カバレッジレポートが表示される
カバレッジレポートが表示される ©

プログラムごとにカバレッジの結果が確認できる
プログラムごとにカバレッジの結果が確認できる ©

以上のように、テストとカバレッジが動作していれば、作業は完了です。

まとめ

という事で、今回はjavascriptやES6をTravis CIで継続的にインテグレーションする手法を分かりやすくまとめました。

冒頭で触れた通り、GithubとTravisCIを連携させると、GithubリポジトリのREADME.mdでテストやカバレッジの結果をバッジ表示させる事ができます。

Githubにテストやカバレッジの結果をバッジで表示
Githubにテストやカバレッジの結果をバッジで表示 ©

README.md
1
2
3
以下のコードでバッジ表示できる
[![Build Status](https://travis-ci.org/tea3/js-test-practice.svg?branch=master)](https://travis-ci.org/tea3/js-test-practice)
[![Coverage Status](https://img.shields.io/coveralls/tea3/js-test-practice.svg)](https://coveralls.io/r/tea3/js-test-practice?branch=master)

Travis CIを活用すると、Githubへリポジトリをpushするたびに、テストを自動で実行させる事ができますので、ぜひ参考にしてください。

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

GithubとTravisCIで継続的インテグレーションする方法を解説します。 - TPB
https://photo-tea.com/p/17/javascript-test-how-to-5/

 おすすめ記事
Ads
 作例掲載