情况: 我刚开始学习对我的 JavaScript 代码进行单元测试,我想知道是否有一种方法可以伪造应用程序的行为以测试某些情况。我读到了 sinon.js spy/stub/mock。然而,与往常一样,对于 JS,还有许多其他脚本和组合(即与 mocha、chai、karma-jasmine),我希望有人能告诉我最佳实践。
让我们举个例子: 如果我想在测试运行器中测试一个函数,它会根据窗口大小更改背景大小,触发不同的窗口大小(而不是元素大小)以查看背景大小调整在多个窗口中工作是很复杂的方面。
我已经测试了一些东西,比如
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 和测试运行器 HTML 之间的 CSS 和 jQuery 冲突。
我希望有人可以提出一种方便的方法来实现这一点。
最佳答案
听起来好像您真正关心的是您的应用程序如何与浏览器集成,不一定是您自己控制的逻辑。这看起来像是一个集成测试,在那种情况下,您不会希望取消浏览器功能。在这种情况下,其他人提到的一些测试框架(例如 Selenium)可能是一个不错的选择(我可能还建议使用 Puppeteer,它具有 setViewport 函数)。
如果您将依赖项外部化,如果存在值得单独测试的内部逻辑,也可以将其编写为单元测试,方法是将宽度和高度传递到您的代码中并验证您的代码响应适当,但听起来好像这里的逻辑主要是围绕与浏览器/jQuery/DOM 集成。
关于最佳实践,要记住和探索的一个重要格言是 don't mock code that you don't own - 如果你这样做,你就是在 mock 你无法控制的行为,并且可能会改变你的行为,并且可能允许你的实现泄漏到你的测试中。
关于javascript - 我如何模拟或伪造网站的行为以允许对某些 JS 功能进行单元测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48366320/