JavaScriptのテスト環境を整える その3

その1 その2

モジュール単位でファイル分割する。RequireJS使う。

前々回からのbower.jsonを編集。dependenciesにrequirejsを追加する。

{
    "name": "zakuni-js-template",
    "version": "0.0.3",
    "main": "main.js",
    "ignore": [
        "**/.*",
        "node_modules",
        "components"
    ],
    "dependencies": {
        "requirejs": "latest"
    },
    "devDependencies": {
        "mocha": "latest",
        "chai": "latest"
    }
}

色々と試行錯誤した結果、こうなった。

.
├── bower.json
├── camera.coffee
├── camera.js
├── components
│   ├── chai
│   ├── jquery
│   ├── mocha
│   └── requirejs
├── index.html
├── main.coffee
├── main.js
└── test
    ├── test.camera.coffee
    ├── test.camera.js
    ├── test.coffee
    ├── test.html
    └── test.js

index.html用のメインと、テスト用のmainは別のファイルにする(main.jsとtest.js)。
あと、テストもモジュール単位で分ける(camera.jsのテストはtest.camera.jsを作るようにする)。
mocha.setupとかmocha.runはtest.jsで行う。

中身はこういう感じになっている。


https://github.com/zakuni/js-template/tree/v0.0.3
RequireJS使おうとしたら時間かかってしまって最終的にちゃんと整理しきれなかった感があるので、そのうちまたまとめ直すかもしれない(しないかもしれない)。

JavaScriptのテスト環境を整える その2

前回の続き。

あとやりたいことは、CoffeeScriptを使ってる時でも同じようにテストを書けるようにするのと、ファイル分割。
どちらを先にやるかだけど、後でわざわざ書き直すめんどくささもさることながら、それで動かなくなって悩むのは嫌なので、Coffee化を先にやることにした。
前回のmain.jsは

var a = 1;

だけだった。
これをCoffeeScriptで書くと

a = 1

となるわけだが、これをコンパイルしたmain.jsを使うようにするだけで、前回書いたテストは通らなくなる。

なぜかというと、CoffeeScriptから生成されるJavaScriptは、無名関数で囲われていて、グローバル汚染を防いでくれている。
つまり、先ほどのmain.coffeeをjsにコンパイルすると

こうなるので、変数aには外部からアクセスできず、ReferenceErrorになってしまう。

尚、コマンドラインからmochaを使ってテストする分には

% mocha --compilers coffee:main.coffee

みたいにすると中でうまいことやってくれてcoffeeでもテストを通すことができる。
(今回書いてるやつそのままでは通らない。-uオプションでtddを指定したり、chaiをrequireする必要がある)

前回は素のJavaScriptの話だったのでブラウザで実行することを重視したけど、CoffeeScript書いてるならnpmも使ってることが多いだろうし、それなら素直にコンソールでmochaを使えばいいような気がする。

そして気づいたけど、前回使ったbowerはインストールするのにnpm使ってるだろうから、ブラウザにこだわる必要はないような気もしてきた。
ただ、mochaとかchaiをファイルでダウンロードしてきて使う人とかもいるだろうと思えば、意味はあるので一応続ける。

無名関数の中で宣言されているのでアクセスできないことについては色んな解決方法があると思う。
簡単な方法の一つは、windowオブジェクトのプロパティにしてしまうこと。

window.a = 1

テストコードは変えないままグリーンになる。

というわけでこういう風に書ける

ここではやってないけど、テストもcoffeeで書けばいいと思う。

そしてひと区切り。あとはファイル分割する。

ここまでまとめたやつ。
https://github.com/zakuni/js-template/tree/v0.0.2

JavaScriptのテスト環境を整える

クライアントサイドJavaScriptでBackbone.jsとかのフレームワーク使いつつrequire.jsでファイル分割しつつ、更にそれらをCoffeeScriptで書いていた場合にテストを書こうと思ったら軽く発狂しそうになったので、一つずつ解決していくことにした。

個人的な趣味等を鑑みて前提条件は以下のような感じになった。
・CoffeeScriptでも同じような構成で使える
・ファイル分割できる
・テストがブラウザ上でも動作する

自動化は今回の範疇にはない。

後からテストが書きづらかったということに端を発するので、テスト駆動で開発する。

% bower install mocha

mochaを選んだ理由は、expect.jsとかQUnitとかと組み合わせやすそうなことと、ブラウザとコンソール両方で動かせるのと、Nodeでも使えるから。
npmじゃなくbowerでインストールしているのは、クライアントサイドのことはなるべくクライアントサイドで完結させたいので、なるべくNodeと切り離したいのがあるから。

mochaのサンプルを見ながらテスト用ページのひな形を作る。mocha.setupをbddでなくtddにしたのは趣味の問題。

これをブラウザを開いてみると、passes: 0 failures: 0 duration: 0s とか出てるはず。

assertionのために別のライブラリを使う。色んな書き方に対応してるChaiを使ってみることにした。
あと、ここでbower.jsonを作った。

% bower init

ちょっと編集する。
mochaもchaiもテストで使うものなのでdevDependenciesに入れた。

{
  "name": "zakuni-js-template",
  "version": "0.0.1",
  "main": "main.js",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ],
  "dependencies": {
  },
  "devDependencies": {
    "mocha": "latest",
    "chai": "latest"
  }
}

HTMLを編集して、テストを書く。

これでブラウザリロードして、グリーンになってればOK。

namespace的なこととか考えないならたぶんこれで充分テストを書いていける。
ひとまずここで一区切り。

ここまでをまとめたのが以下のもの。
https://github.com/zakuni/js-template/tree/v0.0.1

[Mac]Guardによる自動テスト

久々に環境構築おじさん的なことを。

これまでRSpecとautotest(zentest)を使ってたのだけど、最近はみんなminitestだな、とかなんとか聞いたのでminitestも使ってみる。
で、自動実行するためにGuardを使う。Rails4とかで使われてるのかな?

gemspecに書いてbundle install

gem.add_development_dependency "guard-minitest"

もちろん普通にgem installしてもいいし、Gemfileに書いてもいい。

Guardfileという設定ファイルを生成するために

% bundle exec guard init minitest

Guardfileの基本的なところについては割愛。

ファイル保存のタイミングでテストするためにrb-fsevent使う(WindowsとかLinuxの場合はほかのものを使う)

gem.add_development_dependency "rb-fsevent"

テスト書いて、

% guard

すると、ファイル保存のたびにテストされる。


以下、Growlで通知させる話。

gem growlを使う。

gem.add_development_dependency "growl"

を追加して、bundle installしてguardし直す。

が、通知されない。

Growl2.0になって、GrowlNotifyを入れてないせいだった。
http://growl.info/downloads#generaldownloads からダウンロードしてインストール。

改めて

% guard

適当にファイルいじって保存してテストを走らせる。

通知出た。
が、何故か1回ファイル保存するごとに2回ずつ通知される。
よくみたらテスト自体が2回ずつ実行されてる。

Guardfileにguard 'minitest' do endが2個あった。
guard init minitestをしたときに、Gemfileがあるならbundle execしたほうがいいんじゃない?って出力されたのでもう一回bundle exec guard init minitestしたらGuardfileに追記されていたせいだった。

もう一回guard initしてみたら3個になって、

There are 3 definitions in your Guardfile for 'minitest', you may want to clean up your Guardfile as this could cause issues.

っていうのが出てた。2回目のときにも出ていたんだろう。
必要ない分を消したらちゃんと1回だけ実行されて通知も1個になった。