【レポート】jQueryテストスイート「QUnit」がスタンドアロン化! 使い方を早速チェック (3) 主なメソッドの使い方 | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【レポート】

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

3 主なメソッドの使い方

富田宏昭　 [2009/10/14]

印刷

先頭
前へ
- 1
- 2
- 3
- ／3

Hello, QUnit! - いろいろなメソッド

QUnitにはここまで紹介したもの以外にも、さまざまな機能が用意されている。

Setup

asyncTest: 非同期のテストをおこなう。Ajax処理のテストに使用
expect: テスト内で実行されるアサーション数の予測値を指定。指定した値と実際に実行されたアサーションの数が一致しない場合はfailed扱いとなる
module: モジュール名を定義する。定義したモジュール名をtest()のname内で使用して各テストをモジュールで区切り、一意のグループとして扱うことができる

Assertions

same: equivを使用して、2つのオブジェクトを再帰的に比較する。「===」演算子を用い、equals()よりも厳密な型の比較をおこなう

Asynchronous Testing

start: 一時停止中のテストを再開する
stop: 実行中のテストを一時停止する。start()で続行できる

上記のうち、ここでは「expect()を使用したテスト」「module()を使用したテスト」の書き方を紹介しよう。

expect()を使用したテスト

expect()はtest()で使用する関数内に記述する。そのテスト内で実行されるアサーション数の予測値を指定しておく。指定した値と実際に実行されたアサーションの数が一致しない場合は、たとえ全アサーションにpassedしていてもfailed扱いとなる。

expect.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Expect test / pass</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('Expect test', function() {
                    expect(2);

                    var testString = 'testValue';
                    ok( 5 < testString.length, 'testStringが5文字を超えていること');
                    ok( 'testValue' === testString, 'testStringが「testValue」であること');
                });

            }
        );
        -->
        </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>

「Expect test」テストで使用する関数の先頭にexpect()でアサーション数の予測値を2とした。実際に使用したokメソッドの数も2つ。これをWebブラウザで表示する。

expect()で指定した数と、テスト内で実際に実行されたアサーションの数が一致したのでテストはpassed判定となった

expect.htmlのコードのうち、expect(2)をexpect(1)に変更して再度Webブラウザで表示してみよう。

expect()で指定した数と、テスト内で実際に実行されたアサーションの数が一致しなかったため、failed判定となった

expect()で指定した数と、テスト内で実際に実行されたアサーションの数が一致しなかった。「Expected 1 assertions, but 2 were run」と表示され、Expect testテストはfailed判定となる。

module()を使用したテスト

モジュール名を定義する。定義したモジュール名をtest()のname内で使用することで、各テストをモジュールで区切り、一意のグループとして扱うことができる。なおmodule()は以前のQUnitに実装されていた機能と比較すると、いくつか動作の違いがあるので注意されたい。

module.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Module test</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('test', function() {
                    var testString = 'testValue';
                    ok( 5 < testString.length, 'testStringが5文字を超えていること');
                    ok( 'testValue' === testString, 'testStringが「testValue」であること');
                });

                module('module21');

                test('module1 - test 1', function() {
                    var testString = 'testValue';
                    ok( 5 < testString.length, 'testStringが5文字を超えていること');
                    ok( 'testValue' === testString, 'testStringが「testValue」であること');
                });

                test('module1 - test 2', function() {
                    var testString = 'testValue';
                    ok( 5 < testString.length, 'testStringが5文字を超えていること');
                    ok( 'testValue' === testString, 'testStringが「testValue」であること');
                });

                module('module2');

                test('module2 - test 1', function() {
                    var testString = 'testValue';
                    ok( 5 < testString.length, 'testStringが5文字を超えていること');
                    ok( 'testValue' === testString, 'testStringが「testValue」であること');
                });
            }
        );
        -->
        </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>

全4つのテストのうち、2つを「module1」、1つを「module2」として定義した。これをWebブラウザで表示する。