angularjs指令单元测试失败与controllerAs，bindToController＆isolateScope（）

Question

我想单元测试一个双向绑定属性（=）的指令。该指令在我的应用程序中起作用，但我无法获得测试双向绑定的单元测试工作。

我一直在试图让这工作几天。我已经阅读了许多使用一些但不是全部我想使用的功能的示例：controllerAs，bindToController，以及isolateScope（）。 （忘记templateURL，我也需要添加，如果我能得到这个工作！:)

我希望有人可以告诉我如何显示隔离范围内反映的父范围的变化。

这里是一个包含下面的代码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，然后验证对象，它与您编译的不相关DOM。

基本上你应该做的是尽快编译一个DOM的范围（这里是<greeting-directive testprop="testprop"></greeting-directive>）。所以这个范围将保持编译的上下文。总之你可以玩testprop物业价值。或者在element.scope()内有相同的东西。只要您更改scope/currentScope中的任何值。您可以看到指令isolatedScope内的值得到更新。一个我想提件事是，当你做controllerAs与bindToController: true，棱角分明的增加与控制器别名属性里面scope这是我们验证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