How do you unit test a binding with a different name in an Angular 1.5 component?

Question

I have the following component:

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

For the following to pass:

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

I have to use the following code:

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

However, I want to test that the value being bound to 'text' is being sourced from 'query'. This does not work:

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

Answer 1

You can test this sort of thing by compiling the component. e.g.

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');
});