Javascript 如何模拟或伪造网站的行为以允许对某些JS函数进行单元测试

情况： 我刚刚开始学习单元测试我的JavaScript代码，我想知道是否有一种方法可以伪造应用程序的行为来测试某些情况。我读过关于sinon.js spy/stub/mock的文章。然而，像往常一样，JS还有很多进一步的脚本和组合（如摩卡、柴、噶玛茉莉），我希望有人能告诉我一个最佳实践

让我们举个例子： 如果我想在测试运行程序中测试一个函数，它会根据窗口大小改变背景大小，那么触发不同的窗口大小（而不是元素大小）以查看背景大小调整在多个维度中工作是很复杂的

我已经测试了一些东西，比如

var resizeW = sinon.stub($.prototype, 'width').returns(600);
var resizeH = sinon.stub($.prototype, 'height').returns(1600);

// no effect - always takes the original view.height/width
viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0"); 

// new window is not testable in the root testrunner window
window.open + window.resizeTo() / window.resizeBy() 

// shows no effect
window.innerHeight = '120'; window.innerWidth = '500';

// provides no possibility to assume different dimensions
$(window).trigger('resize');

// provides no possibility to assume different dimensions
$(document).trigger('resize');

// provides no possibility to assume different dimensions
window.dispatchEvent(new Event('resize'));

使用iframe将是乏味的，也就是说，通过原始HTML和testrunner HTML之间的CSS和jQuery冲突

---

我希望有人能提出一个方便的方法来实现这一点

单元测试旨在断言应用程序的逻辑和状态位按预期工作

当然，您可以设置一个单元测试套件来针对浏览器中的应用程序表示层进行断言，但这可能不是一个好办法，因为正如您所知，很难模拟某些浏览器行为

正如@SteveB在他的评论中所建议的，用于端到端测试的工具可能比单元测试更适合您。这些工具允许在浏览器中运行您的实时应用程序并做出一些断言，同时直接控制浏览器行为，这样您就不会在模仿jQuery方法甚至使用jQuery时遇到麻烦

，或是执行端到端测试的常用工具

另一个适合您的工具是css断言工具

---

有时，在处理前端代码时，即使在单元测试基本功能时，模拟本机浏览器api也是必须的：在这种情况下，这是一条必由之路。

听起来，您真正关心的是应用程序如何与浏览器集成，而不一定是您自己控制的逻辑。这看起来像是一个集成测试，在这种情况下，您不会希望删除浏览器功能。在这种情况下，其他人提到的一些测试框架（如Selenium）可能是一个不错的选择（我还建议使用Puppeter，它有一个功能）

如果将依赖项外部化，如果存在值得单独测试的内部逻辑，也可以将其作为单元测试来编写，方法是将宽度和高度传递到代码中，并验证代码是否正确响应，但听起来似乎这里的逻辑主要是与browser/jQuery/DOM集成

---

关于最佳实践，需要记住和探索的一条重要格言是——如果你这样做，你就是在嘲笑你无法控制的行为，并且可能会从你下面改变，以及可能允许您的实现泄漏到您的测试中。

在CSS媒体查询为您处理所有这些计算时使用窗口大小调整是一个不好的例子。IOE不需要任何JavaScript。不需要。让我们假设智能手机上的键盘在textarea点击时弹出，并将整个内容缩小到剩余的窗口大小——这里您需要调整内容，这更容易用js处理。当您需要不断调整内容而不是逐步调整内容时，它也很优越……您是否尝试过：Selenium web driver或Headless Chrome@jeff在大多数情况下都是正确的，我想说，部分原因是CSS在不同的线程中处理这一点，与响应<代码>调整大小事件在与应用程序其余部分相同的线程中运行相比，通常会显著降低性能。