ionicのテスト環境を調べた #Angular

まえがき

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も任意のものが選択できます。

それぞれ、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 - テストを行う

テストランナー

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

そもそもテストについて

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

other

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

比較

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

ionicのテスト環境を調べた