Titanium + CoffeeScript + jasmine の環境構築出来ました
Qiitaのビューワーアプリを作ってのですが、Qiita APIから情報取得する部分の処理等、自分の中での仕様が曖昧になりつつあり、なんとなくモヤモヤしてました。
"すでにあるtitanium-jasmineをCommonJS化し、ディレクトリ構造を綺麗にしました。" ほぉーこれ気になる。QiitaのAPI部分の処理がだんだん不安になってきてテスト書いたほうが良い気がしてきたので明日試してみるか htn.to/SyrHZv
— hiroshi oyamada (@h5y1m141) November 14, 2012
というのを呟いてから、以前から気になっていたjasmine for titanium について少し突っ込んで調べた結果、なんとか環境構築出来ました。
折角調べたので、他の方がはじめの一歩を踏み出せるように以下にまとめておこうと思います
Titaniumから利用できるjasmineが色々あって困ったのでまずはその確認
hisasannさんが作成されたtitanium-jasmineというものがあったりひげろぐさんが作成された、jasmine-titaniumというものがあったり、最初混乱しました。
(記憶というか理解が曖昧ですが)元々jasmineには出力先フォーマットを変更できるreporterという仕組みがあるかと思います。
Titaniumからjasmineを利用出来るCommonJSモジュールという意味では前述の2つは両方ともう共通かと思います。
前者の方のソースをザッと見た限り、テスト結果の出力をTi.UI.WebViewを利用してHTML形式で表示するのに対して、後者の方はターミナル上で "も" テスト結果が出力できるようです。
CoffeeScript + jasmine を実現するには？
自分がやりたかったのは、Titanium + CoffeeScript な環境で、 jasmineを使ってテストを書きたいということでした
上記2つのJavaScriptのソースを追って・・というのが大変そうだったので何かサンプルになるものはないかと思って調べたらGitHub上にTitanium-Coffeescript-Boilerplateというサンプルアプリを見つけました
このサンプルのapp/test/tests.coffeeを眺めてたら
- 8行目でjasmine本体をまずは読み込む
- 9行目でTitanumから利用できるようにするためのrepoterを読み込む
という感じのようでした。
ここで読み込んでるreporterを使うと、テスト結果の出力をTi.UI.WebViewを利用してHTML形式で表示するようだったのですが、ターミナル上でにテスト結果が出力できるようにしたかったので、ひげろぐさんが作成された、jasmine-titaniumのreporterの部分だけを取り入れました
最終的には以下のようになりました
プロジェクト直下のディレクトリ構造
ポイントになる所だけ抜粋するとこのような感じになります。coffee配下に、CoffeeScriptのファイルを配置するようにしてます
├── 一部省略
├── Guardfile
├── coffee
│ ├── app.coffee
│ └── test
│ ├── example.coffee
│ └── xhrSpec.coffee
├── Resources
│ ├── 省略
├── manifest
└── tiapp.xml
Resources以下のディレクトリ構造
Titanium Mobile から最終的に利用されるResources以下はこのような感じになります
Resources/ ├── KS_nav_ui.png ├── KS_nav_views.png ├── app.js ├── iphone │ ├── Default-Landscape.png │ ├── Default-Portrait.png │ ├── Default.png │ ├── Default@2x.png │ └── appicon.png └── test ├── example.js ├── lib │ ├── jasmine-1.0.2.js │ └── jasmine-titanium-console.js └── xhrSpec.js
GitHubにサンプルをあげていますので詳細気になる方はこちらをご覧下さい
実際のテストケースについて解説・・と思ったのですがここまで書いて結構な分量になったので続きは別エントリにします
