2017-03-01 9 views
0

$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의 사용과 동일한 기능을 수행 할 수 있었다 ?

+0

_ "수동으로 $ onChanges를 호출하고 changesObj를 수동으로 빌드해야합니까?"_ 실제로 그렇게 할 수있는 좋은 일입니다. 그래서 나는 당신의 질문에 혼란스러워합니다. – zeroflagL

답변

0

네, 그렇게 생각합니다. 시험의 의도에 집중하는 것이 도움이됩니다.

결국 onChanges 후크를 트리거하는 몇 가지 고급 조작을 시도하면 실제로 Angular와 코드의 내부 동작을 동시에 수행하게됩니다. 이것은 아마 당신의 의도가 아닙니다.

각도를 사용하고이 훅에서 특정의 것을 기대하고 있음을 인정하고,이를 명시 적으로 호출하는 것이 합리적입니다.

관련 문제