Home > JavaScript | 勉強会 > 【Javascript】QUnit導入と単体テスト–第1回社内勉強会

【Javascript】QUnit導入と単体テスト–第1回社内勉強会

参加者:@geckotang @cancer6
(たぶん増えない)

QUnit導入

qUnit本体 http://dev.jquery.com/view/trunk/qunit/testrunner.js
CSS http://dev.jquery.com/view/trunk/qunit/testsuite.css
jquery http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

メソッド

  • test(name, test_func) … 通常のテスト
  • asyncTest(name, test_func) … 非同期テスト
  • module(name) … テストのグループ化

  • ok(state, message) … stateがtrueならテスト通過、falseならテスト不通過

テストが正常に通過したか、関数が正常に動作しているか、などのチェック

sample

$(function(){
    module('sample1');
    function hoge (x) {
        return x;
    };
    test("example1", function() {
        hoge(10);
        ok( true, "all pass" );
    });
    test("example2", function() {
        _hoge(10);
        ok( true, "all pass" ); //_hoge()は無いので通らない
    });
});

  • equals(actual, expected, message) … 実際の値(actual)が、期待する値(expected)と一致(==)するかどうか
  • same(actual, expected, message) … 実際の値(actual)が、期待する値(expected)と厳密に一致(===)するかどうか

実行結果と期待値とを比較する。たぶんよく使うのはこっち。

sample

$(function(){
    module('sample2');
    function hoge (x) {
        return x;
    };
    test("example1", function(){
        var ho = hoge(10);
        equals( 10, ho, "引数は10でした。" );
    });
});

  • stop() … テスト中断。非同期処理の処理完了待ちなど
  • stop(ms) … (ms後に)テスト中止。非同期処理で一定時間応答がない場合など。タイムアウト
  • start() … テスト再開。stop()や、asynctest()などで中断してるテストを再開する時に

sample

$(function(){
    module('sample3');
    asyncTest("asyncTest",function(){
        stop(100); //100ms経っても$.getの応答がなかったら中断
        var r = $.get('/');
        r.done(function(e){
            start();
            console.log;
            ok(true,'success');
        });
        ok(true,'finish'); //中断しても実行される
    });
});

  • expect() … テスト総数。テストが期待した回数実行されたかどうか

引数に実行回数を取る。多くても少なくてもダメ。expectedオプションというのもある

sample

$(function(){
    module('sample4');
    test("even_test",function(){
        //偶数を取ってきたい
        $.each([1,2,3,4,5,6], function(i){
            var surplus = i%3; //間違えた!
            if(surplus === 0){
                ok(true, 'This number is even!');
            }
        });
        expect(3); //テストの実行は2回しかされないので、不通過になる
    });
});

上記サンプルの実行結果はこんな感じ

forked: QUnit sample – jsdo.it – share JavaScript, HTML5 and CSS

テスト方法

基本的には期待する結果をハードコーディングする。
ex) テキストベタ書き。htmlベタ書き

domのテストの場合は、テストページに期待するhtmlを書いたり、外部ファイル化して調べたり。

forked: QUnit sample – jsdo.it – share JavaScript, HTML5 and CSS

その他

ユーザの動きが必要な場合は、QUnitよりも”Slenium
ex) ログイン処理、購入確認など

Selenium – Web Browser Automation
ブラウザを選ばずWebテストを自動化するSelenium (2/3) – @IT

@kyo_ago さんが”JsTestDriver“がいいって言ってた。でもJava
JSの単体テストにJsTestDriverがおすすめ|0-9

おまけ

Wi-Fiを経由すればFiddlerできる(Charlesも一応)

Charlesは$50/1-4licenseだから買ってもいいかもね(円高だし)

日本語コメントの後ろには半角スペース入れたほうがいいよ(文字化け防止)

次回

1ヶ月に1回ぐらいできればいいね

次やるときは事前にテーマ決めるとか

参考

今から3分で qUnit の使い方を身に付ける (JavaScriptの単体テスト) – 主に言語とシステム開発に関して
QUnitの基本的な使い方 – Block Rockin’ Codes
JavaScriptで単体テストをするならQUnitはいかが? at HouseTect, JavaScriptな情報をあなたに
無職のプログラミング  QUnit & jQuery でイベント起動処理のテストを行う

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://unolabo.boo.jp/archives/2012/01/11-qunit%e5%b0%8e%e5%85%a5%e3%81%a8%e5%8d%98%e4%bd%93%e3%83%86%e3%82%b9%e3%83%88.html/trackback
Listed below are links to weblogs that reference
【Javascript】QUnit導入と単体テスト–第1回社内勉強会 from うのらぼ。

Home > JavaScript | 勉強会 > 【Javascript】QUnit導入と単体テスト–第1回社内勉強会

Search
Feeds
Meta

Return to page top