如何在调用父组件的方法的组件中测试函数

Hello stackoverflow社区。如何在调用父组件的方法的组件中测试函数

我正在使用组件结构并正在编写一些单元测试的Angular项目（1.5.6）。我仍然学习了很多关于单元测试的知识 - 尤其是与Angular有关的问题 - 并且希望我可以请求你为下列问题提供帮助：

我尝试测试一个组件，它从它的父组件接收一个回调方法。我试图嘲笑方法foo（参见下面的代码示例）。而不幸的是这个方法调用父控制器。

所以当我尝试测试它时，它抱怨说方法是未定义的。然后我想我可以用spyOn嘲笑它，但后来我得到了错误Error: <spyOn> : foobar() method does not exist

所以我觉得我无法嘲笑这种方法。

模块：

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

单元测试

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

我希望我没有任何错误添加到这一点，但是这上面是约什么，我想做。欢迎任何建议，如果方法错误或需要更多信息，请告诉我！

来源

2016-11-16 skofgar

'$ componentController'仅用于测试组件控制器。所以你必须把一个存根分配给'foobar'属性。 – estus

我只是认为这可以工作，因为'foobar'被赋值给控制器的作用域this.foobar（）'。 @estus你的存根意味着什么？一个方法？ – skofgar

存根是一个空的间谍，就像'sampleComponent.foobar = jasmine.createSpy（）'。 $ componentController是$ controller的包装器。它只是从定义的组件控制器创建一个控制器，并忽略其他所有内容。要使用绑定完全测试一个组件，它应该使用'$ compile'等进行编译，与本例中的指令没有区别。 – estus

在@estus的帮助之后（请参阅相关评论） - 我了解到我可以使用createSpy解决此问题。

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

我使用了一些额外的来源是：

来源

2017-10-05 00:06:39 skofgar

如何在调用父组件的方法的组件中测试函数

回答

相关问题