jasmine framework tutorial including jasmine jquery with examples
この記事では、ジャスミンテストフレームワークとその構成について説明します。また、Jasmineについて学ぶ-Jasmineを拡張してJqueryアプリケーションをテストするJqueryパッケージ:
私たちはすべてについて学びました カルマ このシリーズの前回のチュートリアルで。
このチュートリアルでは、Jasmineを使用してJavaScript Webアプリケーションのテストを作成する方法と、ノードベースのパッケージJasmine-Jqueryを使用してJqueryWebアプリケーションをテストする方法を学習します。
ここでは、主にテストを書くための基本的なJasmineコンストラクトに焦点を当てます。
Windowsと比較してubuntuはどれくらい良いですか
はじめましょう!!
学習内容:
テストフレームワークとは何ですか?
テストフレームワークは、別のプログラムをテストしてその品質を確認するのを容易にするプログラムまたはパッケージのスイートです。以前のチュートリアルから学んだはずのように、すべてのプログラミングプラットフォームには独自のテストフレームワークがあります。
任意のソフトウェアシステムで実行できるさまざまなテストセットがあります。 例 このようなテストには、単体テスト、エンドツーエンド(e2e)テストなどが含まれます。チェック ここに 詳細については。
例 JavaScriptアプリケーションのテストフレームワークには、Mocha、Jasmine、intern、jest、Qunitなどがあります。
Jasmineフレームワークの概要

現在のシナリオで利用できるさまざまな開発アプローチがあります。これらのうち、最も人気のある開発アプローチの2つには、テスト駆動開発(TDD)とビヘイビア駆動開発(BDD)があります。
テスト駆動開発は、最初にテストを作成してから実行する開発アプローチです。使用する関数がまだ記述されていないため、各テストは最初の実行で失敗します。
次に、関数を記述してテストを再実行します。ここでは、いくつかのテストが失敗し、他のテストは合格します。すべてのテストに合格するように、コードをリファクタリングし続けます。
ビヘイビア駆動開発も同じアプローチに従います。唯一の違いは、BDDは、ソフトウェアの所有者(顧客/ビジネス指向)を満足させるように作成されていることです。つまり、ソフトウェアの機能をビジネス要件または期待される動作で満たすように作成されています。
TDDはソフトウェアの開発者を満足させるように書かれているので、機能の構築に使用されるソフトウェア機能が正確な結果、安定した信頼性を生み出していることを保証できます。
見る ここに TDDとBDDの詳細を知るため。
Jasmineは、動作駆動型のJavaScriptテストフレームワークであり、テストの作成を容易にし、他のフレームワークに依存しません。
Jasmineを使用してテストを作成する方法は2つあります。 1つの方法は、specRunner.html(ブラウザーにテスト結果を表示する)に付属するスタンドアロンバージョンを使用することです。もう1つの方法は、Jasmineをインストールし、テストを記述し、Karmaなどのテストランナーで実行して、コンソールウィンドウに結果を表示することです。
次のチュートリアルでは、Jasmineの両方の使用方法を検討します。
テストを書くための基本的なジャスミンコンストラクト
以下に、テストを作成するためのJasmineのさまざまな構成要素を示します。
どれどれ!!
#1)説明: この構成は、テストスイートを作成するために使用されます。テストスイートは、複数のテストのコレクションです。 「describe」は、それ自体が2つのパラメータをとる関数です。 スイートの名前と機能 。
関数パラメーターには、テストスイートの下にグループ化されたテストのコレクションが含まれています。
#2)それ: この構成は、テスト仕様を作成するために使用されます。テスト仕様は、システムの特定の期待値または最も細かい期待値をテストする一連の構成要素です。
describe構文と同様に、次の2つのパラメーターも必要です。 テストの名前と、期待が満たされているかどうかを評価するアサーションを含む関数。
#3)期待する :この構成は、ソフトウェアシステムからの期待が満たされているかどうかをテストするのに役立ちます。
これは、actual(ソフトウェアシステムが返す結果)と呼ばれるパラメーターを受け取り、マッチャー(期待される結果)と呼ばれる別の構成要素とチェーンされます。
#4)一致 :これは、expectコンストラクトがチェーンされているコンストラクトのコレクションです。期待が満たされているかどうかを判断します。
これらの構成は、実行されている最も近いテストの期待値を取得し、テストの実行時に取得された実際の値と照合します。クリック ここに ジャスミンマッチャーコンストラクトの完全なリストについては
#5)beforeEach :これは、テストをドライに保つのに役立つJasmineによって提供されるグローバル構造です(繰り返してはいけません)。このコンストラクトは通常、describeコンストラクトの関数パラメーターで使用されます。
内部のコードは、スイートの下の仕様が実行される前に1回実行されます。したがって、スイート内のすべての仕様の前に最初に実行するコードは、ここに配置する必要があります。
#6)afterEach: このコンストラクトはbeforeEachと同じですが、describeコンストラクトが実行されると、そこに含まれるコードがすべてのコードの後に実行される点が異なります。
qtpの記述的プログラミングとは
#7)これ :この構成は空のオブジェクトであり、任意のテストスイートの「beforeEach」、「afterEach」、および「it」構成間で値を共有するために使用できます。すべてのテストスイートには独自のオブジェクトがあり、テストスイートが実行される前にオブジェクトは空にリセットされます。
#8)xdescribe :この構成は、ソフトウェアスイートを無効にするために使用されます。テストランナーにテストスイートをスキップするように指示するだけなので、その結果は表示および考慮されません。
#9)ヒット :この構成は、スイート内の仕様を保留中の仕様として示すために使用されます。保留中の仕様は、実行されないが、テスト結果に保留中として名前が表示される仕様です。
また、いずれかの仕様で保留中の関数が呼び出された場合、その仕様は保留中の仕様としてマークされます。関数本体なしで宣言された仕様も、保留中としてタグ付けされます。
#10)spyOn :この構成は、ジャスミンスパイを作成するために使用されます。スパイはモックです。モックは、実際のオブジェクトを表現または模倣するために作成された偽のオブジェクトです。モックは、モックが表す実際のオブジェクトを作成するためのオーバーヘッドコストを防ぐために必要です。
コードをユニットテストすることの本質は、接続されている、または接続される他のユニットとは無関係に、いくつかの条件下で関数がどのように動作するかを確認することです。
したがって、フロントエンドユニットテストを実行して、ソフトウェア製品のフロントエンドのユニットが、接続される、または接続される他のフロントエンドユニットとは独立してどのように動作するかを確認します。
このテスト中に、ネットワーク接続、データソース、ファイルなどの他の関数やオブジェクトに依存する可能性のあるさまざまな引数や関数を呼び出します。
これらの依存関係を満たすために(フロントエンドの単体テストを実行できるようにするため)、必要なリソースを利用可能にする必要があります。したがって、モックを採用して実際のオブジェクトを模倣し、実際にオブジェクトを作成するためのオーバーヘッドコストを回避します。
単純なレベルでは、spyOnは従属関数が実際に呼び出されるかどうかをテストするために使用され、この従属関数は、スパイしているオブジェクトで定義された単純な関数である可能性があることに注意してください。
spyOn関数は、スパイされるオブジェクトとそれに含まれる依存関数の2つのパラメーターを取ります。これらのパラメーターは、関数がそれを呼び出すことを確認するためにチェックされます。
スパイは、それが定義されているスイートまたは仕様に存在します。スイートまたはスペックが実行されると、スパイは存在しなくなります。
#11)createSpy: この構成はspyOnと同じ目的を果たしますが、違いは、この関数を使用すると、依存関数をテスト用の偽の関数に置き換えることができることです。
なぜ私はこれをしなければならないのですか?これは、元の依存関係が、テストのコンテキストで使用できない他のリソースにも依存している場合に役立ちます。
この関数には、ドット付きのJasmineオブジェクト、つまりJasmine.createSpy(parameters)を使用してアクセスします。これは、モックを作成する依存関係の名前を表す文字列である1つのパラメーターのみを取ります。
スパイを作成した後、最初の呼び出しはそのトレーニングであると想定されるため、最初の呼び出しのスパイは未定義を返すことに注意してください。その後の呼び出しの後、関数は実際の値を返します。以下で詳しく説明しますので、詳細をご覧ください。
ジャスミンテスト二重機能機能
コンストラクトspyOnとcreateSpyは、(依存関係のための)モックの作成を可能にします。これは、1つのテストで2つの関数をテストすることに他なりません。したがって、「testdoublefunction」というステートメントがあります。
モックを指すために使用できるもう1つの単語は、「スタブ」です。
スパイマッチャー: スパイとの相互作用の必要性に応えるいくつかのマッチャーがあります。それらが含まれます: 「toHaveBeenCalled」と「toHaveBeenCalledWith」 。
-
- toHaveBeenCalled :これは、スパイされている依存関係が呼び出されたことを判別するために仕様で使用されます。
- toHaveBeenCalledWith :これは、スパイされている依存関係が特定のパラメーターのセットで呼び出されたことを判別するために仕様で使用されます。
訪問 ここに すべてのジャスミン構造の詳細な概要については。
アニメを無料で視聴するアニメのウェブサイト
ジャスミンを使用する2つの方法
ジャスミンテストを書くには2つの方法があります。 1つは、specRunnerを介してスタンドアロンディストリビューションとしてJasmineを使用することであり、もう1つは、テストランナーでJasmineを使用することです。
まず、specRunnerを介してJasmineテストを実行する方法を見てみましょう。
Jasmineスタンドアロンディストリビューションの使用方法は?
クリック ここに 、をクリックしてスタンドアロンディストリビューションをダウンロードします ジャスミン-スタンドアロン 。
ファイルをプロジェクトフォルダに解凍します。 lib、src、specのディレクトリがプロジェクトディレクトリに追加されていることがわかります。また、specRunner.htmlおよびMIT.LICENSEのファイルも追加します。
libディレクトリには、specRunner.htmlファイルに追加されたテストファイルに含まれるテストを実行するJasmineライブラリが含まれています。 specRunner.htmlファイルを使用すると、テストを実行して、コンソールウィンドウではなく、Webページ形式でブラウザに結果を表示できます。
srcディレクトリにはフロントエンドのソースコードが含まれ、specディレクトリにはJasmineテストスイートを使用して記述されたテストファイルが含まれます。デフォルトでは、ディレクトリ内にいくつかのテストスイートとファイルが表示されますが、これらは使用しません。後続のチュートリアルで独自のテストを作成します。
テストランナーでのジャスミンの使用
これは、Jasmineを使用する2番目の方法であり、Karmaのようなテストランナーを構成し、ソースファイルとテストスペックファイルをフィードしてテストを実行します。
次に、結果を表示してイスタンブールを使用してレポートを生成するか、テスト結果をcoveralls.ioに公開できます。
Jasmineの紹介-Jquery
Jasmine-Jqueryは、jqueryで構築されたフロントエンドコードのテストを支援するノードパッケージです。ある意味で、Jasmineフレームワークを拡張して、Jqueryのフロントエンドテストに適しています。
Jasmineフレームワークに追加する拡張機能は次のとおりです。
- toBeChecked、toBeDisabled、toBeEmptyなどのJqueryフレームワークのカスタムマッチャーのセット。
- 仕様でHTML、CSS、およびJSONフィクスチャを処理するためのAPI。
ここでの質問は「APIとは何ですか?」です。 API(アプリケーションプログラミングインターフェイス)は、最初から構築するのに時間とリソースがかかる可能性のある特定の関数へのアクセスを許可するインターフェイスです。
別の質問は、備品とは何ですか?フィクスチャは、結果を再現可能にするためにテストが実行されるベースライン(よく知られた固定環境)を確立するために、テストの作成中に通常作成するオブジェクトの事前定義された状態です。
見る ここに カスタムマッチャーとAPIの詳細については。
結論
このチュートリアルでは、テストフレームワークとは何かを理解しようとし、JavaScriptテストフレームワークとしてJasmineを紹介しました。テスト仕様の記述に使用できるさまざまなJasmineの構成を検討し、最終的にJasmineを拡張してJqueryアプリケーションをテストできるようにするノードベースのパッケージであるJasmine-Jqueryを導入しました。
要点
- テストフレームワークは、開発されたソフトウェアの品質を保証するためにソフトウェアのテストを容易にするプログラムまたはパッケージのスイートです。
- Jasmineは、JavaScriptアプリケーションのテスト仕様の記述を容易にする構造を提供するビヘイビア駆動開発ツールです。
- テスト駆動開発は、最初にテストを作成してから実行する開発アプローチです。使用する関数がまだ記述されていないため、各テストは最初の実行で失敗します。次に、関数を記述してテストを再実行します。ここでは、いくつかのテストが失敗し、他のテストは合格します。次に、すべてのテストに合格するまでコードをリファクタリングし続けます。
- ビヘイビア駆動開発アプローチは、ソフトウェア機能がすべての利害関係者によって期待どおりに動作することを確認するためにテストが作成される開発アプローチです。
- Jasmine-Jqueryは、Jqueryで構築されたフロントエンドコードのテストを支援するノードパッケージです。
次のチュートリアル
次のチュートリアルでは、これら2つのツール(JasmineとKarma)を使用して、一般的なプロジェクトのテスト仕様を作成する方法について説明します。また、テストを起動して実行するために必要なgulp、browserifyなどの他のツールの使用方法も確認します。
前のチュートリアル | 次のチュートリアル