本来、ブラウザ用に書かれたテストは基本的にはブラウザでしか動作しません。
受け入れレベルのテストを selenium などを利用して動作させるというのはよくある手段ですが、モデルのみのテストだとなかなかそうもいきません。
そのため、JavaScript のテストをすべて CI に組み込んで動作させることは困難かと思います。

ひとつのアプローチとして、ブラウザでもサーバ(今回は Node.js を対象としています)でも動作するようなコードに書き換えるというのも一つの手段かもしれません。
ロジックだけのモデル層のテストなら互換性を考慮するのも可能でしょう。

(function(global) {
  // code
})(
  'undefined' === typeof exports ?
    window :
    module.exports
);

ただ、外部のライブラリや DOM に依存している部分についてはなかなか素直にはいきません。
例えば、 underscore や jQuery を利用していたら、その部分をブラウザ/サーバ用に差し替えるようなコードが必要になってくるでしょう。

(function(global, _) {
  // code
})(
  // 環境依存を解消するためのコード(本質的ではない)
  'undefined' === typeof window ?
    module.exports :
    window,
  'undefined' === typeof _ ?
    require('underscore') :
    _
);

この対応というのは、本質的なコードではない上にテストの信頼性も損なってしまいます。

またこの問題を解消できたとしても、DOM に依存するコードは単独でテストをしづらいという課題が残ります。

ブラウザで動作しているテストコードを、特別な変更無しで CI 環境でも動作させることができたら素敵ですよね。

というわけで、作ってみました。

mocha-ci-driver | GitHub

* mocha-ci-driver を使うと

mocha-ci-driver は mocha で書かれているブラウザ用のテストを、Node.js 上でも動作させるためのドライバです。

これを使うと、ブラウザ用に書かれたテストを CI に組み込めます。
なので、普段の開発では CI で動作させておいて、ブラウザ互換を確認したいときは各ブラウザでテストを実行することができるようになります。

Node.js 用の設定はこんな感じです。

1. まず、ドライバを実行するためのファイルを追加します。
(値は各環境によって適宜変更してください。)

// ./test/driver.js
var Driver = require('mocha-ci-driver').Driver
  , basedir = __dirname + '/../'
  , port = 8080
  , testHtml = '/test/index.html'
  , driver = new Driver(basedir, port)

driver.run(testHtml);

2. 次に、普段利用しているテスト用の html を一部修正し、
html の中でなくドライバ側でテストを実行するよう設定します。
(mocha はテストを実行した後はテスト内容を捨ててしまうので、この設定が無いと、ドライバ側で実行すべきテストを取得できなくなってしまいます。)

(before)

<script>
  $(function () {
    mocha.run();
  });
</script>

(after)

<script>
  $(function () {
    // Node.js で実行時にはこのタイミングでテストを実行しない
    if (!/Node.js/.test(navigator.appName)) {
      mocha.run();
    }
  });
</script>

3. この設定が完了すれば、あとは Node.js で実行するだけです。

$ node ./test/driver.js

* mocha の対応バージョン

ただ、この mocha-ci-driver が対応しているのは、 visionmedia/mocha@a186b8dba1 以降になります。
2012.03.04 現在、 tag は切られていないので、 mocha-ci-driver を利用するためにはリポジトリから mocha を取得してきて make する必要があります。

$ git clone git://github.com/visionmedia/mocha.git mocha
$ cd mocha
$ make clean && make

これで mocha.js がビルドされるので、この mocha.js をテスト用の html で利用するようにしてください。

というわけで、ブラウザでもサーバでも動作するテストに興味がある方は mocha-ci-driver 試してみてください:-)

2012-02-27

WebSocket の動作確認に wscat が便利すぎる件

JavaScript WebSocket

WebSocket を利用したアプリケーションを作る際に、動作確認が煩雑な場合があります。

サーバ側とクライアント側をどちらも実装する必要があって、「ちょっとこの部分だけ動かしてみたいなぁ」っていうときに、簡単に試す方法があると便利ですよね！

そんなときにおすすめなのが、 wscat です。

wscat は、コマンドラインで利用できる WebSocket のサーバ/クライアントで、ws に同梱されています。
ws とは、 Node.js 上で WebSocket を使うためのモジュールで、Socket.IO やengine.io の内部でも利用されている今注目のプロダクトです。

今回は、この wscat の使い方をご紹介します。

対象バージョン

ws (0.4.7)

インストール

Node.js のモジュールなので、 npm でインストールするのが簡単です。

$ npm install -g ws

利用

完了したら、WebSocket サーバに接続します。
(localhost:3000 でサーバが起動している場合)

$ wscat -c ws://localhost:3000

と入力すると、localhost:3000 に接続した状態で wscat が起動します。

connected (press CTRL+C to quit)
>

この状態でメッセージを入力して Enter を押すと、入力した内容が接続先のサーバに送信されます。
また、サーバからクライアントへメッセージを送信した場合は、今開いているターミナルの標準出力にメッセージが表示されます。

サーバとして起動する場合はこちら
(3000 番ポートで listen する場合)

$ wscat -l 3000

クライアントから受け取ったメッセージを、そのまま標準出力に表示するようになっています。

手元に WebSocket のサーバもクライアントも無い場合でも、ターミナルを２つ開いて wscat をサーバとクライアントで動かせば、動作を確認できます。

ちょっとしたデバッグなどに手軽に利用できるので、 WebSocket アプリを開発する際にオススメにツールです:-)

ソースはこちら: https://github.com/einaros/ws

※ もちろん、何度も確認する必要があるならきちんとテストコードを書いた方が良いです

2012-02-25

Ruby Sapporo Night vol.14 に参加してきました

JavaScript RubySapporo

Ruby Sapporo Night vol.14 に参加して発表してきました。

@snoozer05 に声をかけていただいたので、喜んで参加しました。
そんな @snoozer05 の発表資料はこちら: Ruby Sapporo Night vol.14

で、ぼくの資料はこちらです。

Testable JavaScript

View more presentations from Ryunosuke SATO

クライアントサイドの MVC って、なんやろなぁ。
大事なことってなんだろう？

ってことについて、今の自分が考えていることをお話したつもりです。

また、今回の発表で使ったデモ(Task List)はこちらにあります。

http://tasklist-demo.herokuapp.com
ソース: Task List

このデモでは、クライアントサイドMVC に特化したフレームワークはあえて使わないで、どう設計すれば上手くいくかを試行しながら作ってみました。

結果としては Model にも View にもユニットテストが書けるような作りになっています。
これについては、「もっとこうしたら良いのでは」とか「テストをもっと良くできる」などある方がいれば、ぜひぜひ GitHub の方でコメント or issue or pull request いただければと思います。

Ruby札幌のみなさま、参加されたみなさま、ありがとうございました！