dimanche 29 mars 2015

Unit testing angular directive with dynamic templates

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?


Aucun commentaire:

Enregistrer un commentaire