QUnit 再入門                (Version 1.10.0 編)12年12月12日水曜日
自己紹介               @kozy4324               JS/AS3.0でフロントエンド開発               最近はObjective-C12年12月12日水曜日
QUnitとは?               使い方(ミニマム)               使い方(ケーススタディ)12年12月12日水曜日
QUnitとは?               使い方(ミニマム)               使い方(ケーススタディ)12年12月12日水曜日
http://qunitjs.com/12年12月12日水曜日
QUnitとは?               JavaScriptのユニットテスティン               グフレームワーク               jQueryの開発に利用されている               MITライセンス1...
特徴               シンプルなAPI               Webブラウザ上で動くJSがメイン               ターゲット                HTMLレポート                非同期処理...
QUnitとは?               使い方(ミニマム)               使い方(ケーススタディ)12年12月12日水曜日
前準備               HTMLを作成               qunit.jsとqunit.cssを読み込む               テスト対象のjsを読み込む               テストコードのjsを読み込む  ...
サンプルHTML          <!DOCTYPE html>          <html>          <head>                       titileは任意だが設定推奨            <meta c...
API(ミニマム)               test()               Assert                 ok()                 equal(), notEqual()              ...
これだけ知ってれば                テスト書けます12年12月12日水曜日
書いてみる          test("第1引数にtest名を記述", function() {               var result = myFunc1();               ok(result, "resultがt...
equal()とstrictEqual()               equal()は「==」で比較               strictEqual()は「===」で比較               JSで 1 == "1" は true...
QUnitとは?               使い方(ミニマム)               使い方(ケーススタディ)12年12月12日水曜日
Q. 共通処理をまとめたい          test("test 1", function() {            var myInstance = new MyClass();            equal(myInstance....
A. module()とsetup/teardown          module("module A", {            setup: function() {              this.myInstance = new...
Q. Assert回数をチェックしたい          test("test 1", function() {            // myMethodはコールバック関数を受け取る               myMethod(funct...
A. expect()          test("test 1", function() {            expect(1);            myMethod(function() {              ok(tr...
Q. 例外の振る舞いをチェックしたい          test("test 1", function() {            myFunc();            // myFunc()が例外をthrowするかどうか        ...
A. throws()          test("test 1", function() {            throws(function() {               myMethod();            },   ...
Q. 非同期処理のテストがしたい          test("test 1", function() {            expect(1);            jQuery.get("data.json", function(da...
A. start(), stop()          test("test 1", function() {            expect(1);            jQuery.get("data.json", function(...
Q. テスト毎にDOMクリアしたい          test("test 1", function() {            document.getElementById("div").innerHTML = html;        ...
A. id="qunit-fixture"な要素を                 利用すると幸せになれる      /**       * id="qunit-fixture"の要素はテスト毎に復元される        * (config.fi...
Q. 特定のテストだけ実行したい12年12月12日水曜日
A. HTMLレポート画面から               特定テスト実行の操作が可能                                  モジュール毎の                                  絞り込み...
Q. 変数のグローバル汚染を                   検出したい12年12月12日水曜日
A. 変数グローバル汚染               チェックモードがある                    選択するとテスト再実行                    汚染があれば該当テストがfailする12年12月12日水曜日
Q. Mockを利用した               振る舞いのテストをしたい12年12月12日水曜日
A. Sinon.JSのsinon-qunitを利用               (別プロダクトなので説明割愛)12年12月12日水曜日
おまけ API変更点               Assert API                CommonJS Unit Testing互換に                  equals → equal               ...
Lets QUnit !!!12年12月12日水曜日
Upcoming SlideShare
Loading in …5
×

Qunit再入門 (Version 1.10.0 編)

5,587 views

Published on

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,587
On SlideShare
0
From Embeds
0
Number of Embeds
404
Actions
Shares
0
Downloads
25
Comments
0
Likes
12
Embeds 0
No embeds

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
  • Qunit再入門 (Version 1.10.0 編)

    1. 1. QUnit 再入門 (Version 1.10.0 編)12年12月12日水曜日
    2. 2. 自己紹介 @kozy4324 JS/AS3.0でフロントエンド開発 最近はObjective-C12年12月12日水曜日
    3. 3. QUnitとは? 使い方(ミニマム) 使い方(ケーススタディ)12年12月12日水曜日
    4. 4. QUnitとは? 使い方(ミニマム) 使い方(ケーススタディ)12年12月12日水曜日
    5. 5. http://qunitjs.com/12年12月12日水曜日
    6. 6. QUnitとは? JavaScriptのユニットテスティン グフレームワーク jQueryの開発に利用されている MITライセンス12年12月12日水曜日
    7. 7. 特徴 シンプルなAPI Webブラウザ上で動くJSがメイン ターゲット HTMLレポート 非同期処理テストのサポート DOM fixture Node.jsやRhino上でも動く12年12月12日水曜日
    8. 8. QUnitとは? 使い方(ミニマム) 使い方(ケーススタディ)12年12月12日水曜日
    9. 9. 前準備 HTMLを作成 qunit.jsとqunit.cssを読み込む テスト対象のjsを読み込む テストコードのjsを読み込む id="qunit"の要素を追加12年12月12日水曜日
    10. 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. 11. API(ミニマム) test() Assert ok() equal(), notEqual() deepEqual(), notDeepEqual() strictEqual(), notStrictEqual()12年12月12日水曜日
    12. 12. これだけ知ってれば テスト書けます12年12月12日水曜日
    13. 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. 14. equal()とstrictEqual() equal()は「==」で比較 strictEqual()は「===」で比較 JSで 1 == "1" は true なのよ12年12月12日水曜日
    15. 15. QUnitとは? 使い方(ミニマム) 使い方(ケーススタディ)12年12月12日水曜日
    16. 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. 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. 18. Q. Assert回数をチェックしたい test("test 1", function() { // myMethodはコールバック関数を受け取る myMethod(function() { ok(true); }); // コールバック関数が実行されないとこのテストはパスする // コールバックされたことをテストしたい... });12年12月12日水曜日
    19. 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. 20. Q. 例外の振る舞いをチェックしたい test("test 1", function() { myFunc(); // myFunc()が例外をthrowするかどうか // どう書く...? });12年12月12日水曜日
    21. 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. 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. 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. 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. 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. 26. Q. 特定のテストだけ実行したい12年12月12日水曜日
    27. 27. A. HTMLレポート画面から 特定テスト実行の操作が可能 モジュール毎の 絞り込み実行が可能 カラムダブルクリックで 該当テストのみ再実行12年12月12日水曜日
    28. 28. Q. 変数のグローバル汚染を 検出したい12年12月12日水曜日
    29. 29. A. 変数グローバル汚染 チェックモードがある 選択するとテスト再実行 汚染があれば該当テストがfailする12年12月12日水曜日
    30. 30. Q. Mockを利用した 振る舞いのテストをしたい12年12月12日水曜日
    31. 31. A. Sinon.JSのsinon-qunitを利用 (別プロダクトなので説明割愛)12年12月12日水曜日
    32. 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. 33. Lets QUnit !!!12年12月12日水曜日

    ×