javascript - 使用 jasmine 和 bindToController true 将 Angular Directive(指令)属性绑定(bind)到 Controller

Question

我正在尝试使用 karma 和 jasmine 来测试指令。我正在使用 Angular 1.4，我在 SO 和互联网上搜索了不同的东西，但我无法让它工作。

var angular = require('angular');

module.exports = angular.module('myApp.ui.apps.servicesObject.list', [])

.directive('servicesObjectList', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        bindToController: {
            services: '=',
            selectedServices: '='
        },
        templateUrl: 'app/ui/apps/services/directives/services.html',
        controllerAs: 'servicesListCtrl',
        controller: 'ServicesListController'
    }
})

.controller('ServicesListController', require('./servicesListController'));

这就是我尝试测试它的方式。

describe('Service app test, listDirective' , function(){
    var element, scope, controller;

    beforeEach(function(){
        angular.mock.module('templates');
        angular.mock.module('myApp.ui.apps.servicesObject.list', function($provide) {
            $provide.value('gettextCatalog', { getString: function(){}});
            $provide.value('translateFilter', function(){});
        });
    });

    beforeEach(inject(function($rootScope, $compile, $controller){
        scope = $rootScope;
        scope.services= _servicesMock_;
        element = '<services-object-list selected-services="[]" services="services"></services-object-list>';

        $compile(element)(scope);
        scope.$digest();

        controller = $controller('ServicesListController', {$scope: scope});
        console.log(controller.getServices());            
    }));

    it ("First test", function(){
        expect(true).toBe(true);
    });
});

我遇到的问题是服务没有绑定(bind)在我的 Controller 中，仅在范围内。我做错了什么？如果我做控制台(controller.getServices())。它返回给我未定义的而不是我作为属性传递的服务。我的生产代码按预期工作，但未测试。

非常感谢!

Answer 1

几个小时后，我发现 Angular 1.3 中添加了一个新功能，可以使 unitTesting 中的绑定(bind)更容易。这是讨论的主题https://github.com/angular/angular.js/issues/9425

基本上，第三个参数被添加到 Controller 构造函数服务中，您可以在其中传递绑定(bind)到 Controller 的数据。

所以unitTest配置将是这样的。

describe('Service app test, listDirective' , function(){
    var element, scope, controller;

    beforeEach(function(){
        angular.mock.module('templates');
        angular.mock.module('myApp.ui.apps.servicesObject.list', function($provide) {
            $provide.value('gettextCatalog', { getString: function(){}});
            $provide.value('translateFilter', function(){});
        });
    });

    beforeEach(inject(function($rootScope, $compile, $controller){
        var data = {
            services: _servicesMock_
        };
        scope = $rootScope;
        scope.services= _servicesMock_;
        element = '<services-object-list selected-services="[]" services="services"></services-object-list>';

        $compile(element)(scope);
        scope.$digest();

        controller = $controller('ServicesListController', {$scope: scope}, data);
        console.log(controller.getServices());            
    }));

    it ("First test", function(){
        expect(true).toBe(true);
    });
});