Wie kann ich HTML-Fixtures mit Karma-Test-Runner mit Qunit verwenden?

Question

Ich spiele mit Karma Test Runner (http://karma-runner.github.io/0.8/index.html) mit qunit (http://qunitjs.com). Ich habe erfolgreich einfache Tests (100% JavaScript) erstellt und ausgeführt, aber jetzt versuche ich HTML-Fixtures zu verwenden, um Code zu testen, der mit DOM-Knoten interagiert. Ich bin in der Lage, diese Vorrichtungen zu laden, indem Sie sie in „Dateien“ auf diese Weise erklärt:

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

es von Karma Server bedient wird, aber ich verstehe nicht, wie kann ich auf seinen DOM zugreifen :(

Nehmen wir an, meine Leuchte ist eine einfache hTML-Datei das folgende Markup enthält:

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

Wie kann ich einen Test schreiben, der (die div) an diesen Knoten zugreifen können das „Dokument“ wird die zugehörige " context.html "Datei unter" statisch "Ordner soweit ich weiß ... wo sind die HTM L meiner Befestigung ??

Answer 1

Ich benutze AngularJS nicht ... löste ich, indem ich jasmine-jquery annahm: https://github.com/velesin/jasmine-jquery (ich benutze Jasmin nur für die Befestigungen, meine Tests werden noch mit qunit geschrieben). In meiner Konfigurationsdatei habe ich folgende:

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

dann in meinen Test-Dateien:

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

Wenn Sie AngularJS verwenden, können Sie den Präprozessor html2js verwenden. Ein Beispiel, wie man das macht, ist https://github.com/vojtajina/ng-directive-testing.

Diese HTML-Dateien werden von Karma geliefert, aber sie sind nicht in der Seite enthalten, also müssten Sie sie holen - wahrscheinlich durch xhr-Anfrage.

Hier ein ähnlicher Präprozessor ist, die HTML-Datei in einen JS-String (nicht dicht zu Angular) konvertiert: https://github.com/karma-runner/karma-html2js-preprocessor Sie können sehen, wie es in dem e2e Test verwenden: https://github.com/karma-runner/karma-html2js-preprocessor/tree/master/e2e-test

HINWEIS: Diese html2js Präprozessor ist nicht Teil von Karma 0.8 und Plugins funktionieren nur mit Karma 0.9+ (derzeit im Kanarienvogel-Kanal), also musst du Kanarienvogel verwenden (enthält viele Änderungen ;-)) ...