web-dev-qa-db-ja.com

Qunitを使用してKarmaテストランナーでHTMLフィクスチャを使用するにはどうすればよいですか？

Karmaテストランナー（ http://karma-runner.github.io/0.8/index.html で遊んでいます=）qunit（ http://qunitjs.com ）を使用します。簡単なテスト（JavaScript 100％）を作成して実行しましたが、DOMノードとやり取りするコードをテストするために、HTMLフィクスチャを使用しようとしています。これらのフィクスチャを「ファイル」で次のように宣言することで、これらのフィクスチャをロードできます。

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

それはカルマのサーバーによって提供されますが、そのDOMにアクセスする方法がわかりません:(

私のフィクスチャが次のマークアップを含むシンプルなhtmlファイルであるとしましょう：

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

そのノード（div）にアクセスできるテストを作成するにはどうすればよいですか？ 「ドキュメント」は、私が知る限り「静的」フォルダの下の「context.html」ファイルに関連しています...したがって、フィクスチャのHTMLはどこにありますか？

javascriptunit-testingtddqunitkarma-runner
25
daveoncode

私はAngularJSを使用していません... jasmine-jqueryを採用することで解決しました： https://github.com/velesin/jasmine-jquery （私はフィクスチャにのみジャスミンを使用していますが、テストはまだですqunitを使用して記述）。私の構成ファイルには、次のものが含まれています。

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

それから私のテストファイルで：

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

AngularJSを使用している場合は、html2jsプリプロセッサを使用できます。これを行う方法の例は https://github.comにあります）/vojtajina/ng-directive-testing 。

これらのhtmlファイルはKarmaによって提供されますが、ページに含まれていないため、おそらくxhrリクエストを使用して、それらをフェッチする必要があります。

以下は、htmlファイルをJS文字列に変換する同様のプリプロセッサです（Angularにタイトではありません）。 https://github.com/karma-runner/karma-html2js-preprocessor 次の方法を確認できますe2eテストで使用： https://github.com/karma-runner/karma-html2js-preprocessor/tree/master/e2e-test

注：このhtml2jsプリプロセッサはKarma 0.8の一部ではなく、プラグインはKarma 0.9+（現在はカナリアチャネル）でのみ機能するため、カナリア（多くの変更を含む;-)を使用する必要があります。 ..

8
Vojta