angularjs - tutorial - test jasmine angular 2

Karma ''Solicitud inesperada'' al probar la directiva angular, incluso con ng-html2js

Question

Después de pasar el último día tratando de hacer que esto funcionara, descubrí que había dado una vuelta al mismo error que estaba teniendo al principio:

Error: solicitud inesperada: GET test-directiva.html

Estoy usando Karma y Jasmine para probar directivas en Angular. He revisado preguntas similares en StackOverflow, pero he encontrado que todo lo que se ha probado en los otros ejemplos no sirve de nada.

Estructura de código

Aplicación de prueba
-src
--cenador
--lib
--js
--módulos
--- testDir
---- test.js
---- prueba-directiva.html
----prueba
----- test.spec.js
-prueba
--config
--- karma.conf.js
--e2e

Karma Config

''use strict'';
module.exports = function(config){
    config.set({
    basePath: ''../../'',
    frameworks: [''jasmine''],
    files: [
        // Angular
        ''src/bower/angular/angular.js'',
        // Mocks
        ''src/bower/angular-mocks/angular-mocks.js'',
        // Libraries
        ''src/lib/**/*.js'',
        // App
        ''src/js/*.js'',
        ''src/modules/*/*.js'',
        // Tests
        ''src/modules/**/test/*spec.js'',
        // Templates
        ''src/modules/**/*.html''
    ],
    autoWatch: false,
    singleRun: true,
    reporters: [''progress''],
    browsers: [''PhantomJS''],

    preprocessors: {
        ''src/modules/**/*.html'': ''ng-html2js''
    },
    ngHtml2JsPreprocessor: {
        moduleName: ''dir-templates''
    },
    plugins: [
        ''karma-jasmine'',
        ''karma-ng-html2js-preprocessor'',
        ''karma-phantomjs-launcher'',
        ''karma-chrome-launcher'',
        ''karma-junit-reporter''
    ]
    });
};

test.js

''use strict'';
angular.module(''modules.test'', []).
directive(''testDirective'', [function() {
    return {
        restrict: ''E'',
        templateUrl: ''test-directive.html'',
        link: function($scope, $elem, $attrs) {
            $scope.someFn = function() {
                angular.noop();
            };
        }
    };
}]);

test-direct.html

<span>Hello World</span>

test.spec.js

''use strict'';
describe(''test module'', function() {
    beforeEach(module(''modules.test''));
    /* -- DIRECTIVES------------------ */
    describe(''directives'', function() {
        var $compile, $scope, elm;
        beforeEach(module(''dir-templates'');
        beforeEach(inject(function($compile, $rootScope) {
            $scope = $rootScope.$new();
            elm = angular.element(''<test-directive></test-directive>'');
            $compile(elm)($scope);
            $scope.$digest();
        }));
        it(''should have one span tag'', function(){
            //Jasmine test here to check for one span tag.
        });
    });
});

Han acortado un par de archivos para mantenerlo justo donde está el problema. Al llamar a beforeEach(module(''dir-templates'')) , debería cargar todos los archivos .html coincidentes en $ templateCache y evitar la solicitud GET que está generando el error.

Cualquier ayuda sería apreciada ya que realmente me ha vuelto loco. Por favor comente si tiene alguna pregunta adicional.

Answer 1

Algunos consejos de depuración al recibir este error:

Cuando Karma Chrome Launcher abra el navegador, busque la plantilla que está generando el error. En mi caso, se trata de student-survey.html , verá un student-survey.html.js que es la plantilla colocada en una memoria caché de plantillas angulares. . Al inspeccionar el archivo html.js, verá un ID de caché: $templateCache.put(''/app/views/student-survey.html'',....

Debes asegurarte de que el ID de caché, en este caso app/views/student-survey.html coincidirá con lo que se hace referencia dentro de tu aplicación, en mi caso, al ID de caché le faltaba un ''/'' final que logré corregir al colocar a / en la sección prependPrefix de la sección ngHtml2JsPreprocessor en mi karma.conf.js :

ngHtml2JsPreprocessor: { prependPrefix: ''/'', moduleName: ''templates'' }

Answer 2

Para agregar a los comentarios acerca de asegurarse de que el nombre de la plantilla que coincide con el prefijo (no tenga una barra diagonal, etc.), hay otra cosa que se debe verificar en el caso.

La clave de la memoria caché de la plantilla distingue entre mayúsculas y minúsculas, así que asegúrese de que sus directivas hagan referencia a los archivos html utilizando la carcasa adecuada. Las claves de la memoria caché de la plantilla que genera ngHtml2JsPreprocessor utilizan la carcasa del nombre de archivo real y los nombres de directorio en el sistema de archivos.

Por lo tanto, si su archivo se llama Prueba-Directriz.html o su carpeta se llama "Módulos" pero su directiva hace referencia a "módulos / prueba-directiva.html", no se resolverá desde el caché.

La sensibilidad a mayúsculas y minúsculas no es un problema con el uso real (sin pruebas) del templateurl de su directiva (la solicitud GET obviamente no es sensible a las mayúsculas y la clave de la caché de la plantilla se generará en función de la solicitud GET inicial, es decir, lo que se especificó su directiva).

Answer 3

Por lo tanto, un dolor de cabeza minucioso para lo que parece ser una solución de dos líneas. Después de abrir Karma en Chrome (en lugar de PhantomJS) y mirar los archivos de origen, noté que cuando ng-html2js adjunta la directiva al $ templateCache, usa la ruta completa, no la proporcionada en la definición de la directiva.

En resumen, ''src/modules/test/test-directive.html.js'' !== ''test-directive.html.js'' .

Para lograr esto, modifique el archivo karma.conf.js ngHtml2JsProcessor para que lea como:

ngHtml2JsPreprocessor: {
    stripPrefix: ''src/'',
    moduleName: ''dir-templates''
},

Y la declaración de la directiva templateUrl para que se vea como:

templateUrl: ''modules/test/test-directive.html''