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

Question

我想测试语法上基于 John Papa's styleguide:

的 Angular 组件

'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 到控制器中，并 spy 在那个非常 服务。

我的测试代码：

'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 is not a constructor (evaluating '$componentController('MyModule', null, bindings)')

Answer 1

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

调用 spyOn(MyService... 时，

MyService 变量未定义。这将抛出一个错误，阻止应用程序被正确引导。

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

如果问题是MyService在mocked服务定义的地方没有定义，可以定义in-place为存根：

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