Qunit再入門 (Version 1.10.0 編)

QUnit 再入門
(Version 1.10.0 編)

12年12月12日水曜日

自己紹介

@kozy4324

JS/AS3.0でフロントエンド開発

最近はObjective-C


QUnitとは？

使い方（ミニマム）

使い方（ケーススタディ）


http://qunitjs.com/


QUnitとは？
JavaScriptのユニットテスティン
グフレームワーク

jQueryの開発に利用されている

MITライセンス


特徴
シンプルなAPI
Webブラウザ上で動くJSがメイン
ターゲット
HTMLレポート
非同期処理テストのサポート
DOM ﬁxture
Node.jsやRhino上でも動く

前準備
HTMLを作成
qunit.jsとqunit.cssを読み込む
テスト対象のjsを読み込む
テストコードのjsを読み込む
id="qunit"の要素を追加


サンプル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>


API（ミニマム）
test()
Assert
ok()
equal(), notEqual()
deepEqual(), notDeepEqual()
strictEqual(), notStrictEqual()


これだけ知ってれば
テスト書けます


書いてみる
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}}, "再帰的にチェック可能");
});


equal()とstrictEqual()

equal()は「==」で比較

strictEqual()は「===」で比較

JSで 1 == "1" は true なのよ


Q. 共通処理をまとめたい

test("test 1", function() {
var myInstance = new MyClass();
equal(myInstance.getHoge(), "hoge");
});

equal(myInstance.getFoo(), "foo");
});

equal(myInstance.getBar(), "bar");
});


A. module()とsetup/teardown
module("module A", {
setup: function() {
this.myInstance = new MyClass();
}
});

equal(this.myInstance.getHoge(), "hoge");
});

equal(this.myInstance.getFoo(), "foo");
});

equal(this.myInstance.getBar(), "bar");
});


Q. Assert回数をチェックしたい

// myMethodはコールバック関数を受け取る
myMethod(function() {
ok(true);
});

// コールバック関数が実行されないとこのテストはパスする
// コールバックされたことをテストしたい...
});


A. expect()

expect(1);
ok(true);
});
// Assertされないとfail
});

test("test 2", 1, function() {
ok(true);
});
// test()の第2引数にも指定できる
});


Q. 例外の振る舞いをチェックしたい

myFunc();
// myFunc()が例外をthrowするかどうか
// どう書く...？
});


A. throws()

throws(function() {
myMethod();
},
"myMethodが例外をthrowするとこのテストはパスする");
});

throws(function() {
throw new CustomError()
},
CustomError, // 第2引数にはErrorクラス or RegExp
"throwされる例外の型や含まれるメッセージでもテスト可能");
});


Q. 非同期処理のテストがしたい

expect(1);
jQuery.get("data.json", function(data) {
equal(data.hoge, "hoge");
});
});

ok(true);
});

// このテストは正しく実行されない
// "test 1"のAssertが実行される前に"test 2"が開始される...


A. start(), stop()
expect(1);
start(); // start()で次テスト実行が開始される
});
stop(); // stop()で次テスト実行が保留される
});

asyncTest("test 2", function() {
expect(1);
start();
});
// asyncTestにするとstop()を省略できる
});


Q. テスト毎にDOMクリアしたい

document.getElementById("div").innerHTML = html;
// テスト...
});

// テスト...
});

// テスト...
});


A. id="qunit-ﬁxture"な要素を
利用すると幸せになれる
/**
* id="qunit-fixture"の要素はテスト毎に復元される
* (config.fixtureに復元用のinnerHTMLが保持される)
*/
document.getElementById("qunit-fixture").innerHTML = "hi";
notEqual(
document.getElementById("qunit-fixture").innerHTML,
QUnit.config.fixture);
});

equal(
document.getElementById("qunit-fixture").innerHTML,
QUnit.config.fixture);
});


Q. 特定のテストだけ実行したい


A. HTMLレポート画面から
特定テスト実行の操作が可能

モジュール毎の
絞り込み実行が可能

カラムダブルクリックで
該当テストのみ再実行


Q. 変数のグローバル汚染を
検出したい


A. 変数グローバル汚染
チェックモードがある
選択するとテスト再実行
汚染があれば該当テストがfailする


Q. Mockを利用した
振る舞いのテストをしたい


A. Sinon.JSのsinon-qunitを利用
（別プロダクトなので説明割愛）


おまけ API変更点
Assert API
CommonJS Unit Testing互換に
equals → equal
same → deepEqual
raises → throws
Assertのスコープ
推奨はtestコールバックの引数
test("test", function(assert) {
assert.ok(ok);
});


Let's QUnit !!!


Qunit再入門 (Version 1.10.0 編)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Qunit再入門 (Version 1.10.0 編)

Ähnlich wie Qunit再入門 (Version 1.10.0 編) (20)

Qunit再入門 (Version 1.10.0 編)

Hinweis der Redaktion