2

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

我一直试图让这个工作好几天。我已经阅读了许多示例，这些示例使用了我想使用的一些但不是全部功能：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);
}); 
});
4

1 回答 1

3

您必须更正测试指令的方式。您正在直接更改isolatedScope对象，然后验证您编译的ctrl不相关的对象。DOM

基本上你应该做的是，一旦你编译了一个带作用域的 DOM（这里是<greeting-directive testprop="testprop"></greeting-directive>）。因此，该范围将保存已编译 do 的上下文。总之你可以发挥testprop财产价值。或者里面会有同样的东西element.scope()。只要您更改scope/中的任何值currentScope。您可以看到值在指令中得到更新isolatedScope。我还想提一提的是，当您controllerAs使用bindToController: true, angular 添加带有控制器别名的属性时，我们在其中scope进行了验证isolatedScope.greetingController.testpropassert

代码

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);
  });

});

演示 Plunker

于 2017-05-03T20:42:01.713 回答