クライアントのテストはzombie.jsでいいんじゃないか

node test

zombie.jsとは

jsdomというnode製のDOMシミュレータがあります。これを使えば、ブラウザを使わずにDOMイベントを発行することができます。
zombie.jsはセッション管理とブラウザのアクションを管理するjsdomのラッパーです。

個人的には、Ajaxのテストは無理せずJavaScriptでやれとおもってるので、その点zombieは素直に動いてくれます。

利点

AjaxでDOMを書き換えたりするイベントもテストできる
(qt-webkitと比較して)
無茶苦茶早い
コンパイルが楽(というかQTは定期的に互換崩れてバイナリ壊れてる…

論よりコード

サンプルをアップロードしてあります
mizchi/zombie-tester-example https://github.com/mizchi/zombie-tester-example

インストール等はReadme見てもらうとして...


test/client_example_test.coffeeは以下。Nodeのテストフレームワークにはmocha
(クライアントのテストなので極力nodeのモジュールを使わないようにしました

assert = require 'assert'
zombie = require 'zombie'

describe 'ClientExampleTest', ->
  host = "http://localhost:4444"
  browser = null
  window = null
  $ = null

  # call done() after async callback
  before (done) ->
    zombie.visit host, (e, br, status) ->
      browser = br
      window = browser.window
      $ = window.$
      window.onload() # ここちょっと気持ち悪い。自然に読み込まれない？
      done()

  # DOM Test
  it 'H1 is Title', ->
    assert.equal $('h1').text(), "Title"

  # Async Test
  it 'wait $.get async', (done)->
    $.get "/",(data)->
      assert.ok data?
      done()

  # Event Test
  it 'mocha test/client_example_spec.coffee --compilers coffee:coffee-script -R spec', ->
   
    $('button.push-me').click()
    assert.equal $('button.push-me').text(), "push-done"

素のjQueryを使うようにそれぞれのエレメントにアクセスでき、mochaで非同期をサポートして、jQuery#clickでイベントを発行しています。
とはいえ、一箇所だけダサいところがありますね。browserオブジェクトが帰ってくるだけではwindow.onload()が保証されていない？っぽいので明示的に動かしています


テスト実行結果

$ mocha test/client_example_spec.coffee --compilers coffee:coffee-script -R spec

client example test
✓ H1 is Title
✓ wait $.get async
✓ when clicked, button text is push-done


✔ 3 tests complete (786ms)


Rspecスタイル。いじればカバレッジも取れるらしいです。

デメリット

枯れてない。テスト通らない時、自分のミスなのかjsdomがおかしいのか疑心暗鬼になる。
node依存(qt-webkitよりマシ(大事なことなのでry

何がやりたかったというと

jQueryでテストを書きたかった
できた
そして早い