如何使用注入的服务测试 Angular 1.6 组件

Question

我想测试我的 Angular 组件，它在语法上基于 John Papa 的样式指南：

'use strict';
 angular.module('MyModule')
    .component('MyCmpnt', MyCmpnt())
    .controller('MyCtrl', MyCtrl);
function MyCmpnt() {
    return {
        restrict: 'E',
        templateUrl: 'myPath/myTemplate.html',
        bindings: {
            foo: '=',
            bar: '<'
        },
        controller: 'MyCtrl',
        controllerAs: 'vm'
    };
}
MyCtrl.$inject = ['MyService'];
function MyCtrl (MyService) {
    // controller logic
}

如您所见，我想将MyService注入控制器并监视该服务的功能。

我的测试代码：

'use strict';
describe('component: MyCmpnt', function () {
    var $componentController,
        MyService;
    beforeEach(module('MyModule'));
    beforeEach(module(function ($provide) {
        $provide.value('MyService', MyService);
        spyOn(MyService, 'serviceFunc').and.callThrough();
    }));
    beforeEach(inject(function (_$componentController_) {
        $componentController = _$componentController_;
    }));

    it('should initiate the component and define bindings', function () {
        var bindings = {
            foo: 'baz',
            bar: []
        };
        var ctrl = $componentController('MyCmpnt', null, bindings);
        expect(ctrl.foo).toBeDefined();
    });
});

但是，此设置让我遇到以下错误：

TypeError： undefined 不是构造函数（计算 '$componentController（'MyModule'， null， bindings）'）

Answer 1

上面的代码有$componentController('MyModule'...，并且没有MyModule组件。

调用MyService变量时spyOn(MyService...未定义。这将引发错误，阻止应用程序正确引导。

如果测试台使用 PhantomJS，这可能会导致beforeEach块中的错误抑制，为了正确报告错误，建议使用 Chrome Karma 启动器。

如果问题是在定义模拟服务时未定义MyService，则可以就地将其定义为存根：

beforeEach(module(function ($provide) {
    $provide.value('MyService', {
      serviceFunc: jasmine.createSpy().and.callThrough()
    });
}));