如何在 Angular 1.5 组件中对具有不同名称的绑定进行单元测试？答案

【问题标题】：How do you unit test a binding with a different name in an Angular 1.5 component?如何在 Angular 1.5 组件中对具有不同名称的绑定进行单元测试？
【发布时间】：2016-07-25 16:36:29
【问题描述】：

我有以下组件：

angular.module('foo')
    .component('searchInput', {
        bindings: {
            text: "<query"
        },
        templateUrl: 'components/searchInput/searchInput.html',
        controller: 'SearchInputCtrl'
    });

为了通过以下内容：

expect(component.text).toBe('bar');

我必须使用以下代码：

    var component = $componentController('searchInput',
        {$scope: {}},
        {
            text: 'bar'
        }
    );

但是，我想测试绑定到“文本”的值是否来自“查询”。这不起作用：

    var component = $componentController('searchInput',
        {$scope: {}},
        {
            query: 'bar'
        }
    );

【问题讨论】：

标签： angularjs angularjs-components angularjs-1.5

【解决方案1】：

你可以通过编译组件来测试这种东西。例如

inject(function($compile, $rootScope) {
    var parentScope = $rootScope.$new();
    parentScope.myVar = 'test';

    var element = angular.element('<search-input query="myVar"></search-input>');

    var compiledElement = $compile(element)(parentScope);
    parentScope.$digest();

    var scope = compiledElement.isolateScope();

    expect(scope.$ctrl.text).toBe('test');
});

【讨论】：

这让我想起了，但我想要一些更符合 Angular 开发人员指南建议的东西：$componentController——它很简单，你可以避免 DOM，从而避免编译和消化的额外步骤。
正如@rob 指出的那样，我对这个问题的思考越多并查看了 Angular 源代码，使用 DOM 是唯一的方法。由于组件是指令的语法糖，因此在测试它们中的任何一个时，我应该有相同的心态/期望。通过 $controller 测试（显式）指令的控制器时，我可以指定目标绑定的名称；通过 $componentController 测试组件的控制器也应该如此。在测试指令的源属性时，我使用 DOM 并检查 isolateScope();组件源属性也应该如此。
我遇到了类似的问题，当我传递绑定中定义的变量时：<my-component binding-var="string value"></my-component> 它不起作用，但是当我在范围变量中分配相同的东西并传递时：@987654323 @它工作不知道为什么？
@Pawan 如果binding-var 使用双向绑定，那么您必须像<my-component binding-var="'string value'"></my-component> 一样传递一个文字字符串
@rob 我又试了一次，但是直接传递字符串值并没有在组件中设置绑定变量。只有当我通过作用域上的变量传递它时才会设置它。