javascript - tutorial - ¿Cómo puedo usar dispositivos HTML con el corredor de prueba Karma usando Qunit?

unit test with jasmine

Question

Estoy jugando con el corredor de prueba de karma ( http://karma-runner.github.io/0.8/index.html ) utilizando qunit ( http://qunitjs.com ). Creé y ejecuté con éxito pruebas simples (100% JavaScript), pero ahora estoy tratando de usar dispositivos HTML para probar el código que interactúa con los nodos DOM. Puedo cargar estos dispositivos declarándolos en "archivos" de esta manera:

{pattern: ''fixtures/myfixture.html'', watched: true, served: true, included: false}

El servidor de karma lo sirve, pero no entiendo cómo puedo acceder a su DOM :(

Supongamos que mi accesorio es un archivo html simple que contiene el siguiente marcado:

<div id="container">hello world</div>

¿Cómo puedo escribir una prueba que pueda acceder a ese nodo (el div)? El "documento" está relacionado con el archivo "context.html" en la carpeta "estática" que yo sepa ... ¿dónde está el HTML de mi dispositivo?

Answer 1

No estoy usando AngularJS ... Resolví adoptando jasmine-jquery: https://github.com/velesin/jasmine-jquery (uso jasmine solo para los aparatos, mis pruebas aún se escriben usando qunit). En mi archivo de configuración tengo lo siguiente:

    frameworks = [''qunit'', ''jasmine''];

    files = [

      JASMINE, 
      JASMINE_ADAPTER,
      QUNIT, 
      QUNIT_ADAPTER,

      // dependencies
      {pattern: ''src/main/webapp/js/libs/jquery/jquery-1.8.3.js'', watched: false, served: true, included: true},
      {pattern: ''src/test/js/lib/jasmine-jquery.js'', watched: false, served: true, included: true},

      // fixtures
      {pattern: ''src/test/js/**/*.html'', watched: true, served: true, included: false},
      {pattern: ''src/test/js/**/*.json'', watched: true, served: true, included: false},
      {pattern: ''src/test/js/**/*.xml'', watched: true, served: true, included: false},

      // files to test 
      {pattern: ''src/test/js/**/*.js'', watched: true, served: true, included: true}
    ];

Luego en mis archivos de prueba:

module("TestSuiteName", {
    setup: function() {
        var f = jasmine.getFixtures();
        f.fixturesPath = ''base'';
        f.load(''src/test/js/TestFixture.html'');
    },
    teardown: function() {
        var f = jasmine.getFixtures();
        f.cleanUp();
        f.clearCache();
    }
});

Answer 2

Si está utilizando AngularJS, puede usar el preprocesador html2js. Un ejemplo de cómo hacerlo es en https://github.com/vojtajina/ng-directive-testing .

Karma sirve estos archivos html, pero no están incluidos en la página, por lo que tendría que buscarlos, probablemente a través de una solicitud xhr.

Aquí hay un preprocesador similar, que convierte el archivo html en una cadena JS (no ajustada a Angular): https://github.com/karma-runner/karma-html2js-preprocessor Puedes ver cómo usarlo en la prueba e2e: https://github.com/karma-runner/karma-html2js-preprocessor/tree/master/e2e-test

NOTA: este preprocesador html2js no es parte de Karma 0.8 y los complementos solo funcionan con Karma 0.9+ (actualmente en canal canario), por lo que tiene que usar canary (que contiene muchos cambios; -)) ...