Unit testing angular directive with dynamic templates

Question

I have a directive that selects a template based on a parameter passed in in the attributes. It works great, but in my unit tests I can't access the DOM.

The directive template line looks like this:

template: '<ng-include src="getTemplateUrl()"/>'

The directive controller has this:

$scope.getTemplateUrl = function () {
                    var template;
                    switch( $scope.layout ) {
                        case "addLocation":
                            template = 'app/search/primarySearchControlsAddLocation.html';
                            break;
                        default:
                            template = 'app/search/primarySearchControlsSidebar.html';
                    }
                    return template;
                };

The unit test looks like this:

it( 'Should disable the client control when the disableClientSelect field param is true. ', function () {
            element = $compile( angular.element( '<primary-search-controls b-disable-client-select="true" layout="searchSidebar"></primary-search-controls>') )( $rootScope );
            $rootScope.$apply();
            expect( element[ 0 ].find( 'input.client-typeahead' ) ).to.have.class( 'disabled' );
        });

When I dump out the value of element during this test, I get this:

LOG: {0: <!-- ngInclude: undefined -->, length: 1}

It looks to me as though the unit test isn't properly resolving / compiling the selected template, but it all works fine on the actual application.

Can anyone point me to why this is happening and how I can fix this please?

Toby Tremayne · Accepted Answer · 2015-03-30 00:56:24Z

1

As is often the case, shortly after posting I found a solution. This issue https://github.com/angular/angular.js/issues/4505 suggested that a similar issue was fixed by surrounding the ng-include directive with an empty div. So I changed my template property to look like this:

template: '<div><ng-include src="getTemplateUrl()"/></div>'

And now it compiles properly. It's a workaround, but it will do for now.

answered Mar 30, 2015 at 0:56

Toby Tremayne

1352 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unit testing angular directive with dynamic templates

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related