如何对Angular 1.5 Component模板进行单元测试？

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变量，它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)...