ざくにく定食: JavaScriptのテスト環境を整える

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

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

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

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

% bower install mocha

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

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

	<html>
	<head>
	<meta charset="utf-8">
	<title>Mocha Tests</title>
	<link rel="stylesheet" href="components/mocha/mocha.css" />
	</head>
	<body>
	<div id="mocha"></div>
	<script src="components/mocha/mocha.js"></script>
	<script>mocha.setup('tdd')</script>
	<script>
	mocha.checkLeaks();
	mocha.run();
	</script>
	</body>
	</html>

view raw mocha_template.html hosted with ❤ by GitHub

これをブラウザを開いてみると、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を編集して、テストを書く。

var a = 1;

view raw main.js hosted with ❤ by GitHub

	<html>
	<head>
	<meta charset="utf-8">
	<title>Mocha Tests</title>
	<link rel="stylesheet" href="components/mocha/mocha.css" />
	</head>
	<body>
	<div id="mocha"></div>
	<script src="components/chai/chai.js"></script>
	<script src="components/mocha/mocha.js"></script>
	<script>mocha.setup('tdd');</script>
	<script src="main.js"></script>
	<script src="test.js"></script>
	<script>
	mocha.checkLeaks();
	mocha.run();
	</script>
	</body>
	</html>

view raw mocha_template.html hosted with ❤ by GitHub

	var assert = chai.assert;
	suite('Array', function(){
	setup(function(){
	// ...
	});

	suite('#indexOf()', function(){
	test('should return -1 when not present', function(){
	assert.equal(-1, [1,2,3].indexOf(4));
	});
	});
	});

	suite('main', function(){
	suite('a', function(){
	test('should be 1', function(){
	assert.equal(1, a);
	});
	});
	});

view raw test.js hosted with ❤ by GitHub

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

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

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

ざくにく定食

ページ

2013年6月9日日曜日

JavaScriptのテスト環境を整える

0 件のコメント:

コメントを投稿