タイトルの通り、Yeomanで作ったIonic+AngularJSなWebアプリをPhoneGapでネイティブアプリにするプロジェクトを構築し、 テストをmocha+chaiで記述してKarmaで実行できるようにし、Jenkinsで定期ジョブにする手順を記述するエントリです。

登場人物が多すぎて自分でも意味不明になってきたので、整理の意味でブログに書いときます。

用語

まずは上述の用語の乱雑なまとめ

Yeoman

アプリケーションのひな形を作成してくれるツール

grunt

ビルドツール

bower

javascriptライブラリの管理ツール

npm

node.jsライブラリの管理ツール

まだ使い始めたばかりなのでアレですが、Yeoman+grunt+bower+npmでJavaのMavenみたいなことが出来るという 理解でいいのかな。便利っぽいです。

Ionic

AngularJSに依存したモバイルWebアプリのUIライブラリ。 Phonegapでの利用も想定して作られているようなので、使ってみました。 AngularJSはただのWebアプリ用のフレームワークなので、モバイル端末に対応するためには 何らかのUIライブラリが必要です。

AngularJS

有名なJavascript MVCフレームワークです

Karma

テストランナーです

mocha

テストフレームワークです

chai

アサーションライブラリです

Javascriptだとテスト関係のライブラリが機能別に細かく分かれているのでややこしいですね。

PhoneGap

WebアプリをWebView上でで動くネイティブアプリにするライブラリ。 ハードウェア機能もJavascriptで使えるインターフェイスが用意されていてクロスプラットフォームなアプリを作れる

開発環境の構築

概念はややこしいですが、手順がワークフロー化されているので、やることは簡単です。

まずは一連の操作で利用するライブラリをインストールしましょう。rubyとかgemとかnpmとかはすでに入っているかんじで、

# gem install compass
# npm install -g bower grunt-cli yo yeoman-generator generator-ionicjs karma-junit-reporter
# npm install -g phonegap cordova

続いて、実際のプロジェクトを作成していきます。

$ mkdir ionicSample
$ cd ionicSample
$ yo ionicjs

    _             _
   (_)           (_)
    _  ___  _ __  _  ___
   | |/ _ \| '_ \| |/ __|
   | | (_) | | | | | (__
   |_|\___/|_| |_|_|\___|

[?] Would you like to use Sass with Compass (requires Ruby)? (y/N) y
Created a new Cordova project with name "IonicSample" and id "com.example.IonicSample"
[?] Which Cordova plugins would you like to include? (Press <space> to select)
‣⬢ org.apache.cordova.console
 ⬢ org.apache.cordova.device
 ⬡ org.apache.cordova.network-information
 ⬡ org.apache.cordova.splashscreen
 ⬡ org.apache.cordova.battery-status
 ⬡ org.apache.cordova.statusbar
 ⬡ org.apache.cordova.device-motion
[?] Which Cordova plugins would you like to include? org.apache.cordova.console, org.apache.cordova.device
[?] Which starter app template which you like to use? 
  Blank 
  Tabs 
  Side Menu 
‣ Pets Seed 

まず、Compassを使うかどうか、つづいてインポートするphonegapライブラリの選択を行います。 最後にひな形の種類を聞かれます。実際に開発する場合は余計なものが無い方がいいかもしれませんが、 ここではあるていどコンテンツが用意されているPet Seedを選択します。

パッケージビルドするプラットフォームを追加します。ここではandroidを扱います。 あ、AndroidSDKはすでに適当に入ってる感じでおねがいします。

$ cordova platform add android

ビルドします。

$ grunt build

これでもう、./platforms/android/ant-build に動作可能なパッケージができました。マジお手軽。

それでは、実行してみましょう。テスト用の端末をUSB接続するか、エミュレータを立ちあげておいて、

$ cordova run android

実行出来ましたか？実行出来ましたね。

テスト

単体テストを実行します。テストはすでに ./test/spec/ 以下にサンプルがありますので、これを実行します。 karmaといえば、ファイルの変更を検知して実行してくれる監視機能が特長のようですが、 ここでは、最終的にはJenkinsのジョブとして扱いたいので、コマンドライン実行します。

とはいえ、すでにすべての準備は整っていて、

$ grunt karma:continuous

Running "karma:continuous" (karma) task
WARN [karma]: Port 8080 in use
INFO [karma]: Karma v0.12.2 server started at http://localhost:8081/
INFO [launcher]: Starting browser PhantomJS
WARN [watcher]: Pattern "/path/to/ionicSample/test/mock/**/*.js" does not match any file.
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket jd_w9g872hnwnSfMdscZ with id 60562257
.
PhantomJS 1.9.7 (Linux): Executed 1 of 1 SUCCESS (0.039 secs / 0.001 secs)

=============================== Coverage summary ===============================
Statements   : 81.82% ( 9/11 )
Branches     : 100% ( 0/0 )
Functions    : 66.67% ( 4/6 )
Lines        : 81.82% ( 9/11 )
================================================================================

Done, without errors.


Execution Time (2014-04-01 08:45:17 UTC)
karma:continuous  1.6s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
Total 1.6s

できました。いたれり尽くせりすぎて怖い。

ちなみに、karmaの監視を開始する場合は grunt test とやってください。

テストのコマンドライン実行はできましたが、jenkinsにジョブ登録してテストの定期実行結果を評価するには テスト結果をファイル出力する必要があります。

JUnit形式Reporterの追加

$ npm install karma-junit-reporter --save-dev

Gruntfile の、karma.options.reporters を修正します

$ vi Gruntfile.js
reporters: ['junit', 'dots', 'coverage'],   #<- 'junit'を追加

再度テスト実行

$ grunt karma:continuous

JUnit形式の結果ファイル test-results.xml ができていると思います。

Jenkinsには、このテスト実行コマンドと結果ファイルを登録しておけば継続的インテグレーションができるようになります。