Contenu connexe
Similaire à Qunit再入門 (Version 1.10.0 編)
Similaire à Qunit再入門 (Version 1.10.0 編) (20)
Qunit再入門 (Version 1.10.0 編)
- 2. 自己紹介
@kozy4324
JS/AS3.0でフロントエンド開発
最近はObjective-C
12年12月12日水曜日
- 3. QUnitとは?
使い方(ミニマム)
使い方(ケーススタディ)
12年12月12日水曜日
- 4. QUnitとは?
使い方(ミニマム)
使い方(ケーススタディ)
12年12月12日水曜日
- 6. QUnitとは?
JavaScriptのユニットテスティン
グフレームワーク
jQueryの開発に利用されている
MITライセンス
12年12月12日水曜日
- 7. 特徴
シンプルなAPI
Webブラウザ上で動くJSがメイン
ターゲット
HTMLレポート
非同期処理テストのサポート
DOM fixture
Node.jsやRhino上でも動く
12年12月12日水曜日
- 8. QUnitとは?
使い方(ミニマム)
使い方(ケーススタディ)
12年12月12日水曜日
- 9. 前準備
HTMLを作成
qunit.jsとqunit.cssを読み込む
テスト対象のjsを読み込む
テストコードのjsを読み込む
id="qunit"の要素を追加
12年12月12日水曜日
- 10. サンプルHTML
<!DOCTYPE html>
<html>
<head> titileは任意だが設定推奨
<meta charset="utf-8"> テスト結果のマークを付与してくれる
<title>QUnit Example</title>
<link rel="stylesheet" href="qunit-1.10.0.css">
<script src="qunit-1.10.0.js"></script>
<script src="MyClass.js"></script>
<script src="MyClassTest.js"></script>
</head>
<body>
<div id="qunit"></div>
</body> テスト結果がこの要素に出力される
</html>
12年12月12日水曜日
- 11. API(ミニマム)
test()
Assert
ok()
equal(), notEqual()
deepEqual(), notDeepEqual()
strictEqual(), notStrictEqual()
12年12月12日水曜日
- 13. 書いてみる
test("第1引数にtest名を記述", function() {
var result = myFunc1();
ok(result, "resultがtrueでテストをパス");
});
test("論理的な単位でテストをまとめるとよい", function() {
var result = myFunc2();
equal(result, "hoge", "2値の比較はequalを利用");
});
test("オブジェクトの比較はdeepEqual()", function() {
var obj = myFunc3();
deepEqual(obj, {a:1, b:{c:1}}, "再帰的にチェック可能");
});
12年12月12日水曜日
- 15. QUnitとは?
使い方(ミニマム)
使い方(ケーススタディ)
12年12月12日水曜日
- 16. Q. 共通処理をまとめたい
test("test 1", function() {
var myInstance = new MyClass();
equal(myInstance.getHoge(), "hoge");
});
test("test 2", function() {
var myInstance = new MyClass();
equal(myInstance.getFoo(), "foo");
});
test("test 3", function() {
var myInstance = new MyClass();
equal(myInstance.getBar(), "bar");
});
12年12月12日水曜日
- 17. A. module()とsetup/teardown
module("module A", {
setup: function() {
this.myInstance = new MyClass();
}
});
test("test 1", function() {
equal(this.myInstance.getHoge(), "hoge");
});
test("test 2", function() {
equal(this.myInstance.getFoo(), "foo");
});
test("test 3", function() {
equal(this.myInstance.getBar(), "bar");
});
12年12月12日水曜日
- 18. Q. Assert回数をチェックしたい
test("test 1", function() {
// myMethodはコールバック関数を受け取る
myMethod(function() {
ok(true);
});
// コールバック関数が実行されないとこのテストはパスする
// コールバックされたことをテストしたい...
});
12年12月12日水曜日
- 19. A. expect()
test("test 1", function() {
expect(1);
myMethod(function() {
ok(true);
});
// Assertされないとfail
});
test("test 2", 1, function() {
myMethod(function() {
ok(true);
});
// test()の第2引数にも指定できる
});
12年12月12日水曜日
- 20. Q. 例外の振る舞いをチェックしたい
test("test 1", function() {
myFunc();
// myFunc()が例外をthrowするかどうか
// どう書く...?
});
12年12月12日水曜日
- 21. A. throws()
test("test 1", function() {
throws(function() {
myMethod();
},
"myMethodが例外をthrowするとこのテストはパスする");
});
test("test 1", function() {
throws(function() {
throw new CustomError()
},
CustomError, // 第2引数にはErrorクラス or RegExp
"throwされる例外の型や含まれるメッセージでもテスト可能");
});
12年12月12日水曜日
- 22. Q. 非同期処理のテストがしたい
test("test 1", function() {
expect(1);
jQuery.get("data.json", function(data) {
equal(data.hoge, "hoge");
});
});
test("test 2", function() {
ok(true);
});
// このテストは正しく実行されない
// "test 1"のAssertが実行される前に"test 2"が開始される...
12年12月12日水曜日
- 23. A. start(), stop()
test("test 1", function() {
expect(1);
jQuery.get("data.json", function(data) {
equal(data.hoge, "hoge");
start(); // start()で次テスト実行が開始される
});
stop(); // stop()で次テスト実行が保留される
});
asyncTest("test 2", function() {
expect(1);
jQuery.get("data.json", function(data) {
equal(data.hoge, "hoge");
start();
});
// asyncTestにするとstop()を省略できる
});
12年12月12日水曜日
- 24. Q. テスト毎にDOMクリアしたい
test("test 1", function() {
document.getElementById("div").innerHTML = html;
// テスト...
});
test("test 2", function() {
document.getElementById("div").innerHTML = html;
// テスト...
});
test("test 3", function() {
document.getElementById("div").innerHTML = html;
// テスト...
});
12年12月12日水曜日
- 25. A. id="qunit-fixture"な要素を
利用すると幸せになれる
/**
* id="qunit-fixture"の要素はテスト毎に復元される
* (config.fixtureに復元用のinnerHTMLが保持される)
*/
test("test 1", function() {
document.getElementById("qunit-fixture").innerHTML = "hi";
notEqual(
document.getElementById("qunit-fixture").innerHTML,
QUnit.config.fixture);
});
test("test 2", function() {
equal(
document.getElementById("qunit-fixture").innerHTML,
QUnit.config.fixture);
});
12年12月12日水曜日
- 27. A. HTMLレポート画面から
特定テスト実行の操作が可能
モジュール毎の
絞り込み実行が可能
カラムダブルクリックで
該当テストのみ再実行
12年12月12日水曜日
- 29. A. 変数グローバル汚染
チェックモードがある
選択するとテスト再実行
汚染があれば該当テストがfailする
12年12月12日水曜日
- 32. おまけ API変更点
Assert API
CommonJS Unit Testing互換に
equals → equal
same → deepEqual
raises → throws
Assertのスコープ
推奨はtestコールバックの引数
test("test", function(assert) {
assert.ok(ok);
});
12年12月12日水曜日
Notes de l'éditeur
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n