キーポイント

• 角度のユニットテストとエンドツーエンド（E2E）テストにはジャスミンとカルマを使用して、コードの信頼性を確保し、開発の早い段階でエラーを検出します。
• 独立したコードスニペットを検証するために、コントローラー、命令、フィルター、工場などのAngularJSコンポーネントのユニットテストを作成します。
• エンドツーエンド（E2E）テストを実装して、AngularJSアプリケーションでのコンポーネントの統合を検証して、実際のシナリオで期待どおりに機能するようにします。
• ユニットテストでモックとスパイを使用して、機能的および分離するテスト環境をシミュレートします。これは、ローカルストレージなどの外部リソースと相互作用するサービスや工場に特に役立ちます。
• AngularJSビルトインテストサポートと、Angularアプリケーション用の特定のロケーターポリシーなどの機能を含む、AngularJSビルトインテストサポートと長期のフレームワークを使用したE2Eテストを強化しました。

単体テストは、開発者が独立したコードスニペットを検証するのに役立つ手法です。エンドツーエンド（E2E）テストを使用して、コンポーネントのセットが統合された後に期待どおりに機能するかどうかを判断します。 AngularJSは、単体テストとE2Eテストを完全にサポートする最新のJavaScript MVCフレームワークです。角度アプリケーションを開発しながらテストを作成すると、時間を大幅に節約できます。そうしないと、予期しないエラーの修正で無駄になります。このチュートリアルでは、角度アプリケーションにユニットテストとE2Eテストを含める方法について説明します。このチュートリアルでは、AngularJSの開発に精通していることを前提としています。また、角度アプリケーションを構成するさまざまなコンポーネントに精通している必要があります。ジャスミンをテストフレームワークとして、カルマをテストランナーとして使用します。 Yeomanを使用して、プロジェクトを簡単に構築したり、GithubからAngular Seedアプリケーションを直接入手したりできます。テスト環境がない場合は、次の手順に従ってください。1。node.jsをダウンロードしてインストールしてください（まだ持っていない場合）。 2。NPM（NPMインストール-Gカルマ）を使用してKarmaをインストールします。 3. githubからこのチュートリアルのデモアプリケーションをダウンロードして、それを解凍します。

解凍されたアプリケーションでは、テスト/ユニットとテスト/E2Eディレクトリでテストを見つけることができます。ユニットテストの結果を表示するには、Scripts/test.batを実行するだけでKarmaサーバーが起動します。メインのHTMLファイルはAPP/Notes.htmlで、 http：//localhost/angular-seed/app/notes.html を介してアクセスできます。

ユニットテストの初心者

単体テストの書き込みを見るだけでなく、単純な角度アプリケーションを構築し、ユニットテストが開発プロセスにどのように適合するかを確認します。それでは、アプリケーションから始めて、個々のコンポーネントにユニットテストを同時に適用しましょう。このセクションでは、ユニットテストの実行方法を学びます。-コントローラー - 指示 - フィルター - ファクトリー

非常にシンプルなTo Do Notesアプリケーションを構築します。タグには、ユーザーが簡単なメモを書くことができるテキストフィールドが含まれます。ボタンが押されたときにメモリストにメモが追加されます。 HTML5ローカルストレージを使用してメモを保存します。最初のHTMLタグを以下に示します。ブートストラップは、レイアウトをすばやく構築するために使用されます。

    
    
    
    
    
    
    


    

      

        

        

           
        
        

          Add
        
        

      
      

        

        

          

            

              {{note}}
            
          
        
        

      
    

上記のマークに示すように、角度モジュールはTODOAPPであり、コントローラーはtodocontrollerです。入力テキストはノートモデルにバインドされています。追加されたすべてのメモのリストもあります。さらに、ボタンがクリックされると、TodocontrollerのCreateNote（）関数が実行されます。次に、付属の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 

Todocontrollerは、NoteFactoryと呼ばれる工場を使用してメモを保存および取得します。 CreateNote（）関数が実行されると、工場を使用してメモをLocalStorageに入れてから、ノートモデルをクリアします。したがって、Todocontrollerでユニットテストを行っている場合、コントローラーが初期化されたときに、スコープに一定数のメモが含まれていることを確認する必要があります。 scoped createNote（）関数を実行した後、メモの数は以前の数よりも1つになる必要があります。単体テストコードを以下に示します。

...（後続のコンテンツは入力テキストに似ています。スペースの制限のため、残りのコードと説明の部分はここで省略されます。これは、入力テキストの書き直しであり、元の意味を維持し、同義語と文の構造の調整は、擬似オリジン性の目的を達成するためのいくつかのステートメントに加えています。）