AngularJSユニットテスト(一)詳細

AngularJSユニットテスト
ネット上にはjasmineやngMockのインストール方法など、ユニットテストのチュートリアルがたくさんあります.ここでは言いません.次に、ユニットテストのプロセスに重点を置きます.
モジュールのロード
AngularJSはmoduleを用いてcontrollers,services,filtersのような異なる部分を適用する.異なる部分をテストするには、異なるモジュールの参照が必要であり、ロードする必要があります.Angularjsモジュール注入はngMockモジュールを用いた.ngMockモジュールは、サービスサービスサービスをユニットテストに注入することができる.ngMockはangular.mock.module法を暴露し,略称はmoduleである.
の準備を
簡単なAngularJS起動モジュールを用意する必要があります.
実装方法
 Angular.mock.module法をbeforeEach法に用いた.このmoduleメソッドは、モジュールの名前または別の字面量オブジェクトの代わりに、注入される必要があります.
1.モジュールを表す文字列名を使用する
 beforeEach(module('services.emcees'))
2、字面量オブジェクトを追加する

 beforeEach(module('services.emcees',{
 beatjunkies': {
  'dj': 'Babu'
 })
 })

3、テストでbeatjunkiesリファレンスを使用して解決したオブジェクトを取得し、{'dj':'Babu'}を返すことができます.
4、最後にrapperリファレンスを提供する方法も提供できます.

 beforeEach(module('services.emcees'),{
 beatjunkies': {
  'dj': 'Babu'
 })
 },function($provider){
 $provider.value('rapper', 'madchild')
 })

テストを書く
たとえば、この例では、scope値を変更してコンテンツを更新するコマンドのテストを開始します.scopeで定義されたnoclickメソッドがトリガーされると、この値が割り当てられます.これはHTML上のボタンでトリガーする必要があります.
例:

 .directive('emcee',function(){
 return{
  restrict:'E',
  link:function(scope,element,attr){
   scope.onClick=function(){
    element.text('Step up ' + scope.emcee + '!')
   }
  }
 }

 })

具体的なやり方.
1、scope(var scope)用とelement(var element)用の2つの変数を作成します.
2、モジュールbeforeEach(module('cookbook')をロードすることを確定します.
3、beforeEachメソッドを作成して必要な依存関係を注入し、これらの変数を宣言するために1の変数を指定します.新しいscopeオブジェクトの作成とscopeのemcee値の指定が含まれます.

 beforeEach(inject(function($rootscope,$compile){
 rootscope=$rootscope;
 scope=$rootscope.$new();
 scope.emcee='Izzy Ice'
 }))

4、直後3 beforeEach関数に作成命令の部分を加える.

 beforeEach(inject(function($rootscope,$compile){
 rootscope=$rootscope;
 scope=$rootscope.$new();
 scope.emcee='Izzy Ice';
 element=angular.element('');
 $compile(element)(scope);
 }))

5、第3ステップに続いてbeforeEachですべてのwatcherを起動する
 scope.$digest();
6、所望の結果を定義するために新しいspecを作成する必要があります.
 it('should assign scope emcee to element text when the onClick handler is called',function(){ })
7、ステップ6 specにおいて、onClickをトリガする方法を追加する.
 scope.onClick
8、ステップ6 specにおいて、element値を一致させるための所望の値を追加する
 expect(element.text()).tobe('Step up Izzy Ice!')
9、統合

 it('should assign scope emcee to element text when the onClick handler is called', function () {
  scope.onClick ();
  expect(element.text()).toBe('Step up Izzy Ice!');
});

げんり
ステップ1では、繰り返しテストできる2つの変数が宣言され、ステップ3でbeforeEachを使用してテスト実行前に2つの変数に値が割り当てられていることを確認します.ステップ3では、scopeに対してscope.emceeという値も定義されており、この値が命令に関連付けられることを期待しています.ステップ4では、私たちの命令をコンパイルし、ステップ5で$scope.$degistを呼び出して、すべてのバインドが更新されたことを確認します.
ステップ6でこのspecテストを宣言し、そこから何を得るかを規定し、scope.onClickをトリガーし、scopeが提供する値を利用してelementを更新する.Angular elementはelementの内容を返すのに便利なtext関数を提供する.ステップ8でこのtextが返す値を使用してStep up Izzzy Iceと比較する.
いくつかのよく使われるmatchers方法.
1.実績値には期待値が含まれます.
 expect($djListItems().eq(0).html()).toContain('DStylesQbertMix Master MikeShortkutA-TrakBabu')
2、実績値と期待値が一致しているか.
 expect(element.text()).toBe('iec')
3、実際値と期待値が等しい
 expect(scope.emcee.length).toEqual(0)
4、実際値期待値正則一致が等しい
 expect(element.text().toMatch(/Eyadea/))
5、実際の値が定義されているか
 expect($cookies.bboy.toBeDefined)
6、実際の値が定義されていない場合
 expect($cookiew.bboy).not.toBeDefined()
7、実際の値が空かどうか
 expect(BreakBeat.tracks()).tobeNull()
8、実際の値が空でないか
expect(BreakBeat.tracks().not.tobeNull();9、実際の値がfalseかどうか
 expect(element(by.css('button')).getAttribute('disabled').toBeFalsy())
10、実績値が真
 expect(angular.element(element.find('a')[0].parent().hasClass('nghide').getAttribute('disabled')).toBeTruthy())
11、実績値が期待値より少ない
 expect(scope.deejays.length).toBeLessThan(2);
12、実績値が期待値より大きい
 expect(scope.deejays.length).toBeGraterThan(2)
以上はAngularJSユニットのテストの资料を整理して、それから引き続き関连する资料を补充して、みんなの当駅に対する支持に感谢します!