javascript - 我如何模拟或伪造网站的行为以允许对某些 JS 功能进行单元测试

标签 javascript jquery unit-testing jasmine sinon

情况: 我刚开始学习对我的 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/

相关文章:

javascript - html 表格 td 金额列的右对齐?

javascript - d3.js 突出显示堆叠栏并获取选定值

c# - 模拟 Azure 表存储的 CloudStorageAccount 和 CloudTable

javascript - 如何通过管道将代码和单元测试传递给 npm test?

java - 我应该在单元测试时从正在测试的类中调用方法吗?

javascript - webpack dev server 混合内容错误

javascript - 未定义不是一个对象(评估 myArray.length)

javascript - 如何获取包含数据属性的innerHTML

javascript - 当移动设备从 sleep 中唤醒时重新加载网页

javascript - MVC 4 和 JQuery