Qunitシリーズ--3.Qunit紹介(上)

15741 ワード
it
自動化テストソフトウェアは開発にとって重要なツールであり、ユニットテストは自動化テストにとって基本的な構成部分である:ソフトウェアの各コンポーネントまたはユニットは、非人工的に介入した場合に、テストツールを使用して繰り返し実行することができる.言い換えれば、テストを1回書いて、追加コストを払わずに何度も実行することができます.
オーバーライド率をテストするメリットに加えて、テストはソフトウェア設計を指導することができます.これはTDD(テスト駆動に基づく設計):テストがあり、開発コードがあります.簡単なテストを書き始め、現代コードを書き、コードがテストに合格することを保証します.上記の手順を完了したら、テストを拡張して、より多くの設計機能をカバーさせ、実装コードを作成します.開発が完了するまで上記の手順を繰り返すと、実装コードが以前のバージョンと非常に異なることがわかります.
JavaScriptのユニットテストは他の言語と変わらないので、テスト実行器を提供する小さなフレームワークが必要です.彼はテスト例を書くツールを提供します.
 

オートメーションユニットテスト


に質問


アプリケーションとフレームワークのテストを自動化し、TDDの開発方法を使用したいと思っています.独自のテストフレームワークを考えるかもしれませんが、それは多くの追加の作業が必要で、詳細に関連しすぎて、異なるブラウザでJavaScriptをテストする問題を処理する必要があります.

ソリューション


JavaScriptのユニットテストフレームワークはすでにたくさんあります.例えば、Qunitを選択することができます.Qunitはjqueryが使用するユニットテストフレームワークであり,異なるプロジェクトで広く使用されている.Qunitを使用するのは簡単です.htmlページに2つの関連ファイルを追加するだけでいいです.Qunitにはqunitが含まれています.js:テスタとテストフレームワーク、qunit.css:テストページは、テスト結果を表示するcssファイルです.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit basic example</title>
  <link rel="stylesheet" href="/resources/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/resources/qunit.js"></script>
  <script>
    test( "a basic test example", function() {
      var value = "hello";
      equal( value, "hello", "We expect value to be hello" );
    });
  </script>
</body>
</html>

ブラウザで上のファイルを開くと、次のように表示されます.


唯一必要なラベルは<body>id="qunit-fixture"を含む<div>,彼はすべてのQunitのテストに必要であり、このdiv要素が空であっても、テストに治具(fixture)を提供し、「テスト原子性を維持する」で詳しく説明します.


興味深い部分は、テストオペレータ(qunit.js)の後ろに付いているスクリプトラベルで、testメソッドが含まれています.彼は2つのパラメータを含み、最初のパラメータは文字列タイプで、テスト名を表し、テスト結果と方法に表示されます.2番目のパラメータは、実際のテストコードを含む関数です.彼は1つ以上の断言を含み、上の例はok()とequal()の2つの断言を含む.「断言結果」で詳しく説明します.


ここではdocument-readyは使用されていないことに気づきましたが、今回はテスト実行器がtest()をテストキューに追加するため、テスト用例が遅延して実行されます.


ディスカッション


テストキットのヘッダーにページ名が表示され、すべてのテストが合格したときに緑のバーが表示されます.少なくとも1つのテストに失敗した場合、赤いバーが表示されます.結果をフィルタする選択ボックスと、ブラウザ情報を表示する青いバーがあります.選択ボックスには「Hide passed tests」があり、多くの場合、成功したテストを非表示にし、失敗したテストのみを表示できます.


「」を選択すると、QUnitはテストの開始と終了のたびにwindowのすべてのプロパティを羅列し、異なる点を比較します.プロパティの追加と削除操作がある場合、テストに失敗し、異なるポイント情報が表示されます.これにより、テストコードとテストコードがグローバル属性を露出していないことを検証できます.


「notrycatch」選択ボックスの役割は、QUnitにtry-catchを使用してテストを実行しないことを伝え、異常が投げ出された場合、テストドライバが停止することです.しかし、古いブラウザ(ie 6など)を使用してテストを行うときに役立つ内部異常が得られます.


ヘッダーの下にテストのまとめがあり、テストの合計時間、成功と失敗のテストの合計数が表示されます.テストがまだ実行されている場合、どのテスト・インスタンスが実行されているかが表示されます.


ページの本体部分はテスト結果であり、各エンティティは名前で始まり、失敗数、成功数、総断言数に続く.エンティティをクリックすると、各ブレークスルーが表示され、常に期待値と実際の値が表示されます.最後の「Rerun」リンクでは、テストエンティティが個別に実行されます.


 


アサーション結果


に質問


任意のユニットテストの実際の要素は断言であり、テストの開発者はテストフレームワークを使用して、所望の値とテストを実行して得られた実際の値を比較する必要がある.


ソリューション


QUnitは3つの断言を提供します.


　　ok( truthy [, message ] )


ok()は最も基本的な方法であり、パラメータがtrueに等しい場合は成功を断言し、そうでない場合は失敗するパラメータしか必要ありません.例外として、テスト結果を表示するために追加の文字列パラメータも受け入れられます.


test( "ok test", function() {
  ok( true, "true succeeds" );
  ok( "non-empty", "non-empty string succeeds" );
 
  ok( false, "false fails" );
  ok( 0, "0 fails" );
  ok( NaN, "NaN fails" );
  ok( "", "empty string fails" );
  ok( null, "null fails" );
  ok( undefined, "undefined fails" );
});


 


　　equal( actual, expected [, message ] )


equal()法は,単純な比較子(==)を用いて所望値と実際値を比較した.彼らが等しいとき、成功しないと断言します.そうしないと失敗します.失敗すると、期待値と実績値が表示され、メッセージも表示されます.


test( "equal test", function() {
  equal( 0, 0, "Zero; equal succeeds" );
  equal( "", 0, "Empty, Zero; equal succeeds" );
  equal( "", "", "Empty, Empty; equal succeeds" );
  equal( 0, 0, "Zero, Zero; equal succeeds" );
 
  equal( "three", 3, "Three, 3; equal fails" );
  equal( null, false, "null, false; equal fails" );
});


ok()とequal()を使用すると、テストに失敗したときにどの値が問題を引き起こしたかを明らかに教えてくれるため、失敗したテストを見つけやすくなります.厳密な比較(===)を使用する必要がある場合はstrictEqual()を使用します.


 


　　deepEqual( actual, expected [, message ] )


deepEqual()はequal()のように使用できますが、彼が適用するシーンはもっと多いです.彼は単純な比較子(==)ではなく、より正確な比較子(===)を使用しています.この場合、undefinedはnull、0または空の文字列(")に等しくありません.彼は同時に対象の内容を比較し、{key: value} {key: value}， 。deepEqual() NaN，dates， ， ， equal() 。


test( "deepEqual test", function() {
  var obj = { foo: "bar" };
 
  deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
});


2つのオブジェクトの内容を明確に比較したくない場合はequal()を使用できますが、deepEqual()がより良い選択です.


 


シンクロコールバック


に質問


コールバック断言の実行を阻止し、テストが音もなく失敗する場合があります.


ソリューション


QUnitは、テストに含まれる全断言数を定義する特殊な断言を提供します.テストが終了すると、アサーションの合計数が等しくなく、他のアサーションの実行状況にかかわらず失敗を返します.使用上もかなり簡単で、テスト開始時にexpect()を呼び出し、メソッドパラメータとして所望の断言数を渡すだけです.


test( "a test", function() {
  expect( 2 );
 
  function calc( x, operation ) {
    return operation( x );
  }
 
  var result = calc( 2, function( x ) {
    ok( true, "calc() calls operation function" );
    return x * x;
  });
 
  equal( result, 4, "2 square equals 4" );
});


もう1つの方法は、所望の断言数を彼の2番目のパラメータとしてtest():

に渡すことである.
test( "a test", 2, function() {
 
  function calc( x, operation ) {
    return operation( x );
  }
 
  var result = calc( 2, function( x ) {
    ok( true, "calc() calls operation function" );
    return x * x;
  });
 
  equal( result, 4, "2 square equals 4" );
});


インスタンス:


test( "a test", 1, function() {
  var $body = $( "body" );
 
  $body.on( "click", function() {
    ok( true, "body was clicked!" );
  });
 
  $body.trigger( "click" );
});


 


ひどうきコールバック


に質問


expect()は、同期コールバックのテストに役立ちますが、非同期コールバックのテスト、非同期コールバック、およびテスト実行器内の実行キューの実行が競合することを処理するために使用できません.テストコードでtimeout、interval、またはajaxリクエストが実行されると、テスト実行器は、非同期操作を実行することなく、テストインスタンスの残りのコードを実行し続け、その後、テストキューの残りのインスタンスを実行します.


ソリューション


test()は使用しません.代わりにasyncTest()を使用し、テストコードの実行準備が完了したらstart()を実行します.


asyncTest( "asynchronous test: one second later!", function() {
  expect( 1 );
 
  setTimeout(function() {
    ok( true, "Passed and ready to resume!" );
    start();
  }, 1000);
});


インスタンス:


asyncTest( "asynchronous test: video ready to play", 1, function() {
  var $video = $( "video" );
 
  $video.on( "canplaythrough", function() {
    ok( true, "video has loaded and is ready to play" );
    start();
  });
});


 


 


記事ソース:http://qunitjs.com/cookbook/



2.2エラーの基礎/選択表示と処理:enumとwhen
[推奨システム]CF/MFに基づく推奨システムモデリング実践