Qunit再入門 (Version 1.10.0 編)

  • 4,280 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,280
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
21
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \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

Transcript

  • 1. QUnit 再入門 (Version 1.10.0 編)12年12月12日水曜日
  • 2. 自己紹介 @kozy4324 JS/AS3.0でフロントエンド開発 最近はObjective-C12年12月12日水曜日
  • 3. QUnitとは? 使い方(ミニマム) 使い方(ケーススタディ)12年12月12日水曜日
  • 4. QUnitとは? 使い方(ミニマム) 使い方(ケーススタディ)12年12月12日水曜日
  • 5. http://qunitjs.com/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日水曜日
  • 12. これだけ知ってれば テスト書けます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日水曜日
  • 14. equal()とstrictEqual() equal()は「==」で比較 strictEqual()は「===」で比較 JSで 1 == "1" は true なのよ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日水曜日
  • 26. Q. 特定のテストだけ実行したい12年12月12日水曜日
  • 27. A. HTMLレポート画面から 特定テスト実行の操作が可能 モジュール毎の 絞り込み実行が可能 カラムダブルクリックで 該当テストのみ再実行12年12月12日水曜日
  • 28. Q. 変数のグローバル汚染を 検出したい12年12月12日水曜日
  • 29. A. 変数グローバル汚染 チェックモードがある 選択するとテスト再実行 汚染があれば該当テストがfailする12年12月12日水曜日
  • 30. Q. Mockを利用した 振る舞いのテストをしたい12年12月12日水曜日
  • 31. A. Sinon.JSのsinon-qunitを利用 (別プロダクトなので説明割愛)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日水曜日
  • 33. Lets QUnit !!!12年12月12日水曜日