QUnit:任何不在网站DOM树中输出结果的官方解决方案

QUnit: Any official solution to not output results within websites DOM tree?

本文关键字：结果 输出 官方 解决方案 任何不 网站 DOM QUnit      更新时间：2023-09-26

我快速了解了QUnit，这是一个用于JavaScript单元测试的框架。我的意图是用QUnit调试复杂的网站行为。

然而，默认情况下，QUnit的所有输出似乎都是在DOM树中生成的。因此，任何在DOM树上运行的测试中的JavaScript在运行单元测试时都可能表现出不同的行为。我的意思是，真正的网站不会有QUnit的输出部分。

我找到了将结果输出到浏览器控制台的方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <!-- not needed      <link rel="stylesheet" href="qunit-1.15.0.css"> -->
  <style>
      #test {
          background-color: #ff9900;
      }
  </style>
</head>
<body>
<!-- not needed...
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
-->
  <script src="qunit-1.15.0.js"></script>
  <script src="tests.js"></script>
  <div id="testdiv">My normal DOM DATA</div>
</body>
</html>

在我的tests.js中，我有以下片段：

QUnit.log(function( details ) {
  console.log( "QUnit: '" + details.name + "' = "
      + (details.result ? "PASS" : "FAIL,  " + "'"+details.message+"'"));
});

这是有效的。然而，我目前面临的问题是；脏的解决方案是：

  1. 我需要打开浏览器的控制台。当完成所有测试（对所有结果进行汇总）时，现有解决方案可能会生成alert()。为单个失败/通过的测试调整上述代码以发送alert()是微不足道的（但请参阅问题3）。

  2. 我无法启用"noglobals"检查功能，我发现这很方便。/也就是说，我找不到如何通过JavaScript API设置它。

  3. 我想知道是否有任何现有的/官方的解决方案（所以我不必重新发明轮子）。

所以，首先，对JavaScript进行单元测试！由于你强调的许多原因，这是经常避免的事情，所以很高兴看到你在努力。

QUnit必须在浏览器中运行。还有其他JS测试库不必（例如Mocha），但在测试网站代码时就不必了（主要用于测试Node）。如果你想测试你的网站JS代码，你需要在浏览器上下文中。但更重要的是，不，您不需要在浏览器中查看QUnit结果

查看输出的最简单方法很可能是使用自动化工具，尽管这不是最快的设置方法。例如，您可以使用Grunt和Grunt的QUnit插件（使用PhantomJS作为浏览器）来自动运行测试，并在终端（不是浏览器JS控制台，而是Linux/Mac/Windows终端）中查看输出。Grunt也可以在Jenkins、Travis或TeamCity等持续集成工具中使用。

事实上，QUnit使您能够在测试运行后获得所有结果，并对它们执行任何您想要的操作。因此，您可以编写自己的代码来处理结果并对其进行处理（例如发送到ajax端点进行报告）：

var log = [];
// set up a handler to capture the output from QUnit.log()
// then put that output into the array above for reporting later
QUnit.testStart(function(testDetails){
  QUnit.log(function(details){
    if (!details.result) {
      details.name = testDetails.name;
      log.push(details);
    }
  });
});
// set up a callback for when the entire test suite is complete
QUnit.done(function (totals) {
  // do whatever you need to in here with the totals (http://api.qunitjs.com/QUnit.done/)
  // and with the individual test `log` array
});

因此，为了具体回答您的问题：

  1. 您可以将window.alert(...)挂接到QUnit.done()回调。。。但我认为你最好有一个自动化解决方案
  2. 虽然您不能通过API以编程方式设置noglobals开关，但您可以简单地将其粘贴到测试文件的URL上：http://localhost:1234/tests/index.html?noglobals=true
  3. 参见我上面的例子，我们在所有项目中都使用Grunt，但对于跨浏览器测试，我会查看Sauce Labs和他们的VM API

祝你好运！

相关文章：