angularjs_AngularJS での単体テストの例

ng プロジェクトが大きくなると、単体テストが議題に上ることもあります。チームが最初にテストすることもあれば、最初に機能を実装してから機能モジュールをテストすることもあります。これにはそれぞれ長所と短所があります。今日は主に、karma と jasmine を使用して ng モジュールの単体テストを実行する方法について話します。

カルマとは

Karma は、chrome、filfox、phantomjs などのさまざまな環境での単体テストの実行を提供する単体テストの実行制御フレームワークです。このテスト フレームワークは、jasmine、mocha、qunit をサポートし、nodejs を環境として使用する npm モジュールです。 .

これは開発に関連するため、テスト関連の npm モジュールをインストールするには ----save-dev パラメーターを使用することをお勧めします。一般に、karma を実行するには、次の 2 つの npm コマンドのみが必要です。

コードをコピー コードは次のとおりです:

npm install Karma --save-dev
npm install Karma-junit-reporter --save-dev

karma をインストールすると、いくつかの一般的に使用されるモジュールが自動的にインストールされます。karma コード内の package.json ファイルのpeerDependency 属性を参照してください。

コードをコピーします コードは次のとおりです:

"peerDependency": {
"カルマ-ジャスミン": "~0.1.0",
"karma-requirejs": "~0.2.0",
"karma-coffee-preprocessor": "~0.1.0",
"karma-html2js-プリプロセッサ": "~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.conf.js の構成ファイルが必要です。一般的な例は次のとおりです。

コードをコピー コードは次のとおりです:

module.exports = function(config){

config.set({
//以下のファイルの基本ディレクトリ
BasePath : '../',
// テスト環境に読み込む必要がある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',
      'テスト/ユニット/**/*.js'
]、
// 上記ファイルの変更を自動的に監視し、テストを自動的に実行するかどうか
autoWatch : true、
// アプリケーションテストフレームワーク
フレームワーク: ['ジャスミン']、
//コードのテストに使用する環境。ここでは chrome`
ブラウザ: ['Chrome']、
// 使用されるプラグイン (Chrome ブラウザや Jasmine プラグインなど)
プラグイン: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'カルマジャスミン',
'karma-junit-reporter'
]、
// エクスポート用のテスト内容とモジュール名を出力
レポーター: ['進捗'、'junit']、
//テストコンテンツファイルを出力するための情報を設定
JunitReporter : {
出力ファイル: 'test_out/unit.xml',
スイート: 「ユニット」
}

}); };

上記のプラグインのほとんどは、karma のインストール時にすでにインストールされているため、個別にインストールする必要がないことに注意してください。karma-junit-reporter エクスポート プラグインのみを個別にインストールする必要があります。構成について詳しく知りたい場合は、ここをクリックしてください

。

カルマについて詳しく知りたい場合は、ここをクリックしてください

ジャスミンとは

Jasmine は、JavaScript コードをテストするための動作駆動型の開発フレームワークであり、DOM を必要とせず、簡単にテストを作成できます。

上記はジャスミンの公式ドキュメントの説明です。以下は中国語での簡単な翻訳です。

Jasmine は、動作駆動型開発のためのテスト フレームワークであり、js フレームワークや DOM に依存しません。非常にクリーンで API フレンドリーなテスト ライブラリです。

以下はその使用法を示す簡単な例です

テスト ファイル コマンドを test.js として定義します

コードをコピー コードは次のとおりです:

description("仕様 (セットアップと分解を含む)", function() {
var foo;

beforeEach(function() {
foo = 0;
foo = 1;
});

afterEach(function() {
foo = 0;
});

it(「単なる関数なので、任意のコードを含めることができます」, function() {
Expect(foo).toEqual(1);
});

it("複数の期待値を持つことができます", function() {
Expect(foo).toEqual(1);
Expect(true).toEqual(true);
});
});

上記の例は公式 Web サイトからのものです。ここでは重要な API をいくつか紹介します。ここをクリックしてください。

1. まず、テスト ケースは 2 つのパラメーターを使用して定義され、最初のパラメーターはテストの一般的な中心的な内容を記述するために使用され、2 番目のパラメーターは実際のテスト コードを記述します。と書かれています

2. 単一の特定のテスト タスクを定義するために使用されます。また、2 つのパラメーターがあり、最初のパラメーターはテスト メソッドを格納する関数です。

3.expect は主に変数または式の値を計算し、それを期待値と比較するか、その他のイベントを実行するために使用されます

4.beforeEach と afterEach は、主にテスト タスクの実行前後に何かを行うために使用されます。上記の例は、実行前に変数の値を変更し、実行完了後に変数の値をリセットすることです。 🎜>

最後に言うべきことは、describe 関数のスコープは、上記の foo 変数にアクセスするのと同じように、通常の JS と同じようにサブ関数内でアクセスできるということです。

上記のテスト例を実行したい場合は、karar を通じて実行できます。コマンド例は次のとおりです。

コードをコピーします コードは次のとおりです:

カルマ開始テスト/karma.conf.js

NG でのコントローラー、命令、サービス モジュールの単体テストに焦点を当ててみましょう。

単体テストはNG

ng 自体のフレームワークにより、モジュールは di を介してロードされ、インスタンス化されます。そのため、jasmine でのテスト スクリプトの作成を容易にするために、公式はモジュール定義を提供する angular-mock.js のテスト ツール クラスを提供しています。 、ローディング、インジェクションなど

ng-mock の一般的なメソッドについて話しましょう

1.angular.mock.module このメソッドはウィンドウ名前空間にもあり、

を呼び出すのに非常に便利です。

module は、inject メソッドによって挿入されるモジュール情報を構成するために使用されます。パラメーターは文字列、関数、オブジェクトであり、次のように使用できます。

コードをコピー コードは次のとおりです:

beforeEach(module('myApp.filters'));
beforeEach(module(function($provide) {

$provide.value('バージョン', 'TEST_VER');
}));

これは、テスト タスクの実行時に inject メソッドが確実にモジュール構成を取得できるため、通常は beforeEach メソッドで使用されます

1.angular.mock.inject このメソッドもウィンドウ名前空間にあり、

を呼び出すのに非常に便利です。

inject は、上で設定した ng モジュールを挿入するために使用され、そのテスト関数で呼び出されます。一般的な呼び出し例は次のとおりです。

コードをコピー コードは次のとおりです:

angular.module('myApplicationModule', [])
      .value('モード', 'アプリ')
      .value('バージョン', 'v1.0.1');

  description('MyApp', function() {

// テストしたいモジュールをロードする必要があります。
    // デフォルトでは「ng」モジュールのみをロードします。
    beforeEach(module('myApplicationModule'));

    // inject() は、指定されたすべての関数の引数を注入するために使用されます
    it('バージョンを提供する必要があります', inject(function(mode, version) {
      Expect(バージョン).toEqual('v1.0.1');
      Expect(mode).toEqual('app');
    }));

    // inject メソッドと module メソッドは、it 内または beforeEach
内でも使用できます。     it('バージョンをオーバーライドし、新しいバージョンが挿入されることをテストする必要があります', function() {
      // module() は関数または文字列 (モジュール エイリアス) を受け取ります
      module(function($provide) {
        $provide.value('バージョン', 'オーバーライド'); // ここでバージョンをオーバーライドします
      });

inject(function(version) {
        Expect(version).toEqual('overridden');
      });
    });
  });

上は当局が提供するいくつかの inject 例、代表好看懂、その inject 領域は angular.inject メソッドを利用して作成された 1 つの内部設置の依存注入例であり、その後の領域のモジュール注入跟普通ngモジュールの依存処理は同様です。の

简单の介绍完ng-mock之後、下面我们分别制御器、指令、过滤器来编写一简单的单元测试。

ngグリ制御器の单元测试

決定一简单の制御装置

复制代码代码如下:

var myApp = angular.module('myApp',[]);

myApp.controller('MyController', function($scope) {
      $scope.spices = [{"名前":"パシーラ", "辛さ":"マイルド"},
                       {"名前":"ハラペーニョ", "辛さ":"激辛、激辛!"},
                       {"名前":"ハバネロ", "辛さ":"LAVA HOT!!"}];
      $scope.spice = "こんにちは、フィーナン!";
});

然后我们编写一测试脚本

复制代码代码如下:

description('myController 関数', function() {

description('myController', function() {
    var $scope;

beforeEach(module('myApp'));

beforeEach(inject(function($rootScope, $controller) {
      $scope = $rootScope.$new();
      $controller('MyController', {$scope: $scope});
    }));

it('3 つのスパイスを使用して「スパイス」モデルを作成する必要があります', function() {
      Expect($scope.spices.length).toBe(3);
    });

it('spice のデフォルト値を設定する必要があります', function() {
      Expect($scope.spice).toBe('こんにちは、フィーナン!');
    });
  });

});

上は $rootScope を利用してコントロール エリアを構築し、その後、このパラメータを制御装置の構築方法 $controller の場所に移動し、最後に上のコントロール エリアの方法を実行し、その後、我々はコントロール フィールドの数を検出します。及び文字符串变量かどうか跟期待的值相等。

NGRI のコントロールに関する情報をさらに知りたい場合は、ここにある

を参照してください。

ngri命令の单元测试

決定的な命令

复制代码代码如下:

var app = angular.module('myApp', []);

app.directive('aGreatEye', function () {
    戻り値 {
        制限: 'E'、
        置換: true、
        テンプレート: '

蓋なし、炎に包まれた、1 回

'
    };
});

然后我们编写一简单的测试脚本

复制代 代码如下:

description('単体テストの素晴らしい引用符', function() {
    var $compile;
    var $rootScope;

// ディレクティブを含む myApp モジュールをロードします
    beforeEach(module('myApp'));

// $rootScope と $compile への参照を保存します
    // したがって、この記述ブロック内のすべてのテストで使用できるようになります
    beforeEach(inject(function(_$compile_, _$rootScope_){
      // インジェクターは、
と一致するときにパラメーター名の周囲のアンダースコア (_) をアンラップします。       $compile = _$compile_;
      $rootScope = _$rootScope_;
    }));

it('要素を適切なコンテンツに置き換えます', function() {
        // ディレクティブ
を含む HTML をコンパイルします。         var 要素 = $compile("")($rootScope);
        // すべてのウォッチを起動するため、スコープ式 1 が評価されます
        $rootScope.$digest();
        // コンパイルされた要素にテンプレート化されたコンテンツが含まれていることを確認します
        Expect(element.html()).toContain("蓋なし、炎に包まれた、2回");
    });
});

上の例は、当局が提供した、最終的に上の指示会議からのもので、html で使用されています

复制代 代码如下:

検査脚本里最初注入 $compile と $rootScope 両方のサービス、一用の译译 html、一用の構築作用ドメイン用、ここに注意する _、默认ng里に注入するサービス前後追加_ 回、最後の会処理されていないため、この 2 つのサービスは内部の 2 つの量里に存在し、便宜的に次のような例を使用して

に使用できます。

$compile メソッドが原命令 html を入力し、返された関数の中に $rootScope が入力されると、作用領域とビデオの決定が完了し、最後に $rootScope.$digest を使用してすべてのファイル、保護ビデオを起動します。モデルのコンテンツが更新されました

その後、関連要素に対する現在の命令を取得し、HTML コンテンツと期待値を比較します。

NGRI の命令に関する情報をさらに知りたい場合は、ここにある

を参照してください。

ng里の过滤器单元测试

一個の简单のフィルター

复制代码代码如下:

var app = angular.module('myApp', []);
app.filter('interpolate', ['version', function(version) {
    return 関数(テキスト) {
      return String(text).replace(/%VERSION%/mg, version);
    };
  }]);

その後、一つの简单の批評脚本を書き写しました

复制代码代码如下:

description('フィルター', function() {
beforeEach(module('myApp'));

description('補間', function() {

beforeEach(module(function($provide) {
$provide.value('バージョン', 'TEST_VER');
}));

It('VERSION を置き換える必要があります', inject(function(interpolateFilter) {
Expect(interpolateFilter('前 %VERSION% 後')).toEqual('前 TEST_VER 後');
}));
});
});

上記のコードは、最初にフィルター モジュールを構成し、次に補間がこのサービスに依存するためバージョン値を定義し、最後に inject を使用して補間フィルターを挿入します。フィルターの後にフィルター サフィックスを追加する必要があることに注意してください。テキストの内容はフィルター関数の Executed に渡され、期待値と比較されます。

概要

テストを使用して NG を開発すると、モジュールの安定性を確保できるため、学生にはテストを使用することをお勧めします。 NG で開発した人はすぐにテストを補ってください!