javascript - Los accesorios no se cargarán en Karma

gruntjs jasmine

Question

He intentado muchas cosas, pero parece que no puedo cargar un accesorio cuando ejecuto Karma. He intentado usar html2js y karma-jasmine-jquery html2js hacia este último, pero estaré bien con el que tenga mi accesorio cargado en el DOM) -pero hasta donde sé, no se está cargando y adjunto al DOM cuando se ejecutan mis pruebas.

Mi estructura de directorio es bastante simple:

img/
  ↳ mac.png
  ↳ link.png
  ↳ pocketwatch.png
js/
  ↳ spriteloader.js
  ↳ spriteloader.spec.js
karma/
  ↳ imagelist.fix.html
  ↳ karma.conf.js
Gruntfile.coffee
index.html
grunt.config.coffee
package.json

Estos son los módulos de nodo que tengo instalados:

grunt 0.4.5
grunt-contrib-jshint 0.10.0
grunt-contrib-watch 0.6.1
grunt-karma 0.9.0
karma 0.12.23
karma-chrome-launcher 0.1.4
karma-firefox-launcher 0.1.3
karma-html2js-preprocessor": "^0.1.0",
karma-jasmine 0.2.0
karma-jasmine-jquery 0.1.1
karma-safari-launcher 0.1.1
karma-story-reporter 0.2.2

Y aquí está mi configuración de karma.conf.js :

basePath: ''../'',

frameworks: [''jasmine-jquery'', ''jasmine''],

files: [
  // Source and spec files
  {
    pattern: ''js/*.js'',
    watched: true,
    served: true,
    included: true
  },
  // Fixtures
  {
    pattern: ''karma/*.fix.html'',
    watched: false,
    served: true,
    included: false
  }
],

exclude: [
],

preprocessors: {
},

reporters: [''story''],

port: 9018,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: [''Chrome'', ''Firefox'', ''Safari''],

singleRun: true

En mi especificación, empiezo mi describe() con beforeEach() que ejecuta las siguientes dos líneas:

jasmine.getFixtures().fixturesPath = ''../'';
jasmine.getFixtures().load(''/karma/imagelist.fix.html'');

Luego comienzan las funciones it() . Están probando una función que agrega un detector de eventos a algunos elementos <img> utilizando document.getElementById() . Ahí es donde el accesorio debe entrar, porque sin él el getElementById() devolverá null . (¿Cuál es el problema al que estoy llegando?)

Recorrí la web durante casi todo un día buscando cosas para probar, pero parece que no puedo sacar nada de Karma aparte de TypeError: document.getElementById(...) is null . He intentado cambiar mi configuración de Karama para que, en lugar de estar vacío, los preprocessors tengan "**/*.html": [] en él para deshabilitar html2js , pero eso no hizo nada. Intenté desactivar jasmine-jquery y usar html2js , pero apenas hay documentación sobre karma-html2js-preprocessor , así que no puedo decir si lo estoy usando bien. (Por eso me inclino más hacia jasmine-jquery .) Simplemente no puedo entender esto.

ACTUALIZACIÓN (3 OCT)

Encontré esta pregunta en Stack Overflow y probé la respuesta allí, pero no funcionó; todavía tengo el mismo comportamiento que he estado viendo. Mi karma.conf.js ha cambiado desde arriba, pero en mi spriteloader.spec.js cambié las llamadas de Jasmine a esto:

jasmine.getFixtures().fixturesPath = ''http://localhost:9019/base/karma/'';
jasmine.getFixtures().load(''imagelist.fix.html'');

También probé esto y obtuve el mismo resultado nuevamente:

jasmine.getFixtures().fixturesPath = ''http://localhost:9019/base/karma/'';
jasmine.getFixtures().load(''http://localhost:9019/base/karma/imagelist.fix.html'');

Luego encontré este tema en GitHub y cambié los preprocessors en karma.conf.js a este:

preprocessors: {
    ''**/*.html'': []
},

Y cambié las llamadas de Jasmine en mi especificación a esto:

var fixtures = jasmine.getFixtures();
fixtures.fixturesPath = ''base/karma/'';
fixtures.load(''imagelist.fix.html'');

Esto también dio como resultado el mismo comportamiento: TypeError: document.getElementById(...) is null

También encontré esta publicación y probé la configuración que se describe en ella, a excepción de la incorporación de JASMINE y JASMINE_ADAPTER a la sección de files de karma.conf.js pero sigo teniendo el mismo comportamiento.

Como tengo karma-jasmine-jquery instalado localmente, señalé el script jasmine-jquery así:

''node_modules/karma-jasmine-jquery/lib/jasmine-jquery.js''

Incluso intenté abandonar las llamadas de Jasmine e ir con una llamada AJAX en su lugar:

$(''#fixture'').remove();
$.ajax({
    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
    dataType: ''html'',
    url: ''../karma/imagelist.fix.html'',
    success: function(data) {
        $(''body'').append($(data));
    }
});

Todavía tengo el mismo resultado, sin embargo. No estoy seguro de qué más puedo probar.

ACTUALIZACIÓN (4 OCT)

Encontré esta pregunta / respuesta en StackOverflow y traté de configurarla con html2js según la solución allí. karma.conf.js jasmine-jquery de la sección de frameworks de mi karma.conf.js y agregué una sección de plugins que se ve así:

plugins: [
    ''karma-chrome-launcher'',
    ''karma-firefox-launcher'',
    ''karma-html2js-preprocessor'',
    ''karma-jasmine'',
    ''karma-safari-launcher'',
    ''karma-story-reporter''
],

También cambié mi sección de preprocessors para que se vea así:

preprocessors: {
    ''**/*.html'': [''html2js'']
},

Y cambié mi beforeEach() a lo siguiente:

beforeEach(function() {
    var imagelist = __html__[''../karma/imagelist.fix.html''];
    document.body.appendChild(imagelist);
});

Todavía veo el mismo TypeError: document.getElementById(...) is null , sin embargo.

Answer 1

Si usa karma-jasmine-jquery , puede establecer lo siguiente:

1. agréguelo como marco - frameworks: [''jasmine-jquery'', ''jasmine'']

2. incluye tus accesorios como patrones debajo de la matriz de archivos - { pattern: ''test/fixtures/*.html'', included: false, served: true }

3. establece el camino usando base/ tales como jasmine.getFixtures().fixturesPath = ''base/test/fixtures''; en sus suites de prueba.

4. cargue los accesorios en sus especificaciones de prueba - loadFixtures(''index.html'');

karma-jasmine-jquery https://www.npmjs.com/package/karma-jasmine-jquery

Karma Config http://karma-runner.github.io/0.12/config/files.html

Actualización 02.16.16

Las versiones más nuevas de Chrome no permiten que el archivo: // URI lea otros archivos: // URI. En efecto, jasmine-jquery no puede cargar correctamente los accesorios en algunas versiones de Chrome. Una anulación de esto es ejecutar Chrome con un interruptor --allow-file-access-from-files . https://github.com/velesin/jasmine-jquery#cross-domain-policy-problems-under-chrome