Jak mogę używać urządzeń HTML z programem testowym Karma przy użyciu Qunit?

Question

gram z Karma testowym biegacza (http://karma-runner.github.io/0.8/index.html) używając qunit (http://qunitjs.com). Z powodzeniem stworzyłem i przeprowadziłem proste testy (100% JavaScript), ale teraz próbuję używać urządzeń HTML w celu testowania kodu, który współdziała z węzłami DOM. Jestem w stanie załadować te uchwyty deklarując je w „plikach” w ten sposób:

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

to get obsługiwanym przez serwer karmy zawarty, ale nie rozumiem, w jaki sposób mogę uzyskać dostęp do jego DOM :(

Załóżmy moja Oprawa jest prosty plik html zawierający następujące znaczniki:

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

Jak mogę napisać test, który ma dostęp do tego węzła (div) „dokument” jest związane z " context.html "plik w" statycznym "folderze, o ile wiem ... więc gdzie są HTM L mojego urządzenia?

Answer 1

Nie używam AngularJS ... Rozwiązałem, przyjmując jaśminowy jquery: https://github.com/velesin/jasmine-jquery (Ja używam jaśminu tylko do opraw, moje testy są nadal pisane przy użyciu qunit). W moim pliku konfiguracyjnego Mam następujący:

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

wtedy w moich plikach 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

Jeśli używasz AngularJS, możesz użyć preprocesora html2js. Przykładem tego jest https://github.com/vojtajina/ng-directive-testing.

Te pliki html są obsługiwane przez Karmę, ale nie są zawarte na stronie, więc trzeba je pobrać - prawdopodobnie za pośrednictwem żądania Xhr.

Oto podobna preprocesor, który konwertuje plik HTML na ciąg JS (nie mocno kątowa): https://github.com/karma-runner/karma-html2js-preprocessor Można zobaczyć, jak go używać w teście e2e: https://github.com/karma-runner/karma-html2js-preprocessor/tree/master/e2e-test

UWAGA: ten html2js preprocesor jest nie jest częścią Karmy 0.8, a wtyczki działają tylko z Karmą 0.9+ (obecnie w kanale), więc musisz użyć kanarka (który zawiera wiele zmian; -)) ...