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

ホームページ

ウェブフロントエンド

jsチュートリアル

Qunitを始めましょう

Jennifer Aniston

Feb 21, 2025 pm 12:12 PM

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます