QUnit-基本的な使用法

次に、基本的な例を使用して、QUnitでキックスタートを取得するためのステップバイステップのプロセスを示します。

qunit.jsをインポートする

Qunitライブラリのqunit.jsは、テストランナーとテストフレームワークを表します。

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

qunit.cssをインポートする

Qunitライブラリのqunit.cssは、テスト結果を表示するためにテストスイートページのスタイルを設定します。

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

フィクスチャを追加

で2つのdiv要素を追加します id = "qunit" そして "qunit-fixture"。これらのdiv要素は必須であり、テスト用のフィクスチャを提供します。

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

テストする関数を作成する

function square(x) {
   return x * x;
}

テストケースを作成する

2つの引数を使用してQUnit.test関数を呼び出します。

Name −テスト結果を表示するためのテストの名前。
Function −1つ以上のアサーションを持つ関数テストコード。

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

テストを実行する

ここで、動作中の完全なコードを見てみましょう。

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

ブラウザにページをロードします。テストランナーはQUnit.test()ページが読み込まれ、テストがキューに追加されたとき。テストケースの実行は延期され、テストランナーによって制御されます。

出力を確認する

次の結果が表示されます-

Header−テストスイートヘッダーには、ページタイトルが表示され、すべてのテストに合格すると緑色のバーが表示されます。それ以外の場合は、少なくとも1つのテストが失敗した場合の赤いバー、テスト結果をフィルタリングするための3つのチェックボックスのあるバー、およびブラウザーの詳細を表示するためのnavigator.userAgentテキストのある青いバー。
Hide passed tests checkbox −合格したテストケースを非表示にし、失敗したテストケースのみを表示します。
Check for globals checkbox−各テストの前後に、ウィンドウオブジェクトのすべてのプロパティのリストを表示するには、違いを確認します。プロパティを変更すると、テストに失敗します。
No try-catch checkbox − try-catchブロックの外部でテストケースを実行して、テストが例外をスローした場合に、テストランナーが停止してネイティブ例外を表示するようにします。
Summary−テストケースの実行にかかった合計時間を示します。実行されたテストケースと失敗したアサーションの合計。
Contents−テスト結果を表示します。各テスト結果には、テストの名前の後に、失敗、合格、および合計のアサーションが続きます。各エントリをクリックすると、詳細が表示されます。