Question

我设置了几个测试来查看jquery是否正在返回我的HTML对象。我的karma.conf文件如何拉入html文件似乎有些不对劲。

我尝试使用karma.conf.js中引用的JS文件中的变量，它们在测试中都能正常工作。

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    // list of files / patterns to load in the browser, order matters
    files: [
      './js/jquery.min.js',
      './*.js',
      {pattern: './*.html'},
      {pattern: './pages/*.html'},
      {pattern: './js/*.js'},      
      {pattern: './js/pages/*.js'},
      {pattern: './test/pages/*Spec.js'},
      {pattern: './test/*Spec.js'},
    ],
    // preprocess matching files before serving them to the browser
    preprocessors: {
        './js/pages/*.js': 'coverage',
        './js/main.js': 'coverage',
    },
     // test results reporter to use
    reporters: [
        'progress', 
        'coverage'
    ],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    // start these browsers
    browsers: ['Chrome_without_sandbox'],
    customLaunchers: {
      Chrome_without_sandbox: {
        base: 'Chrome',
        flags: [
      '--no-sandbox',
      '--headless',
      '--disable-gpu',
      '--remote-debugging-port=9222'
        ] // without thisit fails under Docker
      }
    },
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,
    // how many browser should be started simultaneous
    concurrency: Infinity,
    plugins: [
        'karma-coverage',
        'karma-chrome-launcher',
        'karma-jasmine',
    ],
    coverageReporter: {
         type : 'html',
        dir : 'coverage/'
    },
    // proxy for AJAX requests
    proxies: {
      '': 'http://localhost'
    },
   });
};

main.html的片段

<label class="inline">PORT 4:</label>
<input id="portFour" type="checkbox" data-toggle="toggle" data-size="small" data-width="86" data-on="Enabled" data-off="Disabled" data-onstyle="success" data-offstyle="danger">

mainSpec.js

describe("see if it's checked", function () {
  it('should be checked', function() {
    expect($("#portFour").prop("checked")).toBe(true);
  });
});

describe("see if it exists", function () {
  it('should be true', function() {
    expect($("#portFour").length > 0).toBe(true);
  });
});

describe('see if it's defined', function() {
  it('should be defined', function() {
    expect($("#portFour")).toBeDefined();
  });
});

前两个断言失败（结果分别是未定义和错误），但最后一个断言通过。如何让它正确引用html元素？

Answer 1

修改/更新

好的，所以在与你评论并再多思考之后，我正在扩大我的答案。

我认为问题部分是由于测试类型之间的混淆。 Karma是一个主要用于单元测试的测试运行器。但是，您想要运行的测试类型（检查页面上可见的元素，或者是否选中了复选框）听起来更像是＆＃34; Acceptance＆＃34;或者＆＃34;端到端＆＃34;测试，从用户的角度测试网页或应用程序。

单位VS验收测试

我建议你放弃Karma，并使用其他一些为这些测试而构建的工具。具体来说，您需要这些工具进行验收测试（对于某些测试会有替代方案）：

断言图书馆（Jasmine）在这里，您可以获得诸如＆＃34; describe（）＆＃34;，＆＃34; it（）＆＃34;等内容的所有语法。它是编写测试用例的语法和你可以测试的东西，比如toBeEqual（），toBe（），toBeDefined（）等。

NPM，NodeJS（我只是选择Node因为它很容易，你可以轻松地设置节点开发测试而不会有太多麻烦）

Selenium / Browser Pretender（用于Node / JS应用程序的WebDriver，或ProtractorJS）这是用于与测试中的页面进行交互的一组方法。您可以在此处查看文档，了解查找元素的方法，等待页面加载，检查元素是否可见等。WebDriverIO

为了帮助说明这一点，我构建了一个小型JSFiddle，它使用Jasmine并对HTML代码运行验收测试，并在jQuery与其他文件（2个）一起加载到页面后打印结果测试然后通过）。

JSFiddle Example

<强> HTML

<label class="inline">PORT 4:</label> <input id="portFour" type="checkbox" data-toggle="toggle" data-size="small" data-width="86" data-on="Enabled" data-off="Disabled" data-onstyle="success" data-offstyle="danger">

<强> JS

describe('a suite', function() { it('is a spec', function() { expect(true).toEqual(true); }); }); describe("The Checkbox", function () { it('should be checked', function() { expect($("#portFour").prop("checked")).toBe(true); }); it('should be visible', function() { expect($("#portFour").length > 0).toBe(true); }); it('can be defined by jQuery', function() { expect( $("#portFour") ).toBeDefined(); }); });

如何使用Jasmine Karma正确加载HTML元素？

1 个答案: