如何使用 Qunit 将 HTML 固定装置与 Karma 测试运行器一起使用？

Question

我正在使用 qunit (http://qunitjs.com) 与 Karma 测试运行器 (http://karma-runner.github.io/0.8/index.html) 一起玩。我成功地创建并运行了简单的测试（100% JavaScript），但现在我正在尝试使用 HTML 固定装置来测试与 DOM 节点交互的代码。我可以通过以这种方式在“文件”中声明它们来加载这些固定装置：

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

它由 karma 的服务器提供服务，但我不明白如何访问它的 DOM :(

假设我的夹具是一个包含以下标记的简单 html 文件：

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

如何编写可以访问该节点（div）的测试？ 据我所知，“文档”与“静态”文件夹下的“context.html”文件有关……那么我的灯具的HTML在哪里？？

Answer 1

我没有使用 AngularJS...我通过采用 jasmine-jquery 解决了：https://github.com/velesin/jasmine-jquery（我仅将 jasmine 用于固定装置，我的测试仍然使用 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();
    }
});

Answer 2

如果您使用的是 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+（目前在金丝雀频道中），所以你必须使用金丝雀（其中包含很多变化;-)）.. .