角度1.5のコンポーネントをテストする：$ onChangesをテストする方法

Question

$componentControllerサービスでコントローラを作成した後で、コンポーネントの$onChangesをテストしたかったのですが、しかし、私はどのようにトリガー/テスト$onChangesを知りませんでした。私は$componentControllerに渡されたバインディングオブジェクトを変更しようとしましたが、変更はピケッティングされませんでした。

describe("test component", function() { 

    angular.module('test', []).component('component', { 
     template: '<span>{{$ctrl.text}}</span>', 
     bindings: { 
      'text': '@' 
     }, 
     controller: function() { 

      this.$onChanges = function(changesObj) { 
       console.log("onChanges called", changesObj); 
      } 
     } 
    }) 

    var $compile, $rootScope; 

    beforeEach(module('test')); 
    beforeEach(inject(function (_$rootScope_, _$compile_) { 
     $rootScope = _$rootScope_; 
     $compile = _$compile_; 
    })); 

    it('should call onChanges', function() { 

     var scope = $rootScope.$new() 
     scope.text = 'original text'; 
     var el = $compile('<component text="{{text}}" />')(scope); 
     $rootScope.$apply(); 
     console.log(el.find('span').text()) 

     scope.text = 'text has changed'; 
     $rootScope.$apply(); 
     console.log(el.find('span').text()) 
    }) 
}) 

私の質問は次のとおりです：$componentControllerと$onChangesをテストするとき、私は手動で$onChangesを呼び出し、手動changesObjを構築しなければならないの私は$compile & $rootScope古き良きを使用して同じことを行うことができたしかし

？

Answer 1

はい、そうです。それはあなたのテストの意図に集中するのに役立ちます。

最終的にonChangesフックをトリガーする高レベルの操作を試すと、実際にはAngularとコードの内部動作を同時に実行しています。これはおそらくあなたの意図ではありません。

あなたはAngularを使用しており、このフックから特定のものを期待していることを認め、明示的にそれを呼び出すことは意味があります。