Does anyone know how to get a headless browser like Chutzpah's Visual Studio Test Adapter to allow a directive to access its .html template file? Chutzpah uses PhantomJS for a headless browser which appears to limit my options.
I'm using Chutzpah Test Adapter 2.5 and AngularJS 1.2.0-r.2.
I get the error:
Unexpected request: GET myApp/directives/template.html
Which is caused by Angular attempting to use the $http service to access my directive's template.
I've found a few different workarounds:
- Manually using XMLHttpRequest to import the templates.
- Using a utility like Grunt to inline the template into your directive's JS code.
$httpBackend.when('GET', 'myApp/directives/template.html').passThrough()- this only works in e2e tests, not unit tests.- Put the template directly into the test code.
None of these options particularly satisfy me. I'd prefer to be able to let the directive load its template transparently so I can test it as a component. Is there a way I can get this scenario working?
Example code:
angular.module('myDirective', []).directive('myDirective', function() {
return {
restrict: 'E',
transclude: true,
templateUrl: 'myApp/directives/template.html',
// Some other options, omitted for brevity.
};
});
template.html:
<div><div ng-transclude></div></div>
Example Jasmine test:
describe('myDirective', function() {
// Assign $scope using inject(), load module etc.
// Insert workaround for $httpBackend loading my templateUrl here.
it('should transclude content', function() {
var element = $compile("<my-directive>Look Mom, I'm in my directive!</my-directive>")($scope);
$scope.$digest();
expect(element.text().trim()).toBe("Look Mom, I'm in my directive!");
});
}
