NGプロジェクトがより大きくなり、より大きくなる場合、単体テストをアジェンダに掲載する必要があります。チームが最初にテストを行い、一部は最初に機能を実装し、次に機能モジュールをテストすることがあります。これには、独自の利点と短所があります。今日、私たちは主にKarmaとJasmineを使用してNGモジュールの単体テストを実行することについて話します。
カルマとは何ですか
Karmaは、Chrome、Firfox、Phantomjsなど、さまざまな環境で実行されたユニットテストを提供するユニットテストの実行制御フレームワークです。テストフレームワークは、環境としてNodejsを持つNPMモジュールをサポートしています。
これは開発に関連しているため、関連するNPMモジュールのインストールとテストの際に----保存パラメーターを使用することをお勧めします。一般に、Karmaを実行する場合、次の2つのNPMコマンドのみが必要です。
コードコピーは次のとおりです。
NPMインストールKarma - save-dev
NPMインストールKarma-Junit-Reporter - save-dev
Karmaをインストールすると、一般的に使用されるいくつかのモジュールが自動的にインストールされます。 KarmaコードのPackage.jsonファイルのPeerdependenciesプロパティを参照してください。
コードコピーは次のとおりです。
「PeerDependencies」：{
「カルマジャスミン」：「〜0.1.0」、
「karma-requirejs」：「〜0.2.0」、
「Karma-Coffee-Preprocessor」：「〜0.1.0」
"Karma-html2js-preprocessor"： "〜0.1.0"、
「Karma-chrome-launcher」：「〜0.1.0」
「Karma-Firefox-Launcher」：「〜0.1.0」、
「karma-phantomjs-launcher」：「〜0.1.0」、
「karma-script-launcher」：「〜0.1.0」
}
次に、一般的な実行フレームワークには通常、構成ファイルが必要です。 Karmaでは、karma.conf.jsです。内部のコードはnodejsスタイルです。一般的な例は次のとおりです。
コードコピーは次のとおりです。
module.exports = function（config）{
config.set（{
//次のファイルの基本ディレクトリ
ベースパス： '../'、
//テスト環境でロードする必要があるJS情報
ファイル：[
'app/bower_components/angular/angular.js'、
'app/bower_components/angular-route/angular-route.js'、
'app/bower_components/angular-mocks/angular-mocks.js'、
'app/js/**/*。js'、
'test/unit/**/*。js'
]、、
//上記のファイルの変更を自動的に聞くかどうか、テストを自動的に実行します
Autowatch：本当、
//アプリケーションテストフレームワーク
フレームワーク：['Jasmine']、
//コードのテストに使用する環境は何ですか？これがChrome`です
ブラウザ：['Chrome']、
//クロムブラウザやジャスミンプラグインなど、使用されるプラグイン
プラグイン：[
「Karma-chrome-launcher」、
「Karma-firefox-launcher」、
「カルマジャスミン」、
「Karma-Junit-Reporter」
]、、
//テストコンテンツの出力とエクスポートに使用されるモジュール名
記者：['Progress'、 'Junit']、
//出力テストコンテンツファイルの情報を設定する
junitreporter：{
outputfile： 'test_out/unit.xml'、
スイート：「ユニット」
}
}）;
};
これに注意を払う必要がある場合、上記のプラグインのほとんどは、カルマのインストール時にインストールされているため、個別にインストールする必要はありません。 Karma-Junit-Reporterエクスポートプラグインのみを個別にインストールする必要があります。構成ファイルについて詳しく知りたい場合は、ここをクリックしてください
それはすべてカルマについてです。それについてもっと知りたい場合は、ここをクリックしてください
ジャスミンとは何ですか
Jasmineは、JavaScriptコードをテストするための行動主導の開発フレームワークです。他のJavaScriptフレームワークに依存しません。 DOMは必要ありません。また、テストを簡単に作成できるように、きれいで明白な構文があります。
上記はジャスミンの公式文書にあるそれの説明であり、以下は中国語の簡単な翻訳です
Jasmineは、JSフレームワークとDOMに依存しない行動主導のテストフレームワークです。非常にクリーンでフレンドリーなAPIテストライブラリです。
次に、その使用法を説明する簡単な例です
test.jsとしてテストファイルコマンドを定義します
コードコピーは次のとおりです。
説明（ "スペック（セットアップと裂け目）"、function（）{
var foo;
前に（function（）{
foo = 0;
foo += 1;
}）;
aftereach（function（）{
foo = 0;
}）;
それ（ "は単なる関数なので、任意のコードを含めることができます"、function（）{
（foo）.toequal（1）;
}）;
それ（ "複数の期待を持つことができます"、function（）{
（foo）.toequal（1）;
期待（true）.toequal（true）;
}）;
}）;
上記の例は、公式ウェブサイトからのものです。ここにいくつかの重要なAPIがあります。その他の使用については、ここをクリックしてください
1.最初に、すべてのテストケースは、descrest関数によって定義されます。 2つのパラメーターがあります。 1つ目は、テストの全体的な中心コンテンツを記述するために使用され、2番目のパラメーターは関数であり、実際のテストコードを書き込みます。
2.単一の特定のテストタスクを定義するために使用され、2つのパラメーターもあります。最初のものはテストコンテンツを記述するために使用され、2番目のパラメーターは関数であり、いくつかのテスト方法を保存します。
3。変数または式の値を計算し、それを期待値と比較するか、他のイベントを実行するために、主に使用されます。
4.テストタスクが実行される前後に、主にいくつかのことを行うために主に使用されます。上記の例は、実行前に変数の値を変更し、実行が完了した後に変数の値をリセットすることです。
最後に、上記のように、food functionsのサブ機能にアクセスできます。上記のように、Foo変数にアクセスできます。
上記のテストの例を実行したい場合は、Kararで実行できます。コマンドの例は次のとおりです。
コードコピーは次のとおりです。
Karma Start Test/Karma.conf.js
次に、ngのコントローラー、指示、およびサービスモジュールの単体テストに焦点を当てます。
ngの単体テスト
NG自体のフレームワークのため、モジュールはDIを介してロードされ、インスタンス化されるため、Jasmineを使用したテストスクリプトの執筆を容易にするために、オフィシャルはAngular-Mock.JSテストツールクラスを提供してモジュールの定義、読み込み、注入などを提供します。
NG-Mockのいくつかの一般的な方法について話しましょう
1.Angular.mock.moduleこのメソッドは、ウィンドウネームスペースにもあります。これは、呼び出すのに非常に便利です。
モジュールは、注入法によって注入されたモジュール情報を構成するために使用されます。パラメーターは、文字列、関数、およびオブジェクトです。次のように使用できます。
コードコピーは次のとおりです。
Each（モジュール（ 'myapp.filters'））;
beforeeach（module（function（$ prove））{
$ sultion.value（ 'version'、 'test_ver'）;
}））;
これは、試験タスクの実行時に注入法がモジュール構成を取得できるようにするため、通常、Eacheeachメソッドで使用されます。
1.Angular.mock.Injectこのメソッドは、ウィンドウネームスペースにもあります。これは、呼び出すのに非常に便利です。
注入は、上記で構成されたNGモジュールを注入するために使用されます。テスト関数で呼び出されます。一般的な呼び出し例は次のとおりです。
コードコピーは次のとおりです。
angular.module（ 'myApplicationModule'、[]）
.value（ 'mode'、 'app'）
.Value（ 'バージョン'、 'v1.0.1'）;
説明（ 'myapp'、function（）{
//テストするモジュールをロードする必要があります、
//デフォルトでは「NG」モジュールのみをロードします。
Each（モジュール（ 'myApplicationModule'））;
// Inject（）は、指定されたすべての関数の引数を注入するために使用されます
それ（ 'バージョンを提供する必要があります'、Inject（function（mode、version）{
expect（version）.toequal（ 'v1.0.1'）;
expect（mode）.toequal（ 'app'）;
}））;
特定
それ（ 'バージョンをオーバーライドしてテストする必要があります新しいバージョンが挿入されます'、function（）{
// module（）は関数または文字列（モジュールエイリアス）を取得します
モジュール（function（$ reding）{
$ sultion.value（ 'version'、 'overridden'）; //ここでバージョンをオーバーライドします
}）;
Inject（function（version）{
expect（version）.toequal（ 'overridden'）;
}）;
}）;
}）;
上記は、公式が提供するいくつかの注入例であり、コードは簡単に理解できます。実際、注射は、Angular.Injectメソッドを使用して作成された組み込みの依存関係インスタンスです。次に、モジュール注入は、通常のNGモジュールの依存関係処理と同じです。
NG-Mockを簡単に導入した後、コントローラー、命令、フィルターを使用して簡単なユニットテストを作成します。
コントローラーのユニットテスト
シンプルなコントローラーを定義します
コードコピーは次のとおりです。
var myApp = angular.module（ 'myApp'、[]）;
myapp.controller（ 'mycontroller'、function（$ scope）{
$ scope.spices = [{"name"： "pasilla"、 "spiciness"： "穏やかな"}、
{"name"： "halapeno"、 "spiciness"： "Hot Hot Hot！"}、
{"name"： "habanero"、 "spiciness"： "lava hot !!"}];
$ scope.spice = "hello feenan！";
}）;
次に、テストスクリプトを書きます
コードコピーは次のとおりです。
説明（ 'myController function'、function（）{
説明（'myController '、function（）{
var $ scope;
Each（モジュール（ 'myApp'））;
each（inject（function）（$ rotscope、$ controller）{
$ scope = $ rootscope。$ new（）;
$ controller（ 'mycontroller'、{$ scope：$ scope}）;
}））;
それ（ '3つのスパイスを備えた「スパイス」モデルを作成する必要があります'、function（）{
想像（$ scope.spices.length）.tobe（3）;
}）;
それ（ 'スパイスのデフォルト値を設定する必要があります'、function（）{
想像（$ scope.spice）.tobe（ 'こんにちはフィードバック！'）;
}）;
}）;
}）;
上記は$ Rootscopeを使用してサブスコープを作成し、このパラメーターをコントローラーの構築方法$コントローラーに渡します。最後に、上記の方法が実行されます。次に、サブスコープの配列の数と、文字列変数が期待値に等しいかどうかを確認します。
NGのコントローラーについて詳しく知りたい場合は、ここをクリックしてください
ngの指示の単体テスト
簡単な指示を定義します
コードコピーは次のとおりです。
var app = angular.module（ 'myApp'、[]）;
app.directive（ 'agreateye'、function（）{
戻る {
制限： 'e'、
交換：本当、
テンプレート： '<h1> lidless、lost in Flame、1回</h1>'
};
}）;
次に、簡単なテストスクリプトを書きます
コードコピーは次のとおりです。
説明（「素晴らしい引用符の単位テスト」、function（）{
var $ compile;
var $ rootscope;
//指令を含むMyAppモジュールをロードします
Each（モジュール（ 'myApp'））;
//参照を$ rootscopeと$ compileに保存します
//したがって、これらはすべてのテストで利用可能です。
前の（inject（function（_ $ compile」）_ $ rotscope _）{
//インジェクターは、一致するときにパラメーター名の周りからアンダースコア（_）を解きます
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
}））;
それ（ '要素を適切なコンテンツに置き換えます'、function（）{
//ディレクティブを含むHTMLの一部をコンパイルします
var element = $ compile（ "<a-great-eye> </a-great-eey>"）（$ rotscope）;
//すべての時計を発射するので、スコープ式1が評価されます
$ ROOTSCOPE。$ DIGEST（）;
//コンパイルされた要素にテンプレートされたコンテンツが含まれていることを確認します
expect（element.html（））。tocontain（ "lidless、lost in Flame、2回"）;
}）;
}）;
上記の例は公式の例からのもので、上記のコマンドはHTMLで使用されます。
コードコピーは次のとおりです。
<a-great-eye> </a-great-eye>
テストスクリプトは、最初に2つのサービス$ compileと$ rotscopeを注入します。1つはHTMLをコンパイルするために使用され、もう1つはスコープの作成に使用されます。 _はここで使用されていることに注意してください。 Ngに注入されたサービスが前後に追加されると、Ngによって処理されます。これらの2つのサービスは2つの内部変数に保存されるため、次のテストケースを呼び出すことができます。
$ compileメソッドは元の命令HTMLに渡され、返された関数は$ rotscopeで渡され、範囲とビューの結合が完了します。最後に、$ rootscopeを呼び出してください。$ダイジェストはすべてのリスニングをトリガーし、ビュー内のモデルコンテンツが更新されるようにします
次に、現在の命令の対応する要素のHTMLコンテンツを取得し、それを期待値と比較します。
NGの指示について詳しく知りたい場合は、ここをクリックしてください
ngのフィルター単位テスト
簡単なフィルターを定義します
コードコピーは次のとおりです。
var app = angular.module（ 'myApp'、[]）;
app.filter（ 'interporate'、['version'、function（version）{
return function（text）{
return string（text）.replace（//％version/％/mg、version）;
};
}]）;
次に、簡単なテストスクリプトを書きます
コードコピーは次のとおりです。
説明（ 'filter'、function（）{
Each（モジュール（ 'myApp'））;
説明（ 'interporate'、function（）{
beforeeach（module（function（$ prove））{
$ sultion.value（ 'version'、 'test_ver'）;
}））;
it（ 'はバージョンを置き換える必要があります'、Inject（function（interporateFilter）{
expect（interporateFilter（ '前の％version％after'））。
}））;
}）;
}）;
上記のコードは最初にフィルターモジュールを設定し、次にバージョン値を定義します。補間はこのサービスに依存するため、最終的に補間フィルターを注入します。ここのフィルターの後にフィルターの接尾辞が続き、最後にテキストコンテンツをフィルター関数に渡して実行する必要があり、それを実行し、期待値と比較することに注意してください。
要約します
テストを使用してNGを開発することには多くの利点があります。これにより、モジュールの安定性が確保されます。もう1つのことは、NGの内部動作メカニズムを詳細に理解できることです。したがって、NGを使用して開発する学生は、できるだけ早くテストに記入することをお勧めします。