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ブラウザで表示する。

実際におこなわれたテストが表示された。いままでのように、テスト名の先頭に「(モジュール名) :」という文字列は表示されない模様

現時点ではいままでのように、テスト名の先頭に「(モジュール名) :」という文字列は表示されないようだ。マニュアルに「All tests that follow get the name of this module prepended.」と記載されていることから、今後表示される可能性がある。

このほか、各テストにモジュールという概念を定義しておくことで「あるモジュールのみのテストをおこなう」といったことも可能となる。Webブラウザで表示する際、ファイル名に引数でモジュール名を指定すると関連するテストのみが実行される。

module.html?module1にアクセスすると、test()のnameに「module1」を含むテストのみが実行される

QUnitの使い方、移行後の変更点を簡単に紹介した。テストスイートの書き方については成果物のtest.jsのほかにも、実際にjQueryのテストに使用されているファイルが「REFERENCE TEST SUITES」として掲載されているので、そちらも参考にされたい。

Webアプリケーションの需要が高い今日では、JavaScriptの出番もおおい。開発を円滑にすすめる上でも、テストスイートは積極的に使っていきたいところだ。