Testen einer Funktion in einer Komponente in einer Komponente, die die Methode zur übergeordneten Komponente aufruft

Question

Hallo stackoverflow-Community.

Ich arbeite an einem Angular-Projekt (1.5.6), verwende eine Komponentenstruktur und schreibe gerade einige Komponententests. Ich lerne immer noch viel über Komponententests - besonders in Bezug auf Angular - und hoffte, dass ich Sie um Hilfe für das folgende Problem bitten kann:

Ich versuche, eine Komponente zu testen, die eine Callback-Methode von der übergeordneten Komponente erhält . Ich versuche die Methode foo zu verspotten (siehe unten das Codebeispiel). Und leider ruft diese Methode den übergeordneten Controller.

Also wenn ich versuche es zu testen, klagt es, dass die Methode nicht definiert ist. Dann dachte ich, ich könnte es mit SpyOn spotten, aber dann bekomme ich den Fehler Error: <spyOn> : foobar() method does not exist

Also ich denke, ich bin nicht in der Lage, diese Methode zu verspotten.

Modul:

angular.module("myApp") 
.component("sample", { 
    "templateUrl": "components/sample/sample.html", 
    "controller": "SampleController", 
    "controllerAs": "sampleCtrl", 
    "bindings": { 
     "config": "<", 
     "foobar": "&" 
    } 
}) 
.controller("SampleController", 
      ["$scope", 
    function($scope) { 
     this.isActive = true; 

     this.foo = function() { 
      // do stuff 
      this.isActive = false; 

      // also do 
      this.foobar(); 
     }; 
    } 
); 

Einheit Test

describe("Component: SampleComponent", function() { 

    beforeEach(module("myApp")); 

    var sampleComponent, scope, $httpBackend; 

    beforeEach(inject(function($componentController, $rootScope, _$httpBackend_) { 
     scope = $rootScope.$new(); 
     sampleComponent = $componentController("sample", { 
      "$scope": scope 
     }); 
     $httpBackend = _$httpBackend_; 
    })); 

    it("should do set isActive to false on 'foo' and call method...", function() { 
     spyOn(sampleComponent, "foobar") 

     expect(sampleComponent.isActive).toBe(true); 
     expect(sampleComponent).toBe(""); 
     expect(sampleComponent.foobar).not.toHaveBeenCalled(); 

     sampleComponent.foo(); 

     expect(sampleComponent.foobar).toHaveBeenCalled(); 
     expect(sampleComponent.foobar.calls.count()).toBe(1); 
     expect(sampleComponent.isActive).toBe(false); 
    }); 
}); 

Ich hoffe, dass ich keine Fehler zu dieser hinzugefügt haben, aber das oben ist etwa, was ich versuche zu machen. Irgendwelche Vorschläge sind willkommen und wenn der Ansatz falsch ist oder mehr Informationen benötigt werden, lass es mich wissen!

Answer 1

Nach der Hilfe von @estus (siehe Kommentare in Frage) - Ich habe gelernt, dass ich createSpy verwenden kann, um dieses Problem zu lösen.

it("should do set isActive to false on 'foo' and call method...", function() { 
     sampleComponent.foobar = jasmine.createSpy(); 

     expect(sampleComponent.isActive).toBe(true); 
     expect(sampleComponent).toBe(""); 
     expect(sampleComponent.foobar).not.toHaveBeenCalled(); 

     sampleComponent.foo(); 

     expect(sampleComponent.foobar).toHaveBeenCalled(); 
     expect(sampleComponent.foobar.calls.count()).toBe(1); 
     expect(sampleComponent.isActive).toBe(false); 
    }); 

Einige zusätzliche Quellen, die ich verwendet wurden, waren:

• http://angular-tips.com/blog/2014/03/introduction-to-unit-test-spies/
• How does the createSpy work in Angular + Jasmine?