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