如何对 Angular 1.5 组件模板进行单元测试？答案

【问题标题】：How to unit test an Angular 1.5 Component template?如何对 Angular 1.5 组件模板进行单元测试？
【发布时间】：2017-01-12 22:17:50
【问题描述】：

所以，这是我的测试：

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 变量，它也会使用组件（或控制器）上的那个。

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

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

【问题讨论】：

你没有贴出组件的代码，这里有必要。很难相信{{ foo }} 会导致Original Foo，因为组件模板应该使用$ctrl.foo（或任何controllerAs）。
组件模板使用$ctrl.foo（我已经在帖子中更改了）并且绑定与我测试的相同，因此无需在此处放置额外的代码

标签： javascript angularjs unit-testing jasmine karma-jasmine

【解决方案1】：

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

这可能应该像这样测试

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

scope.$digest();

var componentScope = component.isolateScope();

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

【讨论】：

感谢您的回复！但这对我不起作用。实际上，如果我执行console.log(componentScope.$ctrl.foo);，我得到的是在组件控制器上设置的原始值。基本上我想要的是能够访问和修改控制器变量，所以我可以根据控制器变量值测试某些输出。这有意义吗？
我认为这不会增加测试的价值。测试原始值就足够了。通过测试“更改值”，您不是在尝试测试自己的代码，而是在测试 Angular 编译器，Angular 团队已经测试了它。我想在$compile(...)(scope); scope.$digest() 和scope.foo = ...; scope.$digest() 之后可以做到这一点。那么componentScope.$ctrl.foo 应该等于scope.foo。但同样，这完全没有必要。
这只是一个例子，实际上我并没有发布我所有的真实代码。但无论如何，你给了我一个想法，如何使用componentScope.$ctrl.foo = 'new value'修改组件范围变量，然后修改我需要的变量，然后是scope.$digest然后我可以使用expect(component.find('button').length).toEqual(2)（或任何我需要的条件测试）
其实$compile和$componentController是两个正交的方法。 $componentController 应该进行纯粹的“单元”测试。 $compile 是更“功能性”的方法，只有 scope 应该被更改，componentScope.$ctrl 可以在需要时被断言。我建议不要混合使用这些方法。