angularjs directive unit testが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という無関係のctrlオブジェクトを確認しています。

基本的には、スコープ（ここでは<greeting-directive testprop="testprop"></greeting-directive>）を使用してDOMをコンパイルするとすぐに実行する必要があります。そのスコープはコンパイルされたdoの文脈を保持するでしょう。つまり、testpropのプロパティ値を再生することができます。同じものはelement.scope()の中で利用できます。値を変更するとすぐにscope/currentScopeになります。その値が指示文isolatedScopeの中で更新されているのが分かります。あなたはbindToController: trueとcontrollerAsを行うときに、私が言及したいもう一つは、角度は、我々は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