ionicのテスト環境を調べた

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

## そもそもionicのテストって…
### ionicではなくAngularJSとしてテストする
ionicのサイトやフォーラムにはionic独自の情報はなく、フォーラムなどを参照すると、[Testing e2e - Ionic Forum](http://forum.ionicframework.com/t/testing-e2e/3970)のように「AngularJSとしてテストしてくれ」というのが中の人の回答らしいので、AngularJSのテストについて調べることにしました。

## ツールとして何を使うか？
### AngularJS公式の情報では、Karma,Jasmine,Protractor
#### ユニットテスト
[AngularJS: Developer Guide: Unit Testing](https://docs.angularjs.org/guide/unit-testing)によると、テスト群を[Jasmine](https://github.com/jasmine/jasmine)で構築して、それを[Karma](http://karma-runner.github.io/0.13/index.html)で実行する。モックが必要であれば[ngMock](https://docs.angularjs.org/api/ngMock)をつかう、といった感じでしょうか。
Jasmineは「テスティングフレームワーク」とよばれ、テストコードを実行してその結果を得るものです。
Karmaは「テストランナー」とよばれ、ブラウザを起動し、Jasmine等で提供されたテストを実行し、結果のレポートまでを行う事が仕事です。　　
#### e2eテスト
[AngularJS: Developer Guide: E2E Testing](https://docs.angularjs.org/guide/e2e-testing)ではE2Eテストについて紹介されています。事実上、UIテストです。[Protractor](http://www.protractortest.org/#/)を使えとあります。

## それぞれの設定内容
それぞれの詳細は別記事を立てます。概要は以下の通り。
### 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 ?](http://karma-runner.github.io/0.13/intro/faq.html)
* [Protractor - Choosing a Framework](http://www.protractortest.org/#/frameworks)

それぞれ、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](https://mochajs.org/) - テストを行う
  * [shouldjs/should.js](https://github.com/shouldjs/should.js)
  * [Home - Chai](http://chaijs.com/)
* [Jasmine](https://github.com/jasmine/jasmine) - テストを行う

### テストランナー
#### Karma(UnitTest)
* [Karma](http://karma-runner.github.io/0.13/index.html) AngularJS公式？
  * [karma-runner/karma](https://github.com/karma-runner/karma#karma) -Github
  * [Karma - Frequently Asked Questions](http://karma-runner.github.io/0.13/intro/faq.html)
  * [Karma - Browsers](http://karma-runner.github.io/0.13/config/browsers.html) - 対応ブラウザ一覧
  * [npm packages with keyword ‘karma-adapter’](https://www.npmjs.com/browse/keyword/karma-adapter)

#### Protractor(E2E)
* [Protractor - end to end testing for AngularJS](http://www.protractortest.org/#/)
  * [angular/protractor](https://github.com/angular/protractor#protractor-) - Github
  * [Protractor: AngularJSの次世代E2Eテストフレームワーク - Qiita](http://qiita.com/zoetro/items/b72130960c39055b8474)
  * [WebDriverJs · SeleniumHQ/selenium Wiki](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs)
  * [Testing AngularJS with Protractor and Karma - part 1 - Michael Herman](http://mjhea0.github.com/blog/2015/04/09/testing-angularjs-with-protractor-and-karma-part-1)
  * [mllrsohn/gulp-protractor](https://github.com/mllrsohn/gulp-protractor) - Gulpfile.js の書き方はここを参考にした
  * [protractor/frameworks.md at master · angular/protractor](https://github.com/angular/protractor/blob/master/docs/frameworks.md#using-mocha) - Chai on Protractor
* [AngularJS: Developer Guide: E2E Testing](https://docs.angularjs.org/guide/e2e-testing)
 
* [ProtractorでのE2Eテストを一つのgulpタスクで - kikukawa's diary](http://kkkw.hatenablog.jp/entry/javascript/e2e-test-as-a-task-with-jasmine-protractor)
* [WebDriver](https://w3c.github.io/webdriver/webdriver-spec.html)
* [Protractor e2e Testing | Formulas | Learn Ionic](http://learn.ionicframework.com/formulas/Protractor/)

#### クラウドテスト環境？
* [Sauce Labs: Selenium Testing, Mobile Testing, JS Unit Testing and More](https://saucelabs.com/) - Run all your tests in the cloud on one powerful platform.

##### モック
* [AngularJS: API: ngMock](https://docs.angularjs.org/api/ngMock)
  * [angular-mocks](https://github.com/angular/bower-angular-mocks)
* [Sinon.JS - Documentation](http://sinonjs.org/) - Standalone test spies, stubs and mocks for JavaScript.
  * [domenic/sinon-chai](https://github.com/domenic/sinon-chai)

#### テストを走らせるブラウザ的なもの
* [PhantomJS | PhantomJS](http://phantomjs.org/)
	* [Release 2.0.0 · ariya/phantomjs](https://github.com/ariya/phantomjs/releases/tag/2.0.0) - 2015/1/25リリース

  * [Headless Testing | PhantomJS](http://phantomjs.org/headless-testing.html)
  * [Ghost Driver](https://github.com/detro/ghostdriver#ghost-driver)
  * [SeleniumとPhantomJSを使ったテストをJenkinsで動かす | hiroki.kanaの日常](http://blog.hirokikana.com/?p=510)

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

##### そもそもテストについて
* [AngularJS: Developer Guide: Unit Testing](https://docs.angularjs.org/guide/unit-testing)
* [ユニットテスト | AngularJS 1.2 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/angularjs/guide/unit_testing)
* [Unit Testing Best Practices in AngularJS](http://andyshora.com/unit-testing-best-practices-angularjs.html) - ionicの中の人推奨？
* [An Introduction To Unit Testing In AngularJS Applications – Smashing Magazine](http://www.smashingmagazine.com/2014/10/introduction-to-unit-testing-in-angularjs/)
* [E2Eテスト | AngularJS 1.2 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/angularjs/guide/e2e_testing)

##### Jasmine
* [Jasmine × Karma × Gulp でつくるユニットテスト環境 入門 – AngularJS + TypeScript #3 | NET BIZ DIV. TECH BLOG](http://tech.recruit-mp.co.jp/front-end/post-5299/)
* [Karma(元Testacular)を使って簡単にテストを実行しよう ｜ Developers.IO:](http://dev.classmethod.jp/tool/karma/) - Karma,jasmine,grunt
* [How To Write Automated Tests For Your Ionic App - Part 2:](http://gonehybrid.com/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:](http://mcgivery.com/unit-testing-ionic-app/) - Karma,Jasmin (2015/3/3)
* [Unit Testing Your Ionic Mobile App | Just Glad To Be Here:](http://jeffgladchun.azurewebsites.net/unit-testing-your-ionic-mobile-app/) - Karma,Jasmin (2014/11/11)

##### Mocha
* [Using Mocha JS, Chai JS and Sinon JS to Test your Frontend JavaScript Code - via @codeship | via @codeship](https://blog.codeship.com/mocha-js-chai-sinon-frontend-javascript-code-testing-tutorial/) - Mocha, Chai, Sinon
* [Yeomanで作ったIonic+AngularJS+PhoneGapなWebアプリのKarma+mocha+chaiなテストをJenkinsで実行するよ！ - My Octopress Blog](http://haiiro-shimeji.github.com/blog/2014/04/01/ionic_etcetc/)
* [CLIが分離したKarma0.12でmocha,chaiの環境を整える | niwaringo() {Tumblr}](http://niwaringo.tumblr.com/post/84732283674/cli%E3%81%8C%E5%88%86%E9%9B%A2%E3%81%97%E3%81%9Fkarma012%E3%81%A7mochachai%E3%81%AE%E7%92%B0%E5%A2%83%E3%82%92%E6%95%B4%E3%81%88%E3%82%8B) - Karma, mocha, chai

* [Brad Berger - Writing Your First Unit Test with the Ionic Framework:](https://bradb.net/blog/unit-testing-with-the-ionic-framework/) - angular-mocks

##### other
* [Karma + PhantomJS + Mocha + power-assertでクライアントサイドJSのユニットテスト環境を構築してみた | 株式会社LIG](http://liginc.co.jp/187209)

##### 比較
* [Unit Testing Best Practices in AngularJS:](http://andyshora.com/unit-testing-best-practices-angularjs.html) - jasmine,Mocha,QUnit