javascript - 如何对 Angular 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”，而不是“Changed Foo”。因此，即使我在测试中更改了 scope.foo 变量，它也会使用组件(或 Controller )上的变量。

关于如何在测试中更改组件变量的任何想法，所以当我编译模板时它会捕获这些更改。

基本上我想要的是能够访问和修改 Controller 变量，这样我就可以根据 Controller 变量值测试某些输出。这有意义吗？

Answer 1

scope.foo 不影响组件绑定(bind)。 foo 范围属性不是 foo 属性。

这可能应该像这样测试

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

scope.$digest();

var componentScope = component.isolateScope();

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