unit testing - unit - Jasmine prueba las Directivas AngularJS con templateUrl
testing with jasmine (8)
Si está usando ngMockE2E o ngMock:
todas las solicitudes HTTP se procesan localmente usando las reglas que especifique y ninguna se pasa al servidor. Como las plantillas se solicitan a través de HTTP, también se procesan localmente. Como no especificó nada que hacer cuando su aplicación intenta conectarse a views/currency-select.html , le dice que no sabe cómo manejarlo. Puede indicar fácilmente a ngMockE2E que transfiera su solicitud de plantilla:
$httpBackend.whenGET(''views/currency-select.html'').passThrough();
Recuerde que también puede usar expresiones regulares en sus rutas de enrutamiento para pasar todas las plantillas si lo desea.
Los documentos discuten esto con más detalle: http://docs.angularjs.org/api/ngMockE2E.$httpBackend
De lo contrario, usa esto:
Necesitará usar $injector para acceder al nuevo back-end. De los documentos vinculados:
var $httpBackend;
beforeEach(inject(function($injector) {
$httpBackend = $injector.get(''$httpBackend'');
$httpBackend.whenGET(''views/currency-select.html'').respond(200, '''');
}));
Estoy escribiendo pruebas de directivas para AngularJS con Jasmine, y usando templateUrl con ellas: https://gist.github.com/tanepiper/62bd10125e8408def5cc
Sin embargo, cuando ejecuto la prueba obtengo el error incluido en la esencia:
Error: Unexpected request: GET views/currency-select.html
Por lo que he leído en los documentos, pensé que estaba haciendo esto correctamente, pero no parece así. ¿Qué es lo que me falta aquí?
Gracias
Quizás puedas obtener $templatecache del inyector y luego hacer algo como
$templateCache.put("views/currency-select.html","<div.....>");
donde en lugar de <div.....> poniendo tu plantilla.
¡Después de eso configura su directiva y debería funcionar bien!
Según lo solicitado, convirtiendo un comentario en una respuesta.
Para las personas que quieren utilizar la respuesta de @Lior en aplicaciones Yeoman :
A veces, la forma en que se hace referencia a las plantillas en la configuración de karma y, en consecuencia, los nombres de los módulos producidos por ng-html2js no coinciden con los valores especificados como templateUrl en las definiciones de directivas.
Necesitará ajustar los nombres de los módulos generados para que coincidan con los de la templateUrl .
Estos pueden ser útiles:
Si está utilizando el jasmine-maven-plugin junto con RequireJS, puede usar el complemento de texto para cargar el contenido de la plantilla en una variable y luego ponerlo en la memoria caché de la plantilla.
define([''angular'', ''text!path/to/template.html'', ''angular-route'', ''angular-mocks''], function(ng, directiveTemplate) {
"use strict";
describe(''Directive TestSuite'', function () {
beforeEach(inject(function( $templateCache) {
$templateCache.put("path/to/template.html", directiveTemplate);
}));
});
});
Si esto aún no funciona, use el violín para ver el contenido del archivo js generado dinámicamente por el procesador htmltojs y verifique la ruta del archivo de la plantilla.
Debería ser algo como esto
angular.module(''app/templates/yourtemplate.html'', []).run(function($templateCache) {
$templateCache.put(''app/templates/yourtemplate.html'',
En mi caso, no era lo mismo que tenía en mi directiva actual lo que estaba causando el problema.
Tener la plantilla URL exactamente igual en todos los lugares me ayudó.
Si se trata de una prueba unitaria, no tendrá acceso a $httpBackend.passthrough() . Eso solo está disponible en ngMock2E2, para pruebas de extremo a extremo. Estoy de acuerdo con las respuestas que implican ng-html2js (solía llamarse html2js), pero me gustaría ampliarlas para ofrecer una solución completa aquí.
Para generar su directiva, Angular usa $http.get() para recuperar su plantilla de templateUrl . Debido a que esta es una prueba unitaria y angular-mocks está cargado, angular-mocks intercepta la llamada a $http.get() y le da la Unexpected request: GET error. Puede intentar encontrar formas de pasar esto, pero es mucho más simple usar angular $templateCache para precargar sus plantillas. De esta forma, $http.get() ni siquiera será un problema.
Eso es lo que el preprocesador ng-html2js hace por usted. Para ponerlo a funcionar, primero instálalo:
$ npm install karma-ng-html2js-preprocessor --save-dev
Luego configúralo agregando / actualizando los siguientes campos en tu karma.conf.js
{
files: [
//
// all your other files
//
//your htmp templates, assuming they''re all under the templates dir
''templates/**/*.html''
],
preprocessors: {
//
// your other preprocessors
//
//
// tell karma to use the ng-html2js preprocessor
"templates/**/*.html": "ng-html2js"
},
ngHtml2JsPreprocessor: {
//
// Make up a module name to contain your templates.
// We will use this name in the jasmine test code.
// For advanced configs, see https://github.com/karma-runner/karma-ng-html2js-preprocessor
moduleName: ''test-templates'',
}
}
Finalmente, en su código de prueba, use el módulo de test-templates que acaba de crear. Simplemente agregue test-templates a la llamada al módulo que normalmente realiza en beforeEach , como esta:
beforeEach(module(''myapp'', ''test-templates''));
Debería ser fácil navegar de aquí en adelante. Para un análisis más profundo de este y otros escenarios de prueba directiva, consulte esta publicación.
este es un ejemplo de cómo probar la directiva que usa partial como templateUrl
describe(''with directive'', function(){
var scope,
compile,
element;
beforeEach(module(''myApp''));//myApp module
beforeEach(inject(function($rootScope, $compile, $templateCache){
scope = $rootScope.$new();
compile = $compile;
$templateCache.put(''view/url.html'',
''<ul><li>{{ foo }}</li>'' +
''<li>{{ bar }}</li>'' +
''<li>{{ baz }}</li>'' +
''</ul>'');
scope.template = {
url: ''view/url.html''
};
scope.foo = ''foo'';
scope.bar = ''bar'';
scope.baz = ''baz'';
scope.$digest();
element = compile(angular.element(
''<section>'' +
''<div ng-include="template.url" with="{foo : foo, bar : bar, baz : baz}"></div>'' +
''<div ng-include="template.url" with=""></div>'' +
''</section>''
))(scope);
scope.$digest();
}));
it(''should copy scope parameters to ngInclude partial'', function(){
var isolateScope = element.find(''div'').eq(0).scope();
expect(isolateScope.foo).toBeDefined();
expect(isolateScope.bar).toBeDefined();
expect(isolateScope.baz).toBeDefined();
})
});
la forma de Karma es cargar la plantilla html dinámicamente en $ templateCache. podrías usar el preprocesador karma html2js, como se explica here
esto se reduce a agregar plantillas '' .html'' a sus archivos en el archivo conf.js y preprocesadores = {'' .html'': ''html2js''};
y use
beforeEach(module(''..''));
beforeEach(module(''...html'', ''...html''));
en su archivo de prueba js