unit testing - unit - Jasmine prueba las Directivas AngularJS con templateUrl

testing with jasmine

Question

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

Answer 1

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, '''');
}));

Answer 2

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!

Answer 3

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:

• https://github.com/karma-runner/karma-ng-html2js-preprocessor#configuration
• esencia: https://gist.github.com/vucalur/7238489

Answer 4

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);
        }));

    });
});

Answer 5

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ó.

Answer 6

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.

Answer 7

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();
  })
});

Answer 8

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