#tddjs

[papaeye]

『テスト駆動 JavaScript』を Buster.JS で (5)

最後に、第 12 章と第 13 章の ajax.request のテストについて。

Fake server を使っても書けるけど、より低レベルなところをテストしないといけないので、Fake XHR を直接使った方がシンプルに書けた。sinon.useFakeXMLHttpRequest() を使ってグローバルの XMLHttpRequest (ActiveXObject) を置き換えるのではなくて、本と同様に

function setUp() { this.xhr = new sinon.FakeXMLHttpRequest(); this.spy(this.xhr, "send"); this.stub(ajax, "create").returns(this.xhr); }

のように、FakeXMLHttpRequest オブジェクトを直接生成して ajax.create() がそれを返すようにスタブした。

forceStatusAndReadyState() は Buster.JS (Sinon.JS) 用に

function forceStatusAndReadyState(status, rs) { var options = { success: this.spy(), failure: this.spy(), complete: this.spy() }; ajax.get("/url", options); this.xhr.status = status; this.xhr.readyStateChange(rs); return options; }

のように少し調整して

... "should call success handler for status 200": function () { var request = forceStatusAndReadyState.call(this, 200, 4); assert.called(request.success); }, ...

のように使った。

http://tddjs.com/code

You are free to use the code from this book however you wish. All code is licensed under the two clause BSD license.

[papaeye]

『テスト駆動 JavaScript』を Buster.JS で (4)

第 13 章のテスト。主に Fake server と Fake timers について。

JsTestDriver のテスト構文を Buster.JS に変換するのではなくて、JsTestDriver で確認している内容を Buster.JS でも確認するようにする方針で。Buster.JS のやり方でテストするようにする。

たとえば簡単なところだと、Sinon.JS のテストダブルは複数の呼び出しを記録してくれるので

buster.testCase("ajax.cometClient.connect", { ... "should not connect if connected": function () { this.stub(ajax, "poll").returns({}); this.client.connect(); this.client.connect(); assert.calledOnce(ajax.poll); }, ...

のように見やすいテストが書ける。

Fake XHR と Fake server

Sinon.JS には、XHR のテストに対して、低レベルインタフェースの Fake XHR と高レベルインタフェースの Fake server の 2 つが用意されている。http://sinonjs.org/docs/#server。どちらにしてもグローバルの XMLHttpRequest（ActiveXObject）が Fake XHR に置き換えられる。

Fake server でテストするには this.useFakeServer() の戻り値を Fake server として操作する。テスト中に生成された Fake XHR オブジェクトは requests プロパティに格納される。

this.useFakeXMLHttpRequest() はないので、Fake XHR でテストするには sinon.useFakeXMLHttpRequest() を使うか、this.useFakeServer() が置き換えた XMLHttpRequest を利用することになると思う。sinon.useFakeXMLHttpRequest() を使う場合は手動のリストアが必要。

respondWith() と respond()

ajax.cometClient.dispatch() のテストは Fake server を使うと

buster.testCase("ajax.cometClient.dispatch", { setUp: function () { this.server = this.useFakeServer(); this.client = Object.create(ajax.cometClient); this.client.observers = { notify: this.spy() }; }, ... "should not dispatch badly formed data": function () { this.client.url = "/my/url"; this.client.dispatch = this.spy(); this.client.connect(); this.server.respond([200, {}, "OK"]); refute.called(this.client.dispatch); } });

のように書ける。また

buster.testCase("ajax.cometClient.dispatch", { setUp: function () { this.server = this.useFakeServer(); this.server.respondWith([200, {}, "OK"]); ... }, ... "should not dispatch badly formed data": function () { this.client.url = "/my/url"; this.client.dispatch = this.spy(); this.client.connect(); this.server.respond(); refute.called(this.client.dispatch); } });

のように、respondWith() でレスポンスの内容を決めておいて、後で引数なしで respond() を呼び出すこともできる。

XHR#open() や XHR#send() のテスト

XHR のメソッドの呼び出しを確認するには

buster.testCase("ajax.poller", { setUp: function () { this.server = this.useFakeServer(); this.spy(this.server.xhr.prototype, "send"); ... }, ... "should schedule new request when complete": function () { this.poller.start(); this.server.respond([200, {}, ""]); this.clock.tick(1000); assert.called(this.server.requests[1].send); }, ...

のように、置き換えた XMLHttpRequest のプロトタイプの send プロパティをスパイすればいけた。

または（これらの方が好み）

buster.testCase("ajax.poller", { setUp: function () { this.server = this.useFakeServer(); this.spy(this.server, "handleRequest"); ... }, ... "should schedule new request when complete": function () { this.poller.start(); this.server.respond([200, {}, ""]); this.clock.tick(1000); assert.called(this.server.handleRequest); }, ...

のように、Fake server の handleRequest() メソッドの呼び出しで確認したり

buster.testCase("ajax.request", { setUp: function () { this.server = this.useFakeServer(); ... }, ... "should call open with method, url, async flag": function () { var url = "/url"; ajax.request(url); assert.match(this.server.requests[0], { method: "GET", url: url, async: true }); }, ...

のように生成された Fake XHR オブジェクトのプロパティで確認できる。

Fake timers

本で使っている JsUnit の jsUnitMockTimeout.js のような機能をテストで使うには Fake timers を使う。

buster.testCase("ajax.cometClient.connect", { setUp: function () { this.clock = this.useFakeTimers(); this.server = this.useFakeServer(); this.client = Object.create(ajax.cometClient); this.client.url = "/my/url"; }, ... "should pass token on following request": function () { this.client.connect(); var data = { token: 1267482145219 }; this.server.respond([200, {}, JSON.stringify(data)]); this.clock.tick(1000); var headers = this.server.requests[1].requestHeaders; assert.same(headers["X-Access-Token"], data.token); } });

Fake timers は setTimeout などの他に Date も置き換えて、useFakeTimers() 時に指定した時刻を常に返すようになる。this.clock.tick() はタイマーを進めると同時に Date の返す時刻も進める。なので ajax.poller のテストでは

buster.testCase("ajax.poller", { ... "should re-connect immedidately after long request": function () { this.poller.interval = 500; this.poller.start(); this.clock.tick(600); this.spy(ajax, "request"); this.server.respond([200, {}, ""]); this.clock.tick(0); assert.called(ajax.request); }, ...

のように使うことができる。

http://tddjs.com/code

You are free to use the code from this book however you wish. All code is licensed under the two clause BSD license.

[papaeye]

『テスト駆動 JavaScript』を Buster.JS で (3)

第 15 章のクライアントの部分のテストでは JsTestDriver の /*:DOC */ 形式のコメントが使われている。

function userFormControllerSetUp() { /*:DOC element = <form> <fieldset> <label for="username">Username</label> <input type="text" name="username" id="username"> <input type="submit" value="Enter"> </fieldset> </form> */ ... }

この記法を Buster.JS でも使うためには buster-html-doc を buster.js で指定する。buster-html-doc は npm でインストールしておく。

var config = module.exports; config["ch15 tests"] = { env: "browser", libs: [ "lib/tdd.js", "lib/*.js" ], src: ["src/*.js"], tests: ["test/**/*_test.js"], extensions: [require("buster-html-doc")] };

他には特に目新しいものはなかった。あえて挙げるなら、テストダブル呼び出し時の this の値を取得には thisValues プロパティを使うところ。

buster.testCase("messageListController.setModel", { ... "should observe with bound addMessage": function () { var spy = this.controller.addMessage = this.spy(); this.controller.setModel(this.model); this.model.observe.callArg(1); assert.called(spy); assert.same(spy.thisValues[0], this.controller); } });

http://tddjs.com/code

You are free to use the code from this book however you wish. All code is licensed under the two clause BSD license.

this.model.observe.args[0][1](); を this.model.observe.callArg(1); に変更した。

[papaeye]

『テスト駆動 JavaScript』を Buster.JS で (2)

第 12 章と第 13 章の XHR のテストダブルをきれいに書けないので、ひとまず飛ばして第 14 章（と第 15 章のサーバの部分）。

ディレクトリ構成は Node のアプリケーションらしく

$ tree . |-- lib |-- node_modules | |-- send | '-- when '-- test

にしてみた。

本の中ではプロミスのライブラリとして node-promise が使われているけど、GitHub には promised-io の方が推奨になってる。が、ここは Buster.JS の依存ライブラリでもある when.js を使ってみた。

また、静的ファイルの提供のために node-paperboy が使われているけど、GitHub には send の方がいいって書かれているので send を使ってみた。

buster.js

Node アプリのテストの場合は env を "node" にする。libs と src はいらない。

var config = module.exports; config["ch14 tests"] = { env: "node", tests: ["test/**/*_test.js"] };

send を使った server.js

"use strict"; var http = require("http"); var url = require("url"); var send = require("send"); var chatRoomController = require("./chat_room_controller"); var chatRoom = require("./chat_room"); var room = Object.create(chatRoom); module.exports = http.createServer(function (req, res) { var pathName = url.parse(req.url).pathname; var controller; if (pathName === "/comet") { controller = chatRoomController.create(req, res); controller.chatRoom = room; controller[req.method.toLowerCase()](); } else { send(req, pathName) .from(__dirname + '/../../public') .on('error', function () { res.writeHead(404, { "Content-Type": "text/html" }); res.write("<h1>Nothing to see here, move along</h1>"); res.end(); }) .pipe(res); } });

when.js を使った chat_room.js

"use strict"; var EventEmitter = require("events").EventEmitter; var when = require("when"); var chatRoom = Object.create(EventEmitter.prototype); ... chatRoom.waitForMessagesSince = function (id) { var deferred = when.defer(); this.getMessagesSince(id).then(function (messages) { if (messages.length > 0) { deferred.resolve(messages); } else { var listener = function (message) { this.removeListener("message", listener); deferred.resolve([message]); }.bind(this); this.addListener("message", listener); } }.bind(this)); return deferred.promise; }; module.exports = chatRoom;

chat_room_controller_test.js

インポート。

var EventEmitter = require("events").EventEmitter; var buster = require("buster"); var when = require("when"); var chatRoomController = require("../../lib/chapp/chat_room_controller"); var testCase = buster.testCase; var assert = buster.assert; var refute = buster.refute;

共通のセットアップ関数。addMessagePromise と waitForMessagesPromise の代わりに when.defer() を代入する addMessageDeferred と waitForMessagesDeferred に変更した。

function controllerSetUp() { var req = this.req = new EventEmitter(); req.headers = { "x-access-token": "" }; var res = this.res = { writeHead: this.spy(), write: this.spy(), end: this.spy() }; this.controller = chatRoomController.create(req, res); var add = this.addMessageDeferred = when.defer(); var wait = this.waitForMessagesDeferred = when.defer(); this.controller.chatRoom = { addMessage: this.stub().returns(add.promise), waitForMessagesSince: this.stub().returns(wait.promise) }; this.sendRequest = function (data) { var str = encodeURI(JSON.stringify(data)); this.req.emit("data", str.substring(0, str.length / 2)); this.req.emit("data", str.substring(str.length / 2)); this.req.emit("end"); }; }

nodeunit と違って非同期テストの時のみテスト関数に引数を渡せばいいのが便利。

testCase("chatRoomController.post", { setUp: controllerSetUp, ... "should close connection when addMessage resolves": function (done) { var data = { data: { user: "cjno", message: "hi" } }; this.controller.post(); this.sendRequest(data); this.addMessageDeferred.resolve({}); process.nextTick(function () { assert.called(this.res.end); done(); }.bind(this)); }, "should not respond immediately": function () { this.controller.post(); this.sendRequest({ data: {} }); refute.called(this.res.end); } });

テストダブルが呼び出されたときの引数は、2 次元配列の args プロパティか、getCall() メソッドの戻り値の Call オブジェクトの args プロパティから取得できる。.args[i][j] は .getCall(i).args[j] と同等。

testCase("chatRoomController.respond", { setUp: controllerSetUp, ... "should respond with formatted data": function (done) { this.spy(this.controller, "respond"); var messages = [{ user: "cjno", message: "hi" }]; this.waitForMessagesDeferred.resolve(messages); this.controller.get(); process.nextTick(function () { assert.called(this.controller.respond); assert.match(this.controller.respond.args[0], [200, { message: messages }]); done(); }.bind(this)); }, ... "should write response headers": function () { this.controller.respond(200, {}); var headers = { "Content-Type": "application/json", "Content-Length": 2 }; assert.equals(this.res.writeHead.args[0][1], headers); }, ... });

chat_room_test.js

assert.hasPrototype() を使ってる部分と、when.all() を使ってる部分。後者は元のと比べるとかなりシンプルになってる。

var buster = require("buster"); var when = require("when"); var chatRoom = require("../../lib/chapp/chat_room"); var testCase = buster.testCase; var assert = buster.assert; var refute = buster.refute; function chatRoomSetUp() { this.room = Object.create(chatRoom); } ... testCase("chatRoom.addMessage", { setUp: chatRoomSetUp, "should require username": function (done) { var promise = this.room.addMessage(null, "a message"); promise.then(function () {}, function (err) { refute.isNull(err); assert.hasPrototype(err, TypeError.prototype); done(); }); }, ... "should assign unique ids to messages": function (done) { var add = when.all([this.room.addMessage("u", "a"), this.room.addMessage("u", "b")]); add.then(function (messages) { refute.same(messages[0].id, messages[1].id); done(); }); }, ... });

when.js のプロミスをスタブで返す部分は特に変わったことなく。

testCase("chatRoom.waitForMessagesSince", { setUp: chatRoomSetUp, "should yield existing messages": function (done) { var deferred = when.defer(); deferred.resolve([{ id: 43 }]); this.stub(this.room, "getMessagesSince").returns(deferred.promise); this.room.waitForMessagesSince(42).then(function (m) { assert.equals([{ id: 43 }], m); done(); }); }, "should add listener when no messages": function (done) { this.spy(this.room, "addListener"); var deferred = when.defer(); deferred.resolve([]); this.stub(this.room, "getMessagesSince").returns(deferred.promise); this.room.waitForMessagesSince(0); process.nextTick(function () { assert.calledWith(this.room.addListener, "message"); assert.isFunction(this.room.addListener.args[0][1]); done(); }.bind(this)); }, ... });

http://tddjs.com/code

You are free to use the code from this book however you wish. All code is licensed under the two clause BSD license.

[papaeye]

『テスト駆動 JavaScript』を Buster.JS で (1)

『テスト駆動 JavaScript 』のたとえば 278 ページで

get メソッドと post メソッドは明らかによく似ている。そこで、ヘルパーメソッドを抽出してもよいのだが、関数呼び出しを 1 つ増やしても、2 つのメソッドの 2 行を節約できるだけであり、ここでは間接化のレベルを増やすだけの意味は感じられない。しかし、読者は違う感じ方をするかもしれない。

のように著者の意見を述べながら「しかし、読者は違う感じ方をするかもしれない。」と書けることに深さを感じる。

本自体もほんっっっっとうによくできてると思うけど、サポートページもすごい。コードの Git リポジトリが公開されているので git log が参考にできる。

欠点は、日本語訳がときどき変な部分があるところ（特に後半）くらい？

原書 2010 年発行で古くなってるところはあるので、それを今のツールで置き換えて実装してみれば勉強になりそう、と思う今日この頃。

Buster.JS と Sinon.JS で

著者の Christian Johansen は第 4 部で紹介しているテストダブルライブラリ Sinon.JS の開発者。また「第 3 章 現役で使われているツール」で紹介されて使われている JsTestDriver の機能（＋α）を Node で実装した Buster.JS の開発者でもある。

とりあえず「第 11 章 Observer パターン」を Buster.JS + Sinon.JS で書き換えてみる。

JsTestDriver.conf の代わりに以下の buster.js を作成する。

var config = module.exports; config["ch11 tests"] = { env: "browser", libs: ["lib/*.js"], src: ["src/*.js"], tests: ["test/*_test.js"] };

observable_test.js は

(function (buster) { var assert = buster.assert; var refute = buster.refute; buster.testCase("observable", { setUp: function () { this.observable = Object.create(tddjs.util.observable); }, ".observe": { ... }, ".hasObserver": { ... }, ".notify": { ... "should pass through arguments": function () { var observer = this.spy(); this.observable.observe("event", observer); this.observable.notify("event", "String", 1, 32); assert.calledWith(observer, "String", 1, 32); }, "should notify all even when some fail": function () { var observers = [this.stub().throws(), this.spy()]; this.observable.observe("event", observers[0]); this.observable.observe("event", observers[1]); this.observable.notify("event"); assert.called(observers[1]); }, "should call observers in the order they were added": function () { var observers = [this.spy(), this.spy()]; this.observable.observe("event", observers[0]); this.observable.observe("event", observers[1]); this.observable.notify("event"); assert.callOrder(observers[0], observers[1]); }, "should not fail if no observers": function () { var observable = this.observable; refute.exception(function () { observable.notify("event"); }); }, ... } }); }(this.buster || require("buster")));

Sinon.JS のテストダブルを作成するときは this.spy() または this.stub() を使う。そうするとサンドボックス内でテストダブルが作成されて自動的に tearDown でリストアされる。

assert.called(observers[0]) は assert(observers[0].called) とも書けるけど前者の方がエラーメッセージが分かりやくていい。calledWith と callOrder に関しても同様。

(function (buster) { ... }(this.buster || require("buster"))) の書き方は when.js のテストから。

http://tddjs.com/code

You are free to use the code from this book however you wish. All code is licensed under the two clause BSD license.