Come posso utilizzare dispositivi HTML con il test runner di Karma usando Qunit?

Question

Sto giocando con Karma corridore di prova (http://karma-runner.github.io/0.8/index.html) utilizzando qunit (http://qunitjs.com). Ho creato con successo e eseguito semplici test (100% JavaScript), ma ora sto provando a utilizzare i dispositivi HTML per testare il codice che interagisce con i nodi DOM. Sono in grado di caricare questi apparecchi dichiarandoli in "file" in questo modo:

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

di venire servito dal server di karma, ma non capisco come posso accedere alla sua DOM :(

Supponiamo mio apparecchio è un semplice file HTML contenente il codice seguente:?

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

Come posso scrivere un test che può accedere a quel nodo (il div) il "documento" è legato alla " context.html "file nella cartella" statica "per quanto ne so ... quindi dove sono gli HTM L del mio apparecchio ??

Answer 1

Non sto usando AngularJS ... Ho risolto adottando jasmine-jquery: https://github.com/velesin/jasmine-jquery (uso il gelsomino solo per i proiettori, i miei test sono ancora scritti usando qunit). Nel mio file di configurazione ho il seguente:

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

poi nei miei file di test:

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

Se si utilizza AngularJS, è possibile utilizzare il preprocessore html2js. Un esempio su come farlo è https://github.com/vojtajina/ng-directive-testing.

Questi file html sono forniti da Karma, ma non sono inclusi nella pagina, quindi è necessario recuperarli, probabilmente tramite la richiesta xhr.

Ecco un preprocessore simile, che converte file html in una stringa JS (non stretto a angolare): https://github.com/karma-runner/karma-html2js-preprocessor Si può vedere come usarlo nel test e2e: https://github.com/karma-runner/karma-html2js-preprocessor/tree/master/e2e-test

NOTA: questo html2js preprocessore è non fa parte di Karma 0.8 e i plugin funzionano solo con Karma 0.9+ (attualmente nel canale canarino), quindi devi usare canarino (che contiene molte modifiche; -)) ...