ionicのテスト環境を調べた

まえがき

ionicのテスト環境を構築する必要があったので、JavaScript歴1ヶ月の私が調べた内容をここに公開します。

そもそもionicのテストって…

ionicではなくAngularJSとしてテストする

ionicのサイトやフォーラムにはionic独自の情報はなく、フォーラムなどを参照すると、Testing e2e - Ionic Forumのように「AngularJSとしてテストしてくれ」というのが中の人の回答らしいので、AngularJSのテストについて調べることにしました。

ツールとして何を使うか？

AngularJS公式の情報では、Karma,Jasmine,Protractor

ユニットテスト

AngularJS: Developer Guide: Unit Testingによると、テスト群をJasmineで構築して、それをKarmaで実行する。モックが必要であればngMockをつかう、といった感じでしょうか。
Jasmineは「テスティングフレームワーク」とよばれ、テストコードを実行してその結果を得るものです。
Karmaは「テストランナー」とよばれ、ブラウザを起動し、Jasmine等で提供されたテストを実行し、結果のレポートまでを行う事が仕事です。　　

e2eテスト

AngularJS: Developer Guide: E2E TestingではE2Eテストについて紹介されています。事実上、UIテストです。Protractorを使えとあります。

それぞれの設定内容

それぞれの詳細は別記事を立てます。概要は以下の通り。

Karma

先に、Karmaがテストで使うブラウザとテスティングフレームワークの種類を決めておきます。
npm install karma --save-devでインストールして、karma initで設定ファイルkarma.conf.jsを生成します。
karma initでは、テストを動作させるブラウザ、テスティングフレームワーク、テストコードの場所などを聞かれるので、質問に答えると設定ファイルがに生成されます。テストコードの場所などは後で編集したほうが良いでしょう。
次に、ブラウザとテスティングフレームワークに応じたプラグイン等をnpm install --save-dev karma-chrome karma-jasmineのような感じでインストールすればOk。

Protractor

npm install -g protractorでインストールして、protractor.conf.jsへ設定内容を記述する。
設定ファイルへはテストコードの場所、テスティングフレームワーク、Seleniumサーバーのアドレスなどを指定します。

どうやって起動するか？

KarmaもProtractorも直接起動できなくもないですが、与えるパラメータなどがあるので、GulpやGruntなどのビルドツールの力を借りて起動します。特にProtractorについては、テスト対象のブラウザ起動とテストの実行、設定によっては更にコネクターの起動など、手作業では煩わしいので必須です。

Gulpならgulpfile.jsへタスクとして書きます。
更に,package.jsonのscriptsとして登録してnpm run testのように起動させたりもできます。
詳細は別記事を立てます。

何で書くか？

テストコード自体はJavaScriptですが、更にテスティングフレームワークをどれにするか、です。KarmaもProtractorも任意のものが選択できます。

• Karma - Can I use Karma with testing framework X ?
• Protractor - Choosing a Framework

それぞれ、Mocha,Chaiも選べます。

ところで、ionicとAngularJSそのものはどうしてる？

ひとしきり調べたところで、KarmaとProtractor、JasmineとMocha-Chaiのどれを選べば良いのかわからなくなったので、参考にしようと、ionicとAngularJSはどうしているのかを調べてみました。↓

ionicとAngularJS自体のテスト環境

プロジェクト	ビルドツール	テストの種類	テストランナー	テスティングフレームワーク
ionic	Gulp	ユニットテスト	Karma	jasmine
〃	〃	ソース監視型ユニットテスト	Karma	jasmine
〃	〃	e2eテスト（UIテスト）	Protractor	jasmine2
AngularJS	Grunt	ユニットテスト	Karma	jasmine
〃	〃	e2eテスト（UIテスト）	Protractor	jasmine

• 結局KarmaとProtractorは二本立てでテスト環境が構築されている。
• テスティングフレームワークはJasmine

ということなので、ionicに倣うことにしました。
（詳しい設定内容は別記）

感想

• テストランナーは別に2種類使っても良い
• ネットに載っている情報は思いのほか古いものが多く、真に受けると二度手間になる
• プラグイン等も、開発が止まっていないか注意する必要がある

調査中に参考にしたページ群（後で分類し直します）

テスティングフレームワーク

• mocha - テストを行う
  • shouldjs/should.js
  • Home - Chai
• Jasmine - テストを行う

テストランナー

Karma(UnitTest)

• Karma AngularJS公式？
  • karma-runner/karma -Github
  • Karma - Frequently Asked Questions
  • Karma - Browsers - 対応ブラウザ一覧
  • npm packages with keyword ‘karma-adapter’

Protractor(E2E)

• Protractor - end to end testing for AngularJS

  • angular/protractor - Github
  • Protractor: AngularJSの次世代E2Eテストフレームワーク - Qiita
  • WebDriverJs · SeleniumHQ/selenium Wiki
  • Testing AngularJS with Protractor and Karma - part 1 - Michael Herman
  • mllrsohn/gulp-protractor - Gulpfile.js の書き方はここを参考にした
  • protractor/frameworks.md at master · angular/protractor - Chai on Protractor

• AngularJS: Developer Guide: E2E Testing

• ProtractorでのE2Eテストを一つのgulpタスクで - kikukawa's diary

• WebDriver

• Protractor e2e Testing | Formulas | Learn Ionic

クラウドテスト環境？

• Sauce Labs: Selenium Testing, Mobile Testing, JS Unit Testing and More - Run all your tests in the cloud on one powerful platform.

モック

• AngularJS: API: ngMock
  • angular-mocks
• Sinon.JS - Documentation - Standalone test spies, stubs and mocks for JavaScript.
  • domenic/sinon-chai

テストを走らせるブラウザ的なもの

• PhantomJS | PhantomJS

  • Release 2.0.0 · ariya/phantomjs - 2015/1/25リリース

  • Headless Testing | PhantomJS

  • Ghost Driver

  • SeleniumとPhantomJSを使ったテストをJenkinsで動かす | hiroki.kanaの日常

参考になりそうなページ（随時足したり消したり）

そもそもテストについて

• AngularJS: Developer Guide: Unit Testing
• ユニットテスト | AngularJS 1.2 日本語リファレンス | js STUDIO
• Unit Testing Best Practices in AngularJS - ionicの中の人推奨？
• An Introduction To Unit Testing In AngularJS Applications – Smashing Magazine
• E2Eテスト | AngularJS 1.2 日本語リファレンス | js STUDIO

Jasmine

• Jasmine × Karma × Gulp でつくるユニットテスト環境 入門 – AngularJS + TypeScript #3 | NET BIZ DIV. TECH BLOG
• Karma(元Testacular)を使って簡単にテストを実行しよう ｜ Developers.IO: - Karma,jasmine,grunt
• How To Write Automated Tests For Your Ionic App - Part 2: - karma,jasmine,angular-mocks#1.3.13 (2015/7/30)
• Unit Testing Your Ionic Framework: - Karma,Jasmin (2015/3/3)
• Unit Testing Your Ionic Mobile App | Just Glad To Be Here: - Karma,Jasmin (2014/11/11)

Mocha

• Using Mocha JS, Chai JS and Sinon JS to Test your Frontend JavaScript Code - via @codeship | via @codeship - Mocha, Chai, Sinon

• Yeomanで作ったIonic+AngularJS+PhoneGapなWebアプリのKarma+mocha+chaiなテストをJenkinsで実行するよ！ - My Octopress Blog

• CLIが分離したKarma0.12でmocha,chaiの環境を整える | niwaringo() {Tumblr} - Karma, mocha, chai

• Brad Berger - Writing Your First Unit Test with the Ionic Framework: - angular-mocks

other

• Karma + PhantomJS + Mocha + power-assertでクライアントサイドJSのユニットテスト環境を構築してみた | 株式会社LIG

比較

• Unit Testing Best Practices in AngularJS: - jasmine,Mocha,QUnit