Como posso testar uma diretiva usando templateUrl no navegador sem cabeça do Chutzpah
Alguém sabe como obter um navegador sem cabeçalho como o Visual Studio Test Adapter do Chutzpah para permitir que uma diretiva acesse seu arquivo de modelo .html? O Chutzpah usa o PhantomJS para um navegador sem cabeçalho que parece limitar minhas opções.
Estou usando Chutzpah Test Adapter 2.5 e AngularJS 1.2.0-r.2.
Eu recebo o erro:
Pedido inesperado: GET myApp / directives / template.html
O que é causado pelo Angular tentando usar o serviço $ http para acessar o modelo da minha diretiva.
Eu encontrei algumas soluções diferentes:
Manualmente usando XMLHttpRequest para importar os modelos.Usando um utilitário como o Grunt para inserir o modelo no código JS da sua diretiva.$httpBackend.when('GET', 'myApp/directives/template.html').passThrough()
- isso só funciona em testes e2e, não em testes unitários.Coloque o modelo diretamente no código de teste.Nenhuma dessas opções me satisfaz particularmente. Eu prefiro poder deixar a diretiva carregar seu template de forma transparente para que eu possa testá-lo como um componente. Existe uma maneira de fazer esse cenário funcionar?
Exemplo de código:
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>
Exemplo de teste de jasmim:
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!");
});
}