我有一个网站，它使用 JS 构建客户端，使用 PHP 构建后端，并使用 MySQL 支持数据库。我开始对所有内容进行单元测试，后端使用 PHPUnit 相当简单。
本着同样的精神，我想开始测试客户端并选择了 QUnit。然而，我们正在使用 Kendo UI，我对如何在不重新发明轮子的情况下自动化测试感到有点困惑。
假设我有一个 modify.js 文件，在定义所有内容后，我有以下 jQuery:
$(document).ready(function() {
$("#user-menu").kendoMenu();
var modify = $('#modify');
kendo.bind(modify, modifyViewModel);
kendo.bind($('#numTagWindow'), numTagWindow);
modifyViewModel.initForm();
$(window).on("resize", function() {
kendo.resize($("#trip"));
});
});
这里，modify.php是一个带有一些PHP的html文件，对应于用户修改某些相应设置时得到的 View 。在 modify.php 中包含的单独的 jsTest.js 文件中，我拥有与 modify.js 有关的所有 QUnit 测试。
我的问题如下:这里的单元测试的标准方法是什么，自动化还是其他方式？就目前情况而言，由于相同 HTML 页面被用于大量测试，我当前唯一的选择是手动尝试每个选项以查看断言是否通过。
如果所述函数取决于预选输入的类型，情况会变得更糟。我被迫根据输入放置不同数量的预期断言(诚然，这可能是一个设计缺陷)。
我应该如何处理这个问题？是否可以使用多个 $(document).ready 来“重置”页面并以这种方式运行测试？在这种情况下，向客户端代码提供用户输入的最简单方法是什么？
最佳答案
我以前从未使用 KendoUI 测试过应用程序，但我认为它与任何其他前端库类似......也就是说，您可以使用它们拥有的任何内置工具，模拟库，或者进行更多的“集成”测试而不是单元测试。对于上面的最小示例来说， mock 并没有那么糟糕，但你可以想象它会失控。因此，我认为集成测试是最好的，您可以使用 QUnit(与 jQuery 一起)，您只需“编写”您正在测试的所有操作。
当然，您还需要制定一些策略，通过重置 HTML block 或将各个 block 分成不同的测试文件或其他方式来使测试原子化......
这是一个 QUnit 测试文件的 super 基本示例，其中包含一个 html 固定装置，该固定装置在每次测试后都会重置。请注意，通过在源代码中使用 document.ready() 调用，您基本上无法执行任何此操作。如果你去掉它并使用某种 init() 方法，事情会工作得更好。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/qunit-1.14.0.css" />
</head>
<body>
<div id="qunit"></div> <!-- required! -->
<div id="qunit-fixture">
<!-- HTML to be reset for each test -->
<div id="user-menu"> <!-- whatever you need in here --> </div>
<!-- whatever other HTML you need for these tests -->
</div>
<script src="lib/qunit-1.14.0.js"></script>
<script src="path/to/source-code.js"></script>
<script>
QUnit.test("Test some trigger", function(assert) {
myCode.init(); // used to be in your document.ready()
$("#someTriggerButton").click();
assert.ok($("#someElement").hasClass("foobar"), "Ensure the element has the correct class after clicking trigger");
});
// Note that after this test runs, before the next test runs,
// the HTML inside of #qunit-fixture will be reset to its value when freshly loaded
QUnit.test("Another test", function(assert) {
// ...
});
</script>
</body>
</html>
所以有一些东西可以开始...这旨在与 HTML 片段一起使用，而不是与整个页面一起使用。当然，还有很多其他方法可以做事。不幸的是，你的问题有点太模糊，无法真正给你一个具体的“解决方案”。如果您尝试某些操作后遇到问题，请在此处发布另一个问题，我们将尽力提供帮助。
关于javascript - 自动化 Javascript 单元测试...从哪里开始？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26656266/