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">

フィクスチャを追加

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

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

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

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

テストケースを作成する

2つの引数を指定して、QUnit.test関数を呼び出します。

名前-テスト結果を表示するテストの名前。
機能-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（）*を呼び出します。テストケースの実行は、テストランナーによって延期および制御されます。

出力を確認する

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

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

Qunit-basic-usage