如何在测试中设置或模拟元素scrollHeight和元素clientHeight?

2024-03-16

我有一个 javascript 函数来检查 html

元素,el,是通过检查确定的大小:

function isOverflow(element: string): boolean {
    const el = document.getElementById(element);
    return el.scrollHeight > el.clientHeight
}

我想测试一下我的功能。如何设置或模拟scrollHeight和clientHeight?

it('test', () => {
   const el = document.createElement("p")
   el.setAttribute("id", "overflow")

   //How to mock these? This doesn't work "Cannot assign to 'scrollHeight' because it is a read-only property"
   el.clientHeight = 2;
   el.scrollHeight = 1;

   expect(component.isOverflow("overflow")).toBe(true);
  })

弄清楚了:

Object.defineProperty(HTMLElement.prototype, 'scrollHeight', { configurable: true, value: 500 })
Object.defineProperty(HTMLElement.prototype, 'clientHeight', { configurable: true, value: 10 })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在测试中设置或模拟元素scrollHeight和元素clientHeight? 的相关文章

  • 判断字符串是否包含有效的javascript代码

    我正在寻找一个C 返回的函数true如果字符串包含有效的 JavaScript 语法 例如 IsValidJavascript alert hello 会回来true but IsValidJavascript alertXXhelloZ
  • 以下文档我无法创建 Vue.js 3 的实例

    The code https stackblitz com edit vue ttt file src main js https stackblitz com edit vue ttt file src main js 问题 我正在尝试在
  • 将时间戳转换为一个数组

    在应用程序脚本 谷歌表中运行 我从 API 获取时间戳并返回此结果 1 6370611672429312E18 1 63706107263277082E18 我执行此代码并且工作正常 但问题不在数组中 我每次都需要它在数组中 const t
  • Angular UI 路由器嵌套视图问题

    我在理解 Angular UI Router 嵌套视图的工作原理时遇到了一些问题 我的 stateProvider 看起来像这样 stateProvider state login url login views main template
  • onClick 处理程序在每个渲染周期触发

    我有这样的默认状态 this state selectedTab tab1 then 我的渲染方法是这样的 render const selectedTab this state return li tab1 li li tab2 li d
  • EmberJS:对象作为查询参数来刷新模型

    我遵循了查询参数指南 http guides emberjs com v1 11 0 routing query params http guides emberjs com v1 11 0 routing query params 而且效
  • 检查用户设备的 GPS 是否开启

    我正在使用 jQuery Mobile 和 PHP 开发一个应用程序 我没有使用 Phonegap 或其他框架 我需要找到用户的geolocation 如果用户设备的 GPS 关闭 那么我无法获取位置 现在我需要查找用户设备的 GPS 是否
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • .points 不透明度/大小在三个.js 内

    我回来回答有关 points 的第二个问题 这次想知道如何将不透明度从 0 更改为 1 然后又回到距发射器的特定像素距离内 var particleCount 14 particles new THREE Geometry pMateria
  • 通过 JavaScript 单击按钮/页面提交

    我想了解 asp net 框架如何知道何时单击了按钮 因此一旦收到请求 就会在服务器上触发其单击事件 我需要了解它是如何工作的 因为我想从 JavaScript 触发按钮的服务器单击事件 我能够从 JavaScript 执行页面提交 doc
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • vuejs中如何获取组件编译后的html内容

    我有一个这样的组件
  • 我应该创建一个块还是一个元素 BEM CSS?

    Bem官网说 创建一个块如果一段代码可以被重用并且它不依赖于正在实现的其他页面组件 创建一个元素如果一段代码在没有父实体 块 的情况下无法单独使用 我有一个 关于部分 块 它的元素依赖于父级并且不能在网站中重复使用 如何根据 bem 这段代
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作

随机推荐

  • 访问 VBA 记录集字符串比较不适用于通配符

    我在 Excel 中使用 VBA 的经验丰富 但在 Access 2010 中使用 VBA 的经验很少 我试图从其中一个字段以 X 结尾的记录集中删除记录 当我使用通配符时 比较失败 当我使用特定字符串时 比较按预期进行 这是我正在使用的代
  • 在代码中设置 WPF 标签的 Style 属性?

    在 App xaml 中 我有以下代码
  • 如何使用 javascript 跨 2 个域共享 cookie?

    我希望能够在 example com 和 mysite com 之间访问和设置 cookie 我怎么做 您不能单独使用 cookie 来做到这一点 它们是按域显式设置的 并且没有合法的 读 非利用 方法来为另一个域设置它们 但是 如果您控制
  • 如何使用 javascript/jquery 将 3 个画布 HTML 元素合并到 1 个图像文件中? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我有 3 个画布 即 canvasTarget canvasTarget2 canvasTarget3 如下所示 var canvas do
  • AJAX 到 Web 方法不返回 JSON

    我正在使用 AJAX 从我的 js 文件调用 aspx 页面中的 Web 方法 我已将方法设置为 WebMethod 并且该页面继承自System Web Ui Page 类 它仍然没有将 JSON 格式返回给我调用的 ajax 函数 这是
  • vim:在 vim-gnome 中使用 ctrl-Q 进行可视块模式

    我在 windows 和 linux 上使用 vim 在Linux上 我想将ctrl Q设置为可视块选择 但仍然保持将ctrl v设置为粘贴的mswin行为 如何保持 mswin 的行为并使用 ctrl Q 进行视觉块模式 编辑 我虽然 m
  • 如何使用 SqlDataReader 获取列的 DataType 和 Size?

    我正在尝试获取每列的数据类型以进行一些验证 我已经尝试过getSchemaTable但它只给了我没有值的表的模式 例如 我的数据库中有一个表和一个列名 id declarant 我想从中检索值的数据类型和大小id declarant 这是代
  • Microsoft Edge 中内容脚本和后台脚本之间的通信

    我的沟通有问题browser runtime connect在我的测试回声扩展的内容脚本和后台脚本之间 我已经发布了我的代码和扩展包github https github com alexeysidorov92 edge echo exte
  • 如何实际检测 musl libc?

    musl 团队声称不需要检测 musl libc 的方法 因为它们只实现标准功能并且没有需要检测的怪癖 直到今天 这种说法很可能是正确的 但现在已经不再正确了 正常的功能检测不起作用 因为该功能存在但已损坏 我宁愿不探测它 因为我不想在编译
  • 如何捕获C++正则表达式中的0-2组并打印它们?

    Edit 3 当我陷入正则表达式困境时 我采用了 good ol 自定义解析方法 事实证明这并没有那么糟糕 因为文件内容可以非常整齐地标记 并且可以使用以下命令在循环中解析标记very简单的状态机 对于那些想要检查的人 在我在 Stacko
  • DataGridComboBoxColumn 不更新模型 WPF

    我在 WPF 和 DataGridComboBoxColumn 中使用 Datagrid 请找到下面的代码
  • Android 中密码字段的正则表达式

    我如何验证EditText with Regex通过允许特定字符 我的条件是 密码规则 一个大写字母 一个号码 一个符号 任何可以接受的正常符号 我可以知道实现我的目标的正确方法是什么吗 试试这个可能有帮助 0 9 a z A Z S 4
  • ko.mapping 创建函数,扩展对象

    是否可以在映射过程中修改对象的模式 由于缺乏更好的术语 我想是的 我似乎无法让它发挥作用 我正在尝试这样的事情 var data itemOne someData itemTwo moreData var mapping newItem c
  • 结果显示为空

    我有一个Customer创建的 JSON 对象的值如下 Title Mr FirstName S LastName J Birthday 01 01 2011 Address Line1 Line1 Line2 Line2 City Cit
  • PHP 搜索数组列进行匹配

    我有一个如下所示的数组 其中有多个列 我想在第一列中搜索特定值 并返回匹配的行 这可能吗 例如 Array 0 gt Array id gt 1 column2 gt value2 column3 gt value3 column4 gt
  • 如何在react中使用axios删除单个项目

    我查看了很多文章和帖子 例如this https stackoverflow com questions 26806084 delete a comment react js但它在我的情况下不起作用 我只需要使用 axios 从我的应用程序
  • 在模板中使用导出关键字

    据我了解 可以使用 export 关键字 以便可以通过头文件公开模板类或函数签名 并抽象库文件中的实际实现 谁能提供一个实用的示例程序来说明如何做到这一点 使用时有什么缺点或需要注意的地方吗 编辑 基于答案的后续问题 正如答案中提到的 导出
  • 在 git bash 中找不到 wget 命令

    我已经在我的cmd中尝试过 pip install wget 它显示 gt pip install wget Requirement already satisfied wget in c users user python python3
  • angular2 添加两个数字视图侧

    我希望能够添加两个文本框中的数字 template h1 Adding inputBox Numbers h1 p Num1 p
  • 如何在测试中设置或模拟元素scrollHeight和元素clientHeight?

    我有一个 javascript 函数来检查 html 元素 el 是通过检查确定的大小 function isOverflow element string boolean const el document getElementById