#buster.js

[jsism]

2013-09-24のJS: jQuery2.1 β1、Buster.JS v0.7.4、Tableタグガイド

JSer.info #141 - jQuery 1.11 and 2.1 Beta 1 がリリースされました。 jQuery内でもそれぞれのモジュールの依存関係をAsynchronous Module Definition (AMD)を使い管理し、r.jsでビルドするようになったそうです。

JavaScriptテストフレームワークのBuster.JS v0.7.4がリリースされました。 9ヶ月ぶりぐらいのリリースになってますが、先月からコミッターが増え(元々のメンテナーも)一気に活性化したので、 次のリリースはそう遠くはならないと思います。 

Windowsでの実行のサポートなど色々な修正が入っています。

Buster.JS 0.7リリースと変更点について | Web scratch

A Complete Guide to the Table Element | CSS-Tricks という記事では、Tableタグについてかなり詳しくまとまっています。 またサンプルコードも豊富(そのため重い…)で、 CSSやJavaScriptと合わせた内容についても書かれています。

ヘッドライン

MozillaZine.jp » Blog Archive » Firefox 24 がリリースされた http://mozillazine.jp/?p=3825

firefox ReleaseNote

Firefox 24リリース

Firefox 24 for developers - Mozilla | MDN

Firefox 24 サイト互換性情報 | MDN

jQuery 1.11 and 2.1 Beta 1 Released | Official jQuery Blog http://blog.jquery.com/2013/09/19/jquery-1-11-and-2-1-beta-1-released/

jQuery ReleaseNote

jQuery 1.11と2.1 β1リリース. jQuery内部でもAMDを使うように、jQuery内部の依存関係にBowerを利用、sourcemap directivesの修正

Support jQuery 1.10.2 & 2.0.3 on Qrefy! | milestoner http://s3pw.com/milestoner/2013/09/support-current-jquery-on-qrefy/

jQuery リファレンス

jQueryリファレンスサイトのQrefyがjQuery 1.10.2 & 2.0.3に対応

Changelog — Buster.JS 0.7.4 documentation http://docs.busterjs.org/en/latest/changelog/#v0-7-4

BusterJS ReleaseNote testing

JavaScriptテストフレームワーク Buster.JS v0.7.4リリース. Windowsのサポートやバグ修正、安定性や速度の改善. 破壊的な変更も一部含まれる

アーティクル

Buster.JS 0.7リリースと変更点について | Web scratch http://efcl.info/2013/0918/res3425/

JavaScript BusterJS testing ReleaseNote

Buster.JS 0.7.4での変更点についてのまとめ。

Learning | alex bumbu http://bumbu.ru/learning/

JavaScript デザインパターン

JavaScriptでのデザインパターンについて書かれている

Improved JavaScript debugger in WebStorm 7 | JetBrains WebStorm Blog http://blog.jetbrains.com/webstorm/2013/09/improved-javascript-debugger-in-webstorm-7/

WebStorm デバック 動画

WebStorm 7のJavaScriptデバッグ機能について。 Live Edit、Elements tab、ブレークした時に変数を見られるVariables viewの改善など

WebStorm 7の大幅に改善されたJavaScriptデバッガ | JetBrains ブログ

Canvas Inspection using Chrome DevTools - HTML5 Rocks http://www.html5rocks.com/en/tutorials/canvas/inspection/

Chrome canvas デバック

Chrome Dev ToolsでCanvasの描画をframeごとにトレース出来るようになった

A Complete Guide to the Table Element | CSS-Tricks http://css-tricks.com/complete-guide-table-element/

HTML CSS JavaScript tutorial

Tableタグについてコード例も豊富にまとまってる。 基本から、Cellの結合、いつTableを使うべきかについて。 display:table-*やCSSでの装飾、Tableの検索等のJSとの連携などについても書かれている

Safari on iOS 7 and HTML5: problems, changes and new APIs | Breaking the Mobile Web http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

ios safari

iOS 7のSafari周りの変更や追加された機能について等のまとめ

Speech Synthesis: Web Speech API, part one - Broken Links http://www.broken-links.com/2013/09/20/web-speech-api-part-one-speech-synthesis/

ios JavaScript

iOS7でサポートされたWeb Speech APIについて

Loading sounds faster - Blog - Clicktorelease http://www.clicktorelease.com/blog/loading-sounds-faster-using-html5-web-audio-api

sound JavaScript

XHR ArrayBufferで音楽を取得しながら、バッファーからWeb Audio APIで組み立てながら再生する方法について

CSS Image Orientation Lands in Firefox 26 - Psychic Core Dump http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation

CSS

CSSのimage-orientation:について。 画像の回転反転、画像のメタデータからも回転できる

翻訳案保管: CSS Length Explained http://i7iblog.blogspot.com/2013/09/css-length-explained.html

CSS まとめ

CSSに出てくるpxやin、pt等の単位について http://www.w3.org/TR/css3-values/

[JavaScript] Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記 http://d.hatena.ne.jp/unageanu/20130923/1379916004

JavaScript testing todo

KnockoutでMVVM、ContainerJSでDIをしてテストしやすい状態にしてアプリを作るチュートリアル。 UI独自の状態や処理を管理するオブジェクトViewModelを作って、HTMLから分離してテストしやすくしている

element: Modals made easy - HTML5Rocks Updates http://updates.html5rocks.com/2013/09/dialog-element-Modals-made-easy

HTML JavaScript

ChromeでHTML dialog要素のサポート。 JavaScript API、CSSの擬似要素、polyfillを使ったデモについて

Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に | WWW WATCH

Faster String#repeat method, with ancient Egyptian theory | CoderKeen http://coderkeen.com/javascript/faster-stringrepeat-method-with-ancient-egyptian-theory

JavaScript アルゴリズム

String.prototype.repeatのアルゴリズムについて http://hg.mozilla.org/mozilla-central/file/28e5d67b6b5a/js/src/builtin/String.js#l10

モバイルブラウザで動くWebアプリケーションのキャッシュ戦略 | HTML5Experts.jp http://html5experts.jp/kyo_ago/2466/

JavaScript

Web Storage、Web SQL、Indexed DB、Filesystem APIを使った読み書きのキャッシュについてや、ApplicationCacheの動作や問題点、利用する場合の考え方についてまとまってる

An Introduction to The Page Visibility API - Treehouse Blog http://blog.teamtreehouse.com/an-introduction-to-the-page-visibility-api

JavaScript 動画 tutorial

Page Visibilityを使って動画を停止させるチュートリアル

スライド、動画関係

JSConfUS 2013] Carter Rabasa: APIs and Making Humankind Better at Programming - YouTube http://www.youtube.com/watch?v=pHJRELG31dE

JavaScript イベント 動画

http://2013.jsconf.eu/ の動画が公開された

レポート

JSConf EU 2013 impressions | Secret Weblog

JSConf.EU 2013 • JS Attitude : formations JavaScript qualitatives et sympathiques

Reject.JS 2013 - YouTube http://www.youtube.com/playlist?list=PL37ZVnwpeshGLrMTDPV12z7KmjrXsOeHT

JavaScript イベント 動画

Reject.JS 2013の動画が公開された。 http://rejectjs.org/

Welcome our new ES5 Overlords http://mikemaccana.github.io/rejectjs2013/#1

JavaScript スライド

definePropertyとprefixを使ったネイティブ拡張ライブラリのagavejsについてのスライド。 ES3のprototype汚染、ES5のObject.definePropertyを使った拡張と衝突について

サイト、サービス、ソフトウェア関係

Chromium Dashboard http://www.chromestatus.com/metrics/css/rank

Chrome CSS

Google Chromeの利用情報送信機能でのCSSプロパティ利用についての統計情報

Content Security Policy Header Generator http://cspisawesome.com/

CSP ジェネレーター

CSPの設定項目をチェック等指定していき、そのCSP header文字列を生成してくれるサービス。

NodeSec Advisories | We need a tagline contributor™ https://nodesecurity.io/

node.js セキュリティ

Nodeモジュールなどに関するセキュリティ的なアドバイスや調査報告などについてのサイト

Phaser - Desktop and Mobile HTML5 game framework http://phaser.io/

JavaScript TypeScript HTML5 game library

TypeScriptも公式にサポートしてるHTML5ゲームなフレームワーク

Reject.JS 2013 - 60 FPS retrogaming on mobile http://gmarty.github.io/jsSMS/Reject.JS-2013-Slides/#/intro

JavaScript スライド game

JavaScriptで書くエミュレータについてのスライド。 ROMからOpCodeを取り出してインタープリター的に処理すると簡潔だが速度的な問題がでる。 そこでROMからJavaScript関数を生成するような仕組み(Recompiler)を入れる。

* Prase * Analyser * optimiser * Generator このRecompilerを静的と動的で行う事で速度を改善する話

Firefox Site Compat (FxSiteCompat) on Twitter https://twitter.com/FxSiteCompat

firefox browser twitter

Firefoxのサイト互換性情報について発信してるTwitterアカウント

Underscore Reference — Smooth CoffeeScript http://autotelicum.github.io/Smooth-CoffeeScript/literate/underscore.html

JavaScript CoffeeScript library リファレンス

Underscore.jsのリファレンス. その場でCoffeeScriptなコードを実行してUnderscoreの関数を確認できるようになってる

ツール、ライブラリ関係

spy-js/spy-js https://github.com/spy-js/spy-js

node.js Tools デバック

Proxyを通して、JavaScriptのイベントやコードの値の評価を表示したりなどデバッグするためのトレース情報を見られるツール

Agave.JS http://agavejs.org/

JavaScript library

Object.definePropertyとprefixを使ったネイティブ拡張ライブラリ.

BladeRunnerJS - Divide & conquer your web apps http://bladerunnerjs.org/

JavaScript HTML Tools library

Single-Pageなウェブアプリを作成する用途の開発ツールキットとフレームワーク. 巨大なウェブアプリを想定して開発されてる (KnockoutJSを内部的に利用)

aaronfrost/grunt-traceur https://github.com/aaronfrost/grunt-traceur

ECMAScript JavaScript Grunt

Traceur-Compileを使ったGruntタスク. ES6 -> ES3

書籍関係

Quick Guide For… by Andre Alves Garzia [PDF/iPad/Kindle] https://leanpub.com/quickguidefirefoxosdevelopment

firefox OS book

無料のFirefox OS向けアプリの開発電子書籍

【完全日本語訳＋解説】ECMA-262 Edition 5.1を読む（Amazon予約キャンペーン実施中） http://ecma262.info/

ECMAScript book

訳・編:竹迫良範 ECMA-262 Edition 5.1の翻訳と解説を含めた書籍

この書籍の電子版について問い合わせましたところ、大変残念ですが現時点では予定されてないそうです。

残念ですが、「現時点では」電子化されたデータの販売予定は ございません。 編集担当者個人と致しましては、ご要望は十分に理解できるもの ではございますが、ご要望の数がどの程度なのか計りかねている という側面もございます。 今後、同様のご要望を受け取る機会が増えた場合は、検討させて いただく可能性もあります。

『ECMA-262 Edition 5.1を読む』 電子化についてのお問い合わせ 

書籍等に関するお問合せは書籍に関するご質問についてにかかれているようにメールで行えるので、 電子化を希望する方はお問い合わせをするといいかと思います。 また、Amazon.co.jp： ECMA-262 Edition 5.1を読む: 竹迫 良範: 本のKindle化ボタンも合わせておくといいと思います。  

[dmayo3]

JS testing with Zombie and Buster.js

JavaScript and UI testing in the browser remains hard for non-trivial applications! Luckily there are some really awesome frameworks in development right now. I've been evaluating zombie and buster.js, so here are my thoughts on them. Zombie.js is a headless browser environment and test framework built on phantom.js. It's similar to Selenium, except that it doesn't run in real browsers or support multiple programming languages. The advantage is that it's dead simple to setup and integrate into a CI build. It also claims to be 'insanely fast', something I can't really comment on yet. Personally I couldn't get it to work for non-trivial tests in the project I'm working on. I suspect that zombie may be confounded by the asynchronous module loading behaviour of the Dojo framework that the project uses. The latest version of zombie is an alpha, so hopefully zombie will get better as the project matures. Another project that shows enormous promise is buster.js. The goal of the project is to provide the tools to run tests in real browsers, node.js and phantom.js. It runs browser tests in parallel, so it's quick. It has the sinon mocking/stubbing framework built in. However, it's currently beta and it definitely shows. Within a few minutes of following the quick start tutorial I discovered things that just don't work.

[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.