Как выполнить модульный шаблон с угловым 1.5 компонентом?

Question

Итак, вот мой тест:

describe('My Test', function(){ 

    var $componentController, $compile, controller, scope; 

    beforeEach(inject(function($injector, $rootScope, $templateCache){ 

    $templateCache.put('my-component.html', '<h1>{{ $ctrl.foo }}</h1>'); 

    $componentController = $injector.get('$componentController'); 

    var bindings = { 
     foo: 'A Foo' 
     }; 

    scope = $rootScope.$new(); 

    controller = $componentController('myComponent', { $scope: {} }, bindings); 

    })); 

    it('should render the correct html', function(){ 

    scope.foo = 'Changed Foo'; 

    var element = angular.element(
     '<my-component foo="Original Foo"></my-component>' 
    ); 

    var template = $compile(element)(scope); 

    scope.$digest(); 

    var templateAsHtml = template.html(); 

    console.log(templateAsHtml); 

    }; 

} 

И что я получаю "Original Foo", не "Измененный Foo". Поэтому, даже если я изменяю переменную scope.foo в своем тесте, она использует ту, что находится на компоненте (или на контроллере).

Итак, любая идея о том, как изменить переменные компонента в тесте, поэтому при компиляции шаблона он ловит эти изменения.

В основном я хочу иметь доступ и изменять переменные контроллера, поэтому я могу проверить определенный выход в зависимости от значений переменных контроллера. Имеет ли это смысл?

Answer 1

scope.foo не влияет на привязки компонентов. foo scope свойство не foo атрибут.

Это, вероятно, должно быть проверено, как

var component = $compile('<my-component foo="{{ foo }}">')(scope); 

scope.$digest(); 

var componentScope = component.isolateScope(); 

expect(component.html())... 
expect(componentScope.$ctrl.foo)...