Testen von Angular 1.5-Komponenten: Testen von $ onChanges

Question

Ich wollte die $onChanges-Komponente nach dem Erstellen des Controllers mit $componentController Service testen. Allerdings wusste ich nicht, wie man $onChanges auslöst/testet. Ich habe versucht, das Bindings-Objekt zu ändern, das an $componentController übergeben wurde, aber Änderungen wurden nicht vorgenommen.

Allerdings konnte ich das gleiche mit der Verwendung von guten alten $compile & $rootScope tun:

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()) 
    }) 
}) 

Meine Frage ist: wenn $onChanges mit $componentController testen, muss ich manuell $onChanges und bauen rufen müssen changesObj manuell ?

Answer 1

Ja, ich denke schon. Es hilft, sich auf die Absicht Ihres Tests zu konzentrieren.

Wenn Sie eine High-Level-Manipulation versuchen, die schließlich den onChanges-Haken auslöst, üben Sie tatsächlich das interne Verhalten von Angular und Ihrem Code gleichzeitig aus. Dies ist wahrscheinlich nicht Ihre Absicht hier.

Wenn Sie anerkennen, dass Sie Angular verwenden und etwas Bestimmtes von diesem Hook erwarten, macht das explizite Aufrufen Sinn.