JS 测试运行器 html 与生产 html？答案

【问题标题】：JS test runner html vs production html?JS 测试运行器 html 与生产 html？
【发布时间】：2012-12-12 07:31:33
【问题描述】：

回答：根据 SO 之外的人的建议：将 html 放入视图文件中，并将其注入到您的生产页面和 testRunner 页面中。问题解决了。

以下问题以粗体显示

假设我有一个方法可以在用户单击时将元素向左移动 50px。

负责这个的函数是

function moveElemLeft($elem, iPxLeft){}

在我的测试脚本中，我基本上有：

test("test moves function left via css", 1, function(){
    //get first elem in test fixture.
    var $testFixture = $('#qunit-fixture').children().eq(0);
    var beforeLeft = $testFixture.css('left');
    moveElemLeft($testFixture, 50);
    var afterLeft = $testFixture.css('left');
    equal(beforeLeft-50, afterLeft);
});

在我的 testRunner HTML 中，我会有类似

的内容

 <head><script href="test.js" /></head>
    <body>
    <div id="qunit-fixture">
    <div id="testChild" class="absolute no-margins">
    </div></div>
    </body>

----- 问题---- 我的函数在测试期间正确运行但在生产中不能正确运行的可能性不是很大吗，因为我在测试夹具中编写的 html 显然是微不足道的？使用与我的测试运行器 html 文件中相同的 html 不是更好吗？

但要做到这一点，这意味着在测试设置中，我必须将生产 html 文件中的 html 复制到测试运行程序文件中。这甚至可能吗？这里的最佳做法是什么？

【问题讨论】：

标签： javascript jquery unit-testing tdd qunit

【解决方案1】：

使用与我的测试运行器 html 文件中相同的 html 不是更好吗？

除了单元测试之外，测试它会很有用。

我不会替换一个小型的、独立的测试来证明当使用这样的测试在预期的输入上运行时函数的行为符合预期。

但要做到这一点，这意味着在测试设置中，我必须将生产 html 文件中的 html 复制到测试运行程序文件中。这甚至可能吗？这里的最佳做法是什么？

在生产 HTML 上运行您的测试（或者更确切地说，在专用测试服务器上单独安装它）。我会使用 Selenium 之类的东西在浏览器（或浏览器集合）中测试整个页面，而无需将测试代码注入页面本身。

【讨论】：

因此从哲学上讲，将 html 和 js 层视为分开的。 JS 测试测试 js 是否按预期工作，然后使用另一个测试套件（您建议 selenium，或 [第二选择] 嵌入 js 测试代码）以确保 html 与 js 正常工作。
差不多。一个机械化的浏览器可以测试整个网站——HTML、CSS、JS、服务器端代码等等。
这听起来像是在争论只使用 selenium 来测试一切是否按预期工作，如果 js 足够复杂，并且您想测试 js 逻辑是否起作用，则只需要使用纯 js 单元测试你想要的方式。