キーポイント
- angularjsのユニットテストとエンドツーエンド（E2E）テストにジャスミンとカルマを使用して、コードの信頼性を確保し、開発の初期にエラーを検出します。
- 獨立したコードスニペットを検証するために、コントローラー、命令、フィルター、工場などのAngularJSコンポーネントのユニットテストの書き込み。
- エンドツーエンド（E2E）テストを実裝して、AngularJSアプリケーションでのコンポーネントの統(tǒng)合を検証して、実際のシナリオで期待どおりに機能するようにします。
- 単體テストでモックとスパイを使用して、機能的および分離するテスト環(huán)境をシミュレートします。これは、LocalStorageなどの外部リソースと相互作用するサービスや工場に特に役立ちます。
AngularJSビルトインテストサポートと、自動待機やAngularアプリケーションの特定のロケーターポリシーなどの機能を含む、AngularJS組み込みテストサポートと長期競技フレームワークを使用したE2Eテストの強化。 -
ユニットテストは、開発者が獨立したコードスニペットを検証するのに役立つ手法です。エンドツーエンド（E2E）テストを使用して、コンポーネントのセットが統(tǒng)合された後に期待どおりに機能するかどうかを判斷します。 AngularJSは、単體テストとE2Eテストを完全にサポートする最新のJavaScript MVCフレームワークです。角度アプリケーションを開発しながらテストを作成すると、時間を大幅に節(jié)約できます。そうしないと、予期しないエラーの修正で無駄になります。このチュートリアルでは、角度アプリケーションにユニットテストとE2Eテストを含める方法について説明します。このチュートリアルでは、AngularJSの開発に精通していることを前提としています。また、角度アプリケーションを構成するさまざまなコンポーネントに精通している必要があります。ジャスミンをテストフレームワークとして、カルマをテストランナーとして使用します。 Yeomanを使用してプロジェクトを簡単に構築したり、GithubからAngular Seedアプリケーションを直接入手できます。テスト環(huán)境がない場合は、次の手順に従ってください。1。node.jsをダウンロードしてインストールします（まだない場合）。 2。NPM（NPMインストール-Gカルマ）を使用してKarmaをインストールします。 3. githubからこのチュートリアルのデモアプリケーションをダウンロードして、それを解凍します。
解凍されたアプリケーションでは、テスト/ユニットとテスト/E2Eディレクトリのテストを見つけることができます。ユニットテストの結果を表示するには、Scripts/test.batを実行するだけでKarmaサーバーが起動します。主なHTMLファイルはApp/Notes.htmlで、
http://www.miracleart.cn/link/1d7466dd4217d4f000c48e9f2cdbfce9からアクセスできます。
ユニットテストの初心者
単體テストの書き込みを見るだけでなく、単純な角度アプリケーションを構築し、ユニットテストが開発プロセスにどのように適合するかを確認します。それでは、アプリケーションから始めて、個々のコンポーネントにユニットテストを同時に適用しましょう。このセクションでは、ユニットテストの実行方法を學びます。-コントローラー - 命令 - フィルター - ファクトリー
非常に簡単なTo Do Notesアプリケーションを構築します。タグには、ユーザーが簡単なメモを書くことができるテキストフィールドが含まれます。ボタンが押されたときにメモリストにメモが追加されます。 HTML5ローカルストレージを使用してメモを保存します。最初のHTMLタグを以下に示します。ブートストラップは、レイアウトをすばやく構築するために使用されます。
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<??>
<??>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css"/>
<??>
<style>
.center-grey{
background:#f2f2f2;
margin-top:20;
}
.top-buffer {
margin-top:20px;
}
button{
display: block;
width: 100%;
}
</style>
<title>Angular Todo Note App</title>
</head>
<body>
<div class="container center-grey" ng-controller="TodoController">
<div class="row top-buffer" >
<div class="col-md-3"></div>
<div class="col-md-5">
<input class="form-control" type="text" ng-model="note" placeholder="Add a note here"/>
</div>
<div class="col-md-1">
<button ng-click="createNote()" class="btn btn-success">Add</button>
</div>
<div class="col-md-3"></div>
</div>
<div class="row top-buffer" >
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="list-group">
<li ng-repeat="note in notes track by $index" class="list-group-item">
{{note}}
</li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
上記のマークに示すように、角度モジュールはTODOAPPであり、コントローラーはTodocontrollerです。入力テキストはノートモデルにバインドされています。追加されたすべてのメモのリストもあります。さらに、ボタンがクリックされると、TodocontrollerのCreateNote（）関數(shù)が実行されます。次に、付屬のapp.jsファイルを開き、モジュールとコントローラーを作成しましょう。次のコードをapp.jsに追加します
var todoApp = angular.module('todoApp',[]);
todoApp.controller('TodoController', function($scope, notesFactory) {
$scope.notes = notesFactory.get();
$scope.createNote = function() {
notesFactory.put($scope.note);
$scope.note = '';
$scope.notes = notesFactory.get();
}
});
todoApp.factory('notesFactory', function() {
return {
put: function(note) {
localStorage.setItem('todo' + (Object.keys(localStorage).length + 1), note);
},
get: function() {
var notes = [];
var keys = Object.keys(localStorage);
for(var i = 0; i < keys.length; i++) {
notes.push(localStorage.getItem(keys[i]));
}
return notes;
}
};
});私たちのTodocontrollerは、NoteFactoryという工場を使用してメモを保存して取得します。 CreateNote（）関數(shù)が実行されると、工場を使用してメモをLocalStorageに入れてから、ノートモデルをクリアします。したがって、Todocontrollerをユニットテストしている場合は、コントローラーが初期化されたときに、スコープに一定數(shù)のメモが含まれていることを確認する必要があります。 scoped createNote（）関數(shù)を実行した後、メモの數(shù)は以前の數(shù)よりも1つになる必要があります。単體テストコードを以下に示します。
...（後続のコンテンツは入力テキストに似ています。スペースの制限のため、殘りのコードと説明の部分はここで省略されています。これは、入力テキストの書き直しであり、元の意味を維持することに注意してください。いくつかのステートメントを実行し、擬似オリジナルの目的を達成するための代替と文の調整
以上がAngularjsのユニットとエンドテスト - SitePointの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。