运行 QUnit 测试时，静态选择的变量会丢失答案

【问题标题】：Static selected variables are lost while running QUnit tests运行 QUnit 测试时，静态选择的变量会丢失
【发布时间】：2016-03-02 17:07:14
【问题描述】：

我刚开始使用 QUnit，遇到了一个问题。

当我编写 JavaScript 文件时，我将所有变量放在页面顶部，如下所示：

var $input1 = $('#input1');
var $submit = $('#submit');

然后，我像这样连接我的事件：

$submit.on('click', function (e) {
    submit(e);
});

这很好用，而且是一种很好的方式，每次我需要一些东西时，我都不必不断地去寻找所有的元素。（不要到处乱扔代码$('#submit')。）

但是，现在我正在使用 QUnit 运行测试，每次运行新测试时都会替换 qunit-fixture div 中的项目。（我正在重写一些其他人所做的代码，所以有一些初始的现有测试。）

截至目前，其他人编写的测试在模块的beforeEach 中的qunit-fixture div 中附加了一些静态HTML。

最后一点很重要，这是 ASP.NET MVC 项目的一部分，我们正在使用 chutzpah 运行测试，因此我们不会制作显式的 HTML 页面来运行每个测试文件。我们的目的是在命令行中运行它们，尤其是作为构建过程的一部分。

当我们没有为它们构建完整的 HTML 页面时，如何让那些应该始终在页面上的静态项目保持这种状态？

编辑我对此进行了更多研究，并且因为我在测试文件期间将 HTML 添加到 DOM，所以当我选择顶部的变量时，这些元素尚未出现在文件中的页面上米测试。

【问题讨论】：

标签： javascript jquery qunit chutzpah

【解决方案1】：

事实证明 Chutzpah 是问题所在。他们用来测试的 HTML 是绝对可怕的。所有的脚本都在<head> 标记中，所以它们总是在任何HTML 被添加到DOM 之前被处理。解决此问题的方法是使用Customizable Test Harness。

不幸的是，他们的文档没有提供有关如何实际制作此文档的任何信息。它们列出了您需要包含以供替换的项目，但是（与所有 JavaScript 文件一样）它们的顺序非常重要，并且不一定按照它们列出它们的顺序。这是我使用的，效果很好。

<html>
    <head>
        <title>Chutzpah tests</title>

        @@ReferencedCSSFiles@@
    </head>
    <body>
        <h1 id="qunit-header">Unit Tests</h1>
        <h2 id="qunit-banner"></h2>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>

        @@TestFrameworkDependencies@@
        @@CodeCoverageDependencies@@
        @@TestHtmlTemplateFiles@@

        @@ReferencedJSFiles@@

        @@TestJSFile@@

        @@AMDTestPath@@
        @@AMDModuleMap@@
    </body>
</html>

这样，您就可以将所需的任何静态 HTML 添加到文件中。但是，有一些警告：

qunit-fixture div 必须与其他 QUnit 元素处于同一级别。
qunit-fixture div 必须紧跟qunit-tests div。

但是，通过在页面底部包含所有 CSS，它的行为就像您对任何您自己编写的 HTML 页面所期望的那样，它们位于同一位置。

另外，您需要将以下信息添加到您的 chutzpah.json 文件中：

"CustomTestHarnessPath": "CustomTestHarness.html",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [
    { "Includes": ["*.js"]}
]

如果您将 HTML 页面与 chutzpah.js 和您的测试放在同一位置，您还需要添加该 Tests 过滤器，以便不会尝试将 HTML 页面作为测试运行。

【讨论】：

抱歉，您遇到了一些困难。 Chutzpah 已经在脑海中添加了这些引用很长时间，这是我第一次听说由它引起的问题。我想这是因为人们只会将他们的代码包装在 $(function(){}) 调用中，以确保它在文档准备好之后发生。那对你有用吗？如果不是，我们可以考虑更改订单，但我需要确保这不会破坏其他人。理想情况下，我不希望您使用该模板，因为它更脆弱，但我听到您对缺少文档的反馈。谢谢！