qunit再入門 (version 1.10.0 編)
TRANSCRIPT
QUnit 再入門(Version 1.10.0 編)
12年12月12日水曜日
自己紹介
@kozy4324
JS/AS3.0でフロントエンド開発
最近はObjective-C
12年12月12日水曜日
QUnitとは？
使い方（ミニマム）
使い方（ケーススタディ）
12年12月12日水曜日
QUnitとは？
使い方（ミニマム）
使い方（ケーススタディ）
12年12月12日水曜日
JavaScriptのユニットテスティングフレームワーク
jQueryの開発に利用されている
MITライセンス
QUnitとは？
12年12月12日水曜日
特徴シンプルなAPIWebブラウザ上で動くJSがメインターゲットHTMLレポート非同期処理テストのサポートDOM fixtureNode.jsやRhino上でも動く
12年12月12日水曜日
QUnitとは？
使い方（ミニマム）
使い方（ケーススタディ）
12年12月12日水曜日
HTMLを作成qunit.jsとqunit.cssを読み込むテスト対象のjsを読み込むテストコードのjsを読み込むid="qunit"の要素を追加
前準備
12年12月12日水曜日
サンプルHTML<!DOCTYPE html><html><head> <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>
テスト結果がこの要素に出力される
titileは任意だが設定推奨テスト結果のマークを付与してくれる
12年12月12日水曜日
API（ミニマム）test()Assertok()equal(), notEqual()deepEqual(), notDeepEqual()strictEqual(), notStrictEqual()
12年12月12日水曜日
これだけ知ってればテスト書けます
12年12月12日水曜日
書いてみる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日水曜日
equal()とstrictEqual()
equal()は「==」で比較
strictEqual()は「===」で比較
JSで 1 == "1" は true なのよ
12年12月12日水曜日
QUnitとは？
使い方（ミニマム）
使い方（ケーススタディ）
12年12月12日水曜日
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日水曜日
A. module()とsetup/teardownmodule("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日水曜日
Q. Assert回数をチェックしたい
test("test 1", function() { // myMethodはコールバック関数を受け取る myMethod(function() { ok(true); });
// コールバック関数が実行されないとこのテストはパスする // コールバックされたことをテストしたい...});
12年12月12日水曜日
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日水曜日
Q. 例外の振る舞いをチェックしたい
test("test 1", function() { myFunc(); // myFunc()が例外をthrowするかどうか // どう書く...？});
12年12月12日水曜日
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日水曜日
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日水曜日
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日水曜日
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日水曜日
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日水曜日
Q. 特定のテストだけ実行したい
12年12月12日水曜日
A. HTMLレポート画面から特定テスト実行の操作が可能
モジュール毎の絞り込み実行が可能
カラムダブルクリックで該当テストのみ再実行
12年12月12日水曜日
Q. 変数のグローバル汚染を検出したい
12年12月12日水曜日
A. 変数グローバル汚染チェックモードがある
選択するとテスト再実行汚染があれば該当テストがfailする
12年12月12日水曜日
Q. Mockを利用した振る舞いのテストをしたい
12年12月12日水曜日
A. Sinon.JSのsinon-qunitを利用（別プロダクトなので説明割愛）
12年12月12日水曜日
おまけ API変更点Assert APICommonJS Unit Testing互換にequals → equalsame → deepEqualraises → throws
Assertのスコープ推奨はtestコールバックの引数test("test", function(assert) { assert.ok(ok);});
12年12月12日水曜日
Let's QUnit !!!
12年12月12日水曜日