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

その中で、

npm は、任意のマシンにカスタムモジュールをインストールするために使用されるノードパッケージマネージャーのコマンドラインユーティリティです。
install パラメーターは、npm コマンドラインユーティリティにインストールが必要であることを指示します。
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'
]

上記の設定ファイルは、カルマランタイムエンジンに次のことを伝えます。

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

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

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

上記のコードには次のような特徴があります

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

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

KARMA start

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

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

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

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

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

この例では、

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

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

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

まず、以下の前提条件が満たされていることを確認する必要があります。

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 コードです。

以下のコードは、次のことだけを実行します。

作る AngularJS モジュールサンプルアプリと呼ばれる
AngularJSControllerというコントローラーを作成します。
ID という変数を作成し、値 5 を指定して $scope オブジェクトに割り当てます。

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

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

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

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

beforeEach 関数 – この関数は、テストの実行前に「sampleApp」という AngularJS.JS モジュールをロードするために使用されます。これは、index.jsファイルのモジュールの名前であることに注意してください。
$コントローラーオブジェクトは、index.jsファイルで定義されているコントローラー「Angular JScontroller」のモックアップオブジェクトとして作成されます。あらゆる種類のユニットテストでは、模擬オブジェクトは、実際にテストに使用されるダミーオブジェクトを表します。このモックオブジェクトは、実際にコントローラーの動作をシミュレートします。
beforeEach(inject(function(_$controller_) – これは、実際のコントローラーのように動作するように、テストにモックオブジェクトを挿入するために使用されます。
var $scope = {}; これは、$scope オブジェクト用に作成されるモックオブジェクトです。
var controller = $ controller（ 'angularjscontroller'、{$ scope：$ scope}）; - ここでは、「angular.jscontroller」という名前のコントローラーの存在をチェックしています。ここでは、index.jsファイルのコントローラー内の$ scopeオブジェクトからテストファイルの$ scopeオブジェクトにすべての変数を割り当てています
最後に、$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 テストフレームワークには、カスタムディレクティブをテストする機能もあります。これには、カスタムディレクティブ内で使用される templateURL が含まれます。

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

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

SampleAppというAngularJSモジュールを作成します
Guru99 という名前のカスタムディレクティブを作成します。
「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という別のファイルにあります。以下のコードは、次の重要なことだけを実行します。

beforeEach 関数 – この関数は、テストの実行前に「sampleApp」という Angular JS モジュールをロードするために使用されます。
$compile サービスはディレクティブをコンパイルするために使用されます。このサービスは必須であり、Angular.JS がカスタムディレクティブのコンパイルに使用できるように宣言する必要があります。
$rootscope は、AngularJS.JS アプリケーションのプライマリスコープです。コントローラーの $scope オブジェクトについては前の章で説明しました。 $scope オブジェクトは $rootscope オブジェクトの子オブジェクトです。これがここで宣言されている理由は、カスタムディレクティブを介して DOM 内の実際の HTML タグに変更を加えているためです。したがって、HTML ドキュメント内で変更が発生したときに実際にリッスンまたは認識する $rootscope サービスを使用する必要があります。
var 要素 = $compile(“ ”) – これは、ディレクティブが正しく挿入されるかどうかをチェックするために使用されます。カスタムディレクティブの名前は Guru99 です。カスタムディレクティブの章から、ディレクティブが HTML に挿入されると、「」として挿入されることがわかります。 '。したがって、このステートメントはそのチェックを行うために使用されます。
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アプリケーションがあります。

まず、「tutorial」という変数を作成し、XNUMX つのステップでいくつかのキーと値のペアを割り当てます。各キーと値のペアは、テーブルを表示するときにデータとして使用されます。次に、チュートリアル変数がスコープオブジェクトに割り当てられ、ビューからアクセスできるようになります。
テーブル内のデータの各行に対して、ng-repeat ディレクティブを使用しています。このディレクティブは、変数 ptutor を使用して、チュートリアルスコープオブジェクト内の各キーと値のペアを処理します。
最後に、私たちはタグとキー値のペア (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行のデータを含むことを確認します。

まず、以下の前提条件が満たされていることを確認する必要があります。

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

"npm install protractor"

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

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

ブラウザ機能は分度器ライブラリによって提供され、AngularJS アプリケーション (上記のコードを含む) がサイト URL – http://localhost:8080/Guru99/ で実行されていることを前提としています。
var list=element.all(by.repeater(ptutor in tutorial')); - このコード行は、実際にはコード 'ptutor in tutorial' によって設定される ng-repeat ディレクティブを取得しています。element と by.repeater は、protractor ライブラリによって提供される特別なキーワードであり、ng-repeat ディレクティブの詳細を取得できます。
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 ページ上のすべての要素をテストするために使用できる特別なメソッドを提供します。

よろしければ：

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

カルマのインストール

Karma フレームワークの構成

関連記事

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

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

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

まとめ