jQueryテストスイート「QUnit」がスタンドアロン化! 使い方を早速チェック

Hello, QUnit! - まずは簡単なテストから

ここでの動作環境は次のとおり。

OS: Mac OS X 10.6.1
Webブラウザ: Firefox 3.5.4 (Build 1)

GitHubよりダウンロードした成果物にふくまれるサンプルを参考にしながら、簡単なテストを作成してみよう。

hello_qunit.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, QUnit!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <link href="./qunit/qunit.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="./qunit/qunit.js"></script>
        <script type="text/javascript">
        <!--
        $
        (
            function()
            {
                test('Hello, QUnit! - ok assertions test', function() {
                    var testString = 'testValue';
                    ok( 5 < testString.length , 'testStringが5文字を超えていること');
                });

                test('Hello, QUnit! - equals assertions test', function() {
                    var actualString = 'testValue';
                    var expectedString = 'testValue';
                    equals( actualString, expectedString, 'actualStringとexpectedStringがおなじ値であること');

                    var actualArray = new Array(1,2,3,4,5);
                    var expectedArray = actualArray;
                    equals( actualArray, expectedArray, 'actualArrayとexpectedArrayがおなじ配列であること');
                });
            }
        );
        -->
        </script>
    </head>

    <body>
    <h1 id="qunit-header">QUnit Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    </body>
</html>

このJavaScriptコードでは3つの簡単なテストをおこなっている。このファイルをWebブラウザで表示する。

QUnit Test Suiteというタイトルとユーザエージェント情報、実際におこなったテストが表示された。テスト名右部の数値は左から順に、テスト内の「アサーションに失敗した総数」「アサーションに成功した総数」「アサーション総数」が表示される。すべてのテストにパスしたので「3 tests of 3 passed, 0 failed.」となり、上部バナーの色は緑となる

テスト名をクリックすると、設定したアサーションと結果がリスト表示される

このようにQUnitを使えば、わずかなコードでテストがおこなえるようになる。このサンプルコードで使用したメソッドは3つだ。

test()

test( name, [expected], test )

String name: テスト名を指定
Number expected: アサーション数を指定(オプション)
Function test: 実行したいテストコードをふくむ関数を指定。関数内には最低1つのアサーションが必要

このメソッドでは実行したいテストと、その名称を記述する。expectedは移行後に用意された引数で、省略が可能。アサーションをふくまない関数を指定してもエラーにはならないが、当然テストは実行されない。

ok()

ok( state, [message] )

Boolean state: ブール値を返す評価式を指定
message: アサーション結果と一緒に表示するテキストを指定(オプション)

stateがtrueならpassed、falseならfailed判定となる。JUnitのassertTrueに相当する機能だ。

equals()

equals( actual, expected, [message] )

Object actual: 評価したいオブジェクトを指定
Object expected: 期待するオブジェクトを指定
message: アサーション結果と一緒に表示するテキストを指定(オプション)

評価したいオブジェクトと期待するオブジェクトが一致した場合にpassed、一致しない場合はfailed判定となる。JUnitのassertEqualsに相当する機能。非ブール値を比較するときはok()ではなく、equals()を用いるようにアナウンスされている。

今度はわざとテストに失敗するようなコードを書いてみよう。

hello_qunit_2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, QUnit!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <link href="./qunit/qunit.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="./qunit/qunit.js"></script>
        <script type="text/javascript">
        <!--
        $
        (
            function()
            {

                test('Hello, QUnit! - ok assertions test', function() {
                    var testString = 'testValue';
                    ok( 5 < testString.length, 'testStringが5文字を超えていること');
                });

                test('Hello, QUnit! - equals assertions test', function() {
                    var actualString = 'testValur';
                    var expectedString = 'testValue';
                    equals( actualString, expectedString, 'actualStringとexpectedStringがおなじ値であること');

                    var actualArray = new Array(1,2,3,4,5);
                    var expectedArray = actualArray;
                    equals( actualArray, expectedArray, 'actualArrayとexpectedArrayがおなじ配列であること');
                });
            }
        );
        -->
        </script>
    </head>

    <body>
        <h1 id="qunit-header">QUnit Test Suite</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
    </body>
</html>

「Hello, QUnit! - equals assertions test」テスト内でactualStringの「testValue」とするところを「testValur」とした。これをWebブラウザで表示する。

アサーションに失敗し、上部バナーの色が赤となった。失敗したアサーションと、評価した結果が赤字で表示される。画面上部のチェックボックスで、パスしているテストを非表示とすることもできる

テストに失敗した場合は画面上部バナーが赤くなり、パッと見でテストが通らなかったことが確認できるようになっている。あまり見たくないこの画面だが、実際に遭遇した場合はFirebugなどの各種ツールを使いながら、バグを修正しよう。