web-dev-qa-db-fra.com

Comment puis-je utiliser des appareils HTML avec le lanceur de test Karma en utilisant Qunit?

Je joue avec Karma lanceur de test ( http://karma-runner.github.io/0.8/index.html =) en utilisant qunit ( http://qunitjs.com ). J'ai réussi à créer et à exécuter des tests simples (100% JavaScript), mais maintenant j'essaie d'utiliser des appareils HTML afin de tester le code qui interagit avec les nœuds DOM. Je peux charger ces appareils en les déclarant dans des "fichiers" de cette façon:

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

il est servi par le serveur de karma, mais je ne comprends pas comment puis-je accéder à son DOM :(

Supposons que mon appareil soit un simple fichier html contenant le balisage suivant:

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

Comment puis-je écrire un test qui peut accéder à ce nœud (le div)? Le "document" est lié au fichier "context.html" dans le dossier "statique" pour autant que je sache ... alors où sont les HTML de mon appareil ??

javascriptunit-testingtddqunitkarma-runner
25
daveoncode

Je n'utilise pas AngularJS ... J'ai résolu en adoptant jasmine-jquery: https://github.com/velesin/jasmine-jquery (J'utilise du jasmin uniquement pour les appareils, mes tests sont toujours écrit en utilisant qunit). Dans mon fichier de configuration, j'ai les éléments suivants:

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

puis dans mes fichiers de 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();
    }
});
23
daveoncode

Si vous utilisez AngularJS, vous pouvez utiliser le préprocesseur html2js. Un exemple de procédure à suivre se trouve sur https://github.com/vojtajina/ng-directive-testing .

Ces fichiers html sont servis par Karma, mais ils ne sont pas inclus dans la page, vous devrez donc les récupérer - probablement via une requête xhr.

Voici un préprocesseur similaire, qui convertit le fichier html en une chaîne JS (pas serrée en angulaire): https://github.com/karma-runner/karma-html2js-preprocessor Vous pouvez voir comment utilisez-le dans le test e2e: https://github.com/karma-runner/karma-html2js-preprocessor/tree/master/e2e-test

REMARQUE: ce préprocesseur html2js ne fait pas partie de Karma 0.8 et les plugins ne fonctionnent qu'avec Karma 0.9+ (actuellement dans le canal canary), vous devez donc utiliser canary (qui contient beaucoup de changements; -)) ...

8
Vojta