AngularJS 単体テスト: Karma Jasmine チュートリアル

Angular.JS の最も素晴らしい機能の XNUMX つは、 テスト 側面。 Google の開発者は AngularJS を開発するとき、テストを念頭に置き、AngularJS フレームワーク全体がテスト可能であることを確認しました。

AngularJSでは通常、Karma(フレームワーク)を使用してテストが行​​われます。 Angular JS テストは Karma なしで実行できますが、Karma フレームワークには AngularJS コードをテストするための優れた機能があるため、このフレームワークを使用するのが理にかなっています。

  • Angularjsでは、実行できます 単体テスト コントローラーとディレクティブに分けて。
  • ユーザーの観点からテストする AngularJS のエンドオブエンドテストも実行できます。

Karma フレームワークの導入とインストール

カルマというのは、 テスト自動化ツール Google の Angular JS チームによって作成されました。 Karma を使用するための最初のステップは、Karma をインストールすることです。 Karma は、npm (ローカル マシンにモジュールを簡単にインストールするために使用されるパッケージ マネージャー) 経由でインストールされます。

カルマのインストール

npm を介した Karma のインストールは XNUMX 段階のプロセスで行われます。

ステップ1) コマンドライン内から以下の行を実行します。

npm install karma karma-chrome-launcher karma-jasmine

その中で、

  1. npm は、任意のマシンにカスタム モジュールをインストールするために使用されるノード パッケージ マネージャーのコマンド ライン ユーティリティです。
  2. install パラメーターは、npm コマンド ライン ユーティリティにインストールが必要であることを指示します。
  3. Karma を使用するために必要なライブラリがコマンド ラインで 3 つ指定されています。
    • Karma は、テスト目的で使用されるコア ライブラリです。
    • karma-chrome-launcher は、Chrome ブラウザで Karma コマンドを認識できるようにする別のライブラリです。
    • Karma-jasmine – Karma の依存フレームワークである Jasmine をインストールします。

ステップ2) 次のステップは、karma コマンド ライン ユーティリティをインストールすることです。 これは、karma ライン コマンドを実行するために必要です。 Karma line ユーティリティは、テスト用に Karma 環境を初期化するために使用されます。

コマンド ライン ユーティリティをインストールするには、コマンド ライン内から次の行を実行します。

npm install karma-cli

ここで、

  • karma-cli は、コマンド ライン インターフェイスで Karma コマンドを記述するために使用される Karma のコマンド ライン インターフェイスをインストールするために使用されます。
  • Karma フレームワークの構成

    次のステップは、コマンドで実行できる Karma の設定です。

    "karma –init"

    上記の手順を実行すると、karma は karma.conf.js ファイルを作成します。 ファイルはおそらく以下に示すスニペットのように見えます

    files: [
      'Your application Name'/AngularJS/AngularJS.js',
      'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
      'lib/app.js',
      'tests/*.js'
    ]

    上記の設定ファイルは Karma ランタイム エンジンに次のことを伝えます。wing 物事

    1. 「あなたのアプリケーション名」 – これはアプリケーションの名前に置き換えられます。
    2. 'アプリケーション名「/AngularJS/AngularJS.js」 – これは、アプリケーションが AngularJS のコア モジュールに依存していることを Karma に伝えます
    3. 「アプリケーション名」/AngularJS-mocks/AngularJS-mocks.js' - これにより、KarmaはAngular.js-mocks.jsファイルからAngularjsの単体テスト機能を使用するように指示します。
    4. メイン アプリケーションまたはビジネス ロジック ファイルはすべて、アプリケーションの lib フォルダーに存在します。
    5. テスト フォルダーには、すべての単体テストが含まれます。

    Karma が機能しているかどうかを確認するには、Sample.js というファイルを作成し、以下のコードを記述して test ディレクトリに配置します。

    describe('Sample test', function() {
      it('Condition is true', function() {
        expect('AngularJS').toBe('AngularJS');
      });
    });

    上記のコードには次のようなものがありますwing 側面

    1. テストの説明を与えるには、describe 関数を使用します。 この例では、テストに「サンプル テスト」という説明を付けています。
    2. 「it」関数は、テストに名前を付けるために使用されます。 私たちの場合、「条件は真実」としてテストの名前を付けています。 テストの名前は意味のあるものにする必要があります。
    3. 「expect」キーワードと「toBe」キーワードの組み合わせは、テスト結果の期待値と実際の値を示します。 実際の値と期待される値が同じ場合、テストは合格し、そうでない場合は失敗します。

    以下を実行するとwing コマンドプロンプトでこの行を実行すると、上記のテストファイルが実行されます

    KARMA start

    以下の出力は、上記の手順が実行されたIDE Webstormから取得されます。

    Karma フレームワークの構成

    1. 出力は、Webstorm 内の Karma エクスプローラーに表示されます。 このウィンドウには、karma フレームワークで定義されているすべてのテストの実行が表示されます。
    2. ここでは、実行されたテストの説明が「サンプルテスト」として表示されていることがわかります。
    3. 次に、「Condition is true」という名前のテスト自体が実行されていることがわかります。
    4. すべてのテストの隣には、すべてのテストが合格したことを示す緑色の「OK」アイコンが表示されていることに注意してください。

    AngularJS コントローラーのテスト

    Karma テスト フレームワークには、コントローラーをエンドツーエンドでテストする機能もあります。 これには、コントローラー内で使用される $scope オブジェクトのテストが含まれます。

    これを実現する方法の例を見てみましょう。

    この例では、

    まずコントローラーを定義する必要があります。 このコントローラーは以下の手順を実行します。

    1. ID 変数を作成し、それに値 5 を割り当てます。
    2. ID 変数を $scope オブジェクトに割り当てます。

    このテストでは、このコントローラーの存在をテストし、$scope オブジェクトの ID 変数が 5 に設定されているかどうかもテストします。

    まず次のことを確認する必要がありますwing 前提条件が整っている

    npm 経由で Angular.JS-mocks ライブラリをインストールします。 これは、コマンド プロンプトで次の行を実行することで実行できます。

    npm install Angular JS-mocks

    次に、karma.conf.js ファイルを変更して、テストに適切なファイルが含まれていることを確認します。 以下のセグメントは、変更が必要な karma.conf.js のファイル部分を示しています。

    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
    • 「files」パラメータは基本的に、テストの実行に必要なすべてのファイルを Karma に伝えます。
    • AngularJS 単体テストを実行するには、AngularJS.js および AngularJS-mocks.js ファイルが必要です
    • Index.js ファイルにはコントローラーのコードが含まれます。
    • テスト フォルダーには、すべての AngularJS テストが含まれます。

    以下は、アプリケーションのテスト フォルダーにファイル Index.js として保存される Angular.JS コードです。

    以下のコードは次のことを行うだけですwing 物事

    1. 作る AngularJS モジュール サンプルアプリと呼ばれる
    2. AngularJSControllerというコントローラーを作成します。
    3. ID という変数を作成し、値 5 を指定して $scope オブジェクトに割り当てます。
    var sampleApp = AngularJS.module('sampleApp',[]);
    sampleApp.controller('AngularJSController', function($scope) {
        $scope.ID =5;
    });

    上記のコードが正常に実行されると、次のステップは テストケース コードが適切に記述され、実行されていることを確認します。

    テストのコードは以下のようになります。

    コードは、ControllerTest.js という別のファイルに含まれ、test フォルダーに配置されます。 以下のコードは次のことを行うだけですwing 重要なこと

    1. beforeEach 関数 – この関数は、テストの実行前に「sampleApp」という AngularJS.JS モジュールをロードするために使用されます。 これは、index.jsファイルのモジュールの名前であることに注意してください。
    2. $コントローラーオブジェクトは、index.jsファイルで定義されているコントローラー「Angular JScontroller」のモックアップオブジェクトとして作成されます。 あらゆる種類のユニットテストでは、模擬オブジェクトは、実際にテストに使用されるダミーオブジェクトを表します。 このモックオブジェクトは、実際にコントローラーの動作をシミュレートします。
    3. beforeEach(inject(function(_$controller_) – これは、実際のコントローラーのように動作するように、テストにモック オブジェクトを挿入するために使用されます。
    4. var $scope = {}; これは、$scope オブジェクト用に作成されるモック オブジェクトです。
    5. var controller = $ controller( 'angularjscontroller'、{$ scope:$ scope}); - ここでは、「angular.jscontroller」という名前のコントローラーの存在をチェックしています。 ここでは、index.jsファイルのコントローラー内の$ scopeオブジェクトからテストファイルの$ scopeオブジェクトにすべての変数を割り当てています
    6. 最後に、$scope.ID を 5 と比較しています。
    describe('AngularJSController', function() {
        beforeEach(module('sampleApp'));
    
        var $controller;
    
        beforeEach(inject(function(_$controller_){
                  $controller = _$controller_;
        }));
    
        describe('$scope.ID', function() {
            it('Check the scope object', function() {
                var $scope = {};
                var controller = $controller('AngularJSController', { $scope: $scope });
                expect($scope.ID).toEqual(5);
            });
        });
    });

    上記のテストは Karma ブラウザで実行され、前のトピックで示したのと同じ合格結果が得られます。

    AngularJS ディレクティブのテスト

    Karma テスト フレームワークには、カスタム ディレクティブをテストする機能もあります。 これには、カスタム ディレクティブ内で使用される te​​mplateURL が含まれます。

    これを実現する方法の例を見てみましょう。

    この例では、まず次のことを行うカスタム ディレクティブを定義します。wing 物事

    1. SampleAppというAngularJSモジュールを作成します
    2. Guru99 という名前のカスタム ディレクティブを作成します。
    3. 「This is AngularJS Testing」というテキストを表示するヘッダー タグを含むテンプレートを返す関数を作成します。
    var sampleApp = AngularJS.module('sampleApp',[]);
    sampleApp.directive('Guru99', function () {
        return {
            restrict: 'E',
            replace: true,
            template: '<h1>This is AngularJS Testing</h1>'
        };
    });

    上記のコードが正常に実行されたら、次のステップは、コードが適切に記述され、実行されたことを確認するテスト ケースを作成することです。 テストのコードは以下のようになります

    コードは DirectiveTest.js という別のファイルに含まれ、test フォルダーに配置されます。 以下のコードは次のことを行うだけですwing 重要なこと

    1. beforeEach 関数 – この関数は、テストの実行前に「sampleApp」という Angular JS モジュールをロードするために使用されます。
    2. $compile サービスはディレクティブをコンパイルするために使用されます。 このサービスは必須であり、Angular.JS がカスタム ディレクティブのコンパイルに使用できるように宣言する必要があります。
    3. $rootscope は、AngularJS.JS アプリケーションのプライマリ スコープです。 コントローラーの $scope オブジェクトについては前の章で説明しました。 $scope オブジェクトは $rootscope オブジェクトの子オブジェクトです。 これがここで宣言されている理由は、カスタム ディレクティブを介して DOM 内の実際の HTML タグに変更を加えているためです。 したがって、HTML ドキュメント内で変更が発生したときに実際にリッスンまたは認識する $rootscope サービスを使用する必要があります。
    4. var 要素 = $compile(“ ”) – これは、ディレクティブが正しく挿入されるかどうかをチェックするために使用されます。 カスタム ディレクティブの名前は Guru99 です。カスタム ディレクティブの章から、ディレクティブが HTML に挿入されると、「 」として挿入されることがわかります。 '。 したがって、このステートメントはそのチェックを行うために使用されます。
    5. Expect(element.html()).toContain(“This is AngularJS Testing”) – これは、「This is AngularJS Testing」の innerHTML テキストを含む要素 (この場合は div タグ) を見つける必要があることを Expect 関数に指示するために使用されます。 AngularJS テスト」。
    describe('Unit testing directives', function() {
      var $compile,
          $rootScope;
       beforeEach(module('sampleApp'));
    
      beforeEach(inject(function(_$compile_, _$rootScope_){
        $compile = _$compile_;
        $rootScope = _$rootScope_;
     }));
    
     it('Check the directive', function() {
        // Compile a piece of HTML containing the directive
        var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
        $rootScope.$digest();
        expect(element.html()).toContain("This is AngularJS Testing");
      });
    });

    上記のテストは Karma ブラウザで実行され、前のトピックで示したのと同じ合格結果が得られます。

    エンドツーエンドテストAngularJS JSアプリケーション

    Karma テスト フレームワークは、Protractor と呼ばれるフレームワークとともに、Web アプリケーションをエンドツーエンドでテストする機能を備えています。

    つまり、ディレクティブとコントローラーのテストだけでなく、HTML ページに表示されるその他のあらゆるテストも行われます。

    これを実現する方法の例を見てみましょう。

    以下の例では、NG-Reepeatディレクティブを使用してデータテーブルを作成するAngularJSアプリケーションがあります。

    1. まず、「tutorial」という変数を作成し、XNUMX つのステップでいくつかのキーと値のペアを割り当てます。 各キーと値のペアは、テーブルを表示するときにデータとして使用されます。 次に、チュートリアル変数がスコープ オブジェクトに割り当てられ、ビューからアクセスできるようになります。
    2. テーブル内のデータの各行に対して、ng-repeat ディレクティブを使用しています。 このディレクティブは、変数 ptutor を使用して、チュートリアル スコープ オブジェクト内の各キーと値のペアを処理します。
    3. 最後に、私たちが使用しているのは、 タグをキーと値のペア (ptutor.Name と ptutor.Description) とともに使用して、テーブル データを表示します。
    <table >
                 <tr ng-repeat="ptutor in tutorial">
                       <td>{{ ptutor.Name }}</td>
    	               <td>{{ ptutor.Description }}</td>
                 </tr>
       </table>
    </div>
      <script type="text/javascript">
          var app = AngularJS.module('DemoApp', []);
            app.controller('DemoController', function($scope) {
               $scope.tutorial =[
                    {Name: "Controllers" , Description : "Controllers in action"},
                    {Name: "Models" , Description : "Models and binding data"},
    	            {Name: "Directives" , Description : "Flexibility of Directives"}
    			]   });

    上記のコードが正常に実行されたら、次のステップは、コードが適切に記述され、実行されたことを確認するテスト ケースを作成することです。 テストのコードは以下のようになります

    私たちのテストは、実際にNG-Reepeatディレクティブをテストし、上記の例から3行のデータを含むことを確認します。

    まず次のことを確認する必要がありますwing 前提条件が整っている

    npm 経由で分度器ライブラリをインストールします。 これは、コマンド プロンプトで次の行を実行することで実行できます。

    "npm install protractor"

    テストのコードは以下のようになります。

    コードは CompleteTest.js という別のファイルに含まれ、テスト フォルダーに配置されます。 以下のコードは次のことを行うだけですwing 重要なこと

    1. ブラウザ機能は分度器ライブラリによって提供され、AngularJS アプリケーション (上記のコードを含む) がサイト URL – http://localhost:8080/Guru99/ で実行されていることを前提としています。
    2. var list=element.all(by.repeater(チュートリアルのptutor’)); -このコード行は実際には、コード「ptutor intutorial」によって設定される ng-repeat ディレクティブをフェッチしています。 element と by.repeater は、分度器ライブラリによって提供される特別なキーワードであり、これにより、tails ng-repeat ディレクティブの。
    3. Expect(list.count()).toEqual(3); – 最後に、expect 関数を使用して、ng-repeat ディレクティブの結果としてテーブルに実際に 3 つの項目が設定されていることを確認しています。
    Describe('Unit testing end to end', function() {
      beforeEach(function() {
    browser.get('http://localhost:8080/Guru99/');
    })
       it('Check the ng directive', function() {
          var list=element.all(by.repeater(ptutor in tutorial'));
          expect(list.count()).toEqual(3);  }); });

    上記のテストは Karma ブラウザで実行され、前のトピックで示したのと同じ合格結果が得られます。

    まとめ

    • AngularJS でのテストは、Google 自体が開発したフレームワークである Karma フレームワークを使用して実現されます。
    • Karma Frameworkは、ノードパッケージマネージャーを使用してインストールされています。 基本的なテストのためにインストールする必要がある重要なモジュールは、Karma、Karma-Chrome-Launcher、Karma-Jasmine、およびKarma-Cliです。
    • テストは、通常、アプリケーションのテストフォルダーに保持されている個別のJSファイルで記述されています。 これらのテスト ファイルの場所は、karma.conf.js という特別な構成ファイルに記載する必要があります。 Karma は、すべてのテストを実行するときにこの構成ファイルを使用します。
    • Karma は、コントローラーやカスタム ディレクティブのテストにも使用できます。
    • エンドツーエンドの Web テストの場合、分度器と呼ばれる別のフレームワークをノード、パッケージ マネージャー経由でインストールする必要があります。 このフレームワークは、HTML ページ上のすべての要素をテストするために使用できる特別なメソッドを提供します。