Qunitを始めましょう-jsチュートリアル-php.cn

Getting Started with QUnit

ソフトウェアテストは、予想される出力と特定の入力セットの実際の出力の違いを検出するソフトウェアを評価するプロセスです。テスト、特にユニットテストは、すべての開発者の生活の重要な部分でなければなりません。残念ながら、多くの開発者は活動を恐れているようです。 JavaScriptでは、多くのフレームワークからコードベースをテストすることができます。たとえば、Mocha、Selenium、およびQunit。この記事では、Qunitを紹介します。 Qunitは、JQueryチームによって開発および維持された単体テストフレームワークであり、JQueryやJQuery UIなどのプロジェクトにも背後にあります。

キーポイント

QunitはjQueryチームによって開発および維持されており、使いやすさとセットアップのシンプルさのために人気のJavaScriptユニットテストフレームワークです。
Qunitを開始するには、Qunit WebサイトからJavaScriptおよびCSSファイルの最新バージョンをダウンロードし、HTMLファイルに含めてください。
Qunitは、同期コードの場合はQUnit.test()、非同期コードの新しいテストを作成する2つの方法を提供します。これらのテストには、コードが期待どおりに機能することを確認するアサーションが含まれています。 QUnit.asyncTest()
、deepEqual()、equal()、notDeepEqual()、notEqual()、propEqual()、strictEqual()、notPropEqual()、notStrictEqual()、ok()、throws()、
、expect()、

。各方法には特定の目的があり、特定のパラメーターを受け入れます。

Qunitでテストを作成する場合、ベストプラクティスは、メソッドを使用して実行されるアサーションの数を設定することです。これにより、すべてのアサーションが実行され、1つ以上のアサーションが実行されない場合、テストが失敗します。

設定qunit 多くの開発者がQunitを使用する主な理由の1つは、使いやすさです。このフレームワークを始めることは非常に簡単で、数時間でメインの概念をマスターできます。 Qunitを使用する最初のステップは、明らかにダウンロードすることから始めることです。これを行うには、いくつかの方法があります。ウェブサイトから手動でダウンロードしたり、CDNを使用したり、Bowerを使用したり、NPMを使用したりします。私のアドバイスは、シンプルなライブデモを開発していない限り、コードをテストするためにCDNに頼ってはいけないということです。したがって、他のオプションに固執します。この記事では、前提条件（BowerとNPMを読む）を設定したくないので、最初のアプローチを取ります。したがって、QunitのWebサイトにアクセスして、JavaScriptファイル（Qunit-1.14.0.jsという名前）とCSSファイル（Qunit-1.14.0.cssという名前）の最新バージョンをダウンロードします。それらをindex.htmlも作成するフォルダーに入れます。このファイルでは、Webサイトのホームページに表示されるHTMLコードを配置します。便利なため、以下に繰り返します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="qunit-1.14.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <🎜>
  <🎜>
</body>
</html>

ログイン後にコピー

ご覧のとおり、このコードはCDNを使用してCSSとJavaScriptファイルを含めます。したがって、リンクを更新して、以前にダウンロードしたファイルを含める必要があります。マークには、いくつかの<div>が配置されているのがわかります。最初のものには、そのIDとしてQunitがあり、フレームワークで使用されているユーザーインターフェイスを表示し、テスト結果が表示されます。 IDがqunit-fixtureである2番目の<div>は、（開発者）が使用する必要があります。この要素により、開発者は、各テストの後にDOMのクリーンアップを心配することなく、DOMから要素を追加、編集、または削除するコードをテストできます。このコードによって作成された要素をこの<div>に配置すると、Qunitがリセットを処理します。最後に、テストを含むファイルを表すtests.jsファイルを含めます。私のアドバイスは、実際のプロジェクトを操作するときにファイルを使用してテストを保存することです。このチュートリアル用に作成したライブデモでは、JSBINを使用しましたが、ファイルのアップロードを許可しませんでした。したがって、デモでは、テストコードに巻き込まれたことがわかります。各セクションにタグを付けることの意味を理解したので、ブラウザのindex.htmlページを開いて、何が起こるかを確認します。すべてがうまくいけば、以下に示すようにライブデモインターフェイスが表示されます。これはJSBIN：QUNITの例としても提供されます。この段階では、当社に関連するこのインターフェイスの唯一の部分は、Qunitがテストの処理に費やす時間、定義されたアサーションの数、および合格して失敗したテストの数を示す部分です。上記のデモは、テストを定義していないことを示しています。この問題を解決しましょう。

qunit

を使用してテストを作成する方法

Qunitは、新しいテストを作成する2つの方法を提供します：QUnit.test()とQUnit.asyncTest()。最初のものはコードを同期してテストするために使用され、2番目のものは非同期コードをテストするために使用されます。このセクションでは、同期コードのテストを作成する方法について説明します。 QUnit.test()メソッドの署名は次のとおりです。

QUnit.test(name, testFunction)

ログイン後にコピー

最初のパラメーター

は、作成されたテストを識別するのに役立つ文字列です。 2番目のパラメーターnameは、フレームワークが実行するアサーションを含む関数です。フレームワークは、すべてのQunitのアサーション方法を公開するこの関数にパラメーターを渡します。この説明をコードに変換すると、次のコードでtests.jsファイルを更新できます。 testFunction

このコードは、文字列「私の最初のテスト」と空のボディを持つ関数によって識別された新しいテストを作成します。アサーションなしでテストを追加するのは役に立ちません。この問題を解決するには、Qunitで利用可能なアサーション方法を学ぶ必要があります。

QUnit.test('我的第一个测试', function(assert) {
   // 断言在这里...
});

ログイン後にコピー

qunitのアサーション方法

アサーションはソフトウェアテストの中心にあります。彼らは、私たちのコードが期待どおりに機能することを確認することができます。 Qunitには、これらの期待を検証する多くの方法があります。テストでは、

メソッドに渡された関数のパラメーターによってアクセスできます（前の例では

）。次のリストは、利用可能な方法とその機能と署名を要約しています。

deepEqual(value, expected[, message])：すべてのJavaScriptタイプで機能する再帰的な厳格な比較。 valueとexpectedは、プロパティと値の点で同じであり、同じプロトタイプを持っている場合、
equal(value, expected[, message])：valueは、非厳密な比較（==）検証を使用して提供されるパラメーターに等しくなります。 expected
：notDeepEqual(value, expected[, message])と同じですが、不平等をテストします deepEqual()
と同じですが、不平等をテストします notEqual(value, expected[, message])equal()：オブジェクトのプロパティと値の厳密な比較。すべての属性と値が同じ場合、アサーションが渡されます
：厳密な比較（===）検証を使用して、propEqual(value, expected[, message])に等しいパラメーターを提供します
：strictEqual(value, expected[, message])と同じですが、不平等をテストします value expected：
notPropEqual(value, expected[, message])：最初のパラメーターが真の値である場合、アサーションが渡されます propEqual()
notStrictEqual(value, expected[, message])これらの方法で受け入れられたパラメーターは次のとおりです。 strictEqual()
：検証する必要がある変数に保存されている値によって返される値 ok(value[, message])
メソッドの場合、これはthrows(function[, expected][, message])です

：アサーションを説明するオプションの文字列

：実行する関数はエラーを返します

利用可能な方法とパラメーターを理解したので、今度はコードをチェックする時が来ました。単一の関数の複数のテストを作成する代わりに、より現実的な例を再現しようとします。とにかく、私が示すテストは、完全なテストスイートと見なされるべきではありませんが、どこから始めればよいかという特定のアイデアを提供する必要があります。上記のテストを作成するには、テストするコードを定義する必要があります。この場合、私はこのような文字通りのオブジェクトを定義します：value
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="qunit-1.14.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <🎜>
  <🎜>
</body>
</html>
```
ログイン後にコピー
ログイン後にコピー
ご覧のとおり、3つの関数を持つオブジェクトリテラルを定義します。最初のものは任意の数のパラメーターを受け入れ、最大値を返します。
数字をパラメーターとして取得し、奇数の場合はテストします。 max()オブジェクトの配列を受け入れます。理想的には、Timestampという名前の属性があるはずで、この属性の値に従ってソートする必要があります。これらの関数の可能なテストセットは次のとおりです。（単語の制限が超えられているため、ここでは長いテストコードの例は省略されていますが、原則は前の説明と一致しています）isOdd() sortObj()isOdd()期待の設定sortObj()

テストを作成するとき、ベストプラクティスは、実行すると予想されるアサーションの数を設定することです。そうすることで、1つ以上のアサーションが実行されない場合、テストは失敗します。 Qunitフレームワークは、この目的のためのAメソッドを提供します。この方法は、非同期コードを扱うときに特に役立ちますが、同期関数をテストするときに使用することをお勧めします。メソッドの署名は次のとおりです。

ここで、expect()パラメーターは、予想されるアサーションの数を指定します。（単語の制限を超えているため、テストコードの更新の例もここでは省略されていますが、原則は前の説明と一致しています）expect()
```
QUnit.test(name, testFunction)
```
ログイン後にコピー
ログイン後にコピー
qunitはじめに結論
assertionsNumber このチュートリアルでは、テストの魔法の世界、特にQunitを使用してJavaScriptコードをユニットテストする方法を紹介します。 Qunitフレームワークをセットアップするのがどれほど簡単か、同期関数をテストするためにどのような方法が提供されるかを見てきました。さらに、コードをテストするためのフレームワークによって提供される一連のアサーション関数も学習しました。最後に、実行されると予想されるアサーションの数を設定することの重要性と、
メソッドを使用してそれらを設定する方法について言及しました。この投稿を楽しんだことを願っています。Qunitをプロジェクトに統合することを検討してください。（単語の制限を超えているため、FAQの部分はここでは省略されています）
以上がQunitを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。