Как выполнить модульное тестирование привязки с другим именем в компоненте Angular 1.5?

У меня есть следующий компонент:

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
person Daniel Smith    schedule 05.04.2016    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете протестировать такие вещи, скомпилировав компонент. например

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');
});
person rob    schedule 05.04.2016
comment
это пришло мне в голову, но я хочу что-то большее в соответствии с тем, что предлагает руководство разработчика Angular: $componentController - это просто, и вы избегаете DOM и, следовательно, дополнительных шагов компиляции и обработки. - person Daniel Smith; 05.04.2016
comment
Чем больше я размышлял об этом и смотрел на источник Angular, как указал @rob, работа с DOM - единственный способ. Поскольку компоненты являются синтаксическим сахаром для директив, у меня должно быть одинаковое мышление/ожидания при тестировании любого из них. При тестировании контроллера (явной) директивы через $controller я могу указать имя целевой привязки; то же самое должно быть верно и при тестировании контроллера компонента через $componentController. При тестировании исходного атрибута для директивы я использую DOM и проверяю isolateScope(); то же самое должно быть верно и для исходных атрибутов компонента. - person Daniel Smith; 06.04.2016
comment
У меня была аналогичная проблема, когда я передал переменную, определенную в привязке, например: <my-component binding-var="string value"></my-component>, это не сработало, но когда я назначил то же самое в переменной области видимости и передал, например: <my-component binding-var="scope.myVariable"></my-component>, это сработало, не знаю, почему? - person Pawan; 26.09.2016
comment
@Pawan, если binding-var использует двустороннюю привязку, вам придется передать буквальную строку, например <my-component binding-var="'string value'"></my-component> - person rob; 26.09.2016
comment
@rob Я попробовал еще раз, но передача строкового значения напрямую не устанавливает переменную привязки в компоненте. Он устанавливается только тогда, когда я передаю его через переменную в области видимости. - person Pawan; 27.09.2016