angularjs 指令单元测试因controllerAs、bindToController 和isolateScope() 失败

Question

我正在尝试使用双向绑定(bind)属性 (=) 对指令进行单元测试。该指令在我的应用程序中有效，但我无法进行测试双向绑定(bind)的单元测试。

我已经尝试让它工作好几天了。我读过很多例子，它们使用了我想要使用的一些但不是全部功能:controllerAs、bindToController 和isolateScope()。 (忘记 templateURL，我也需要它。如果我能让这个工作正常的话，我会添加它!:)

我希望有人能告诉我如何显示隔离范围中反射(reflect)的父范围的更改。

这是一个包含以下代码的 plunkr:

http://plnkr.co/edit/JQl9fB5kTt1CPtZymwhI

这是我的测试应用程序:

var app = angular.module('myApp', []);

angular.module('myApp').controller('greetingController', greetingController);
greetingController.$inject = ['$scope'];
function greetingController($scope) {
  // this controller intentionally left blank (for testing purposes)
}

angular.module('myApp').directive('greetingDirective',
        function () {
            return {
                scope: {testprop: '='},
                restrict: 'E',
                template: '<div>Greetings!</div>',
                controller: 'greetingController',
                controllerAs: 'greetingController',
                bindToController: true
            };
        }
);

这是规范:

describe('greetingController', function () {

var ctrl, scope, rootScope, controller, data, template,
        compile, isolatedScope, element;

beforeEach(module('myApp'));

beforeEach(inject(function ($injector) {

    rootScope = $injector.get('$rootScope');
    scope = rootScope.$new();
    controller = $injector.get('$controller');
    compile = $injector.get('$compile');

    data = {
        testprop: 1
    };

    ctrl = controller('greetingController', {$scope: scope}, data);
    element = angular.element('<greeting-directive testprop="testprop"></greeting-directive>');
    template = compile(element)(scope);
    scope.$digest();
    isolatedScope = element.isolateScope();

}));

// PASSES
it('testprop inital value should be 1', function () {
    expect(ctrl.testprop).toBe(1);
});

// FAILS: why doesn't changing this isolateScope value 
// also change the controller value for this two-way bound property?
it('testprop changed value should be 2', function () {
    isolatedScope.testprop = 2;
    expect(ctrl.testprop).toBe(2);
}); 
});

Answer 1

您必须纠正测试指令的方式。你直接改变isolatedScope对象的，然后验证 ctrl不相关的对象DOM您已经编译了。

基本上，您应该在编译具有范围的 DOM 后立即执行此操作(此处为 <greeting-directive testprop="testprop"></greeting-directive> )。因此该作用域将保存已编译 do 的上下文。总之可以玩testprop适当的值(value)。或者同样的东西将在 element.scope() 内可用。一旦您更改 scope 中的任何值/currentScope 。您可以看到指令 isolatedScope 内的值已更新。我想提的另一件事是当你这样做时 controllerAs与 bindToController: true ， Angular 在 scope 内添加带有 Controller 别名的属性这是我们验证的isolatedScope.greetingController.testprop里面assert

代码

describe('greetingController', function() {

  var ctrl, scope, rootScope, controller, data, template,
    compile, isolatedScope, currentScope, element;

  beforeEach(module('myApp'));

  beforeEach(inject(function($injector) {

    rootScope = $injector.get('$rootScope');
    scope = rootScope.$new();
    controller = $injector.get('$controller');
    compile = $injector.get('$compile');

    data = { testprop: 1 };

    ctrl = controller('greetingController', { $scope: scope }, data);
    element = angular.element('<greeting-directive testprop="testprop"></greeting-directive>');
    template = compile(element)(scope);
    scope.$digest();
    currentScope = element.scope();
    //OR
    //currentScope = scope; //both are same
    isolatedScope = element.isolateScope();
  }));

  // First test passes -- commented

  it('testprop changed value should be 2', function() {
    currentScope.testprop = 2; //change current element (outer) scope value
    currentScope.$digest(); //running digest cycle to make binding effects
    //assert
    expect(isolatedScope.greetingController.testprop).toBe(2);
  });

});

Demo Plunker