Help us understand the problem. What is going on with this article?

ionicのテスト環境を調べた

More than 5 years have passed since last update.

まえがき

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.jsonscriptsとして登録して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種類使っても良い
  • ネットに載っている情報は思いのほか古いものが多く、真に受けると二度手間になる
  • プラグイン等も、開発が止まっていないか注意する必要がある

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

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

テストランナー

Karma(UnitTest)

Protractor(E2E)

クラウドテスト環境?

モック

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

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

そもそもテストについて
Jasmine
Mocha
other
比較
bnosuke
water-cell
地球人口100億の時代への農業革命をWebテクノロジで支える
https://water-cell.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away