Javascript 单元测试 - DOM 操作

2024-04-28

我对 Javacript 单元测试很陌生。有件事一直困扰着我。在测试 javascript 时,我们经常需要进行 DOM 操作。看起来我正在对控制器/组件中的方法/函数进行单元测试,但我仍然需要依赖模板中的 HTML 元素。一旦 id(或在我的测试用例中用作选择器的属性)更改,我的测试用例也需要更改!这不是违背了单元测试的目的吗?


JavaScript 单元测试最困难的部分之一不是测试,而是学习如何构建代码以使其可测试。

您需要将可测试逻辑和 DOM 操作明确分开来构建代码。

我的经验法则是这样的:

如果您正在测试任何依赖于 DOM 结构的内容,那么您就做错了。

总结:尝试仅测试数据操作和逻辑操作。

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

Javascript 单元测试 - DOM 操作 的相关文章

  • 使用Javascript自动打开弹出新窗口[重复]

    这个问题在这里已经有答案了 如何使用Javascript加载页面时打开弹出新窗口 我希望 当网站加载时 它会自动打开弹出新窗口 我使用以下内容 不行 尝试这个
  • 应该使用encodeURI吗?

    javascript 的encodeURI 函数有任何有效用途吗 据我所知 当您尝试发出 HTTP 请求时 您应该 完整的 URI 您想要放入 URI 中的某些片段 可以是 unicode 字符串或 UTF 8 字节序列 在第一种情况下 显
  • 如何将 scala 列表转换为 javascript 数组?

    有更简单的方法吗 document ready function var jsArray if scalaList null for id lt scalaList jsArray push id 很简单 如下所示 import play
  • 无法使用 Jade 模板包含相对路径文件

    当我尝试将文件包含在同一文件夹中时 收到以下错误 the filename option is required to use include with relative paths 有两个文件 索引 jade 项目列表 jade cont
  • ECMAScript 6 类中的 getter 和 setter 有何用途?

    我对 ECMAScript 6 类中 getter 和 setter 的意义感到困惑 什么目的 下面是我参考的一个例子 class Employee constructor name this name name doWork return
  • 按 Enter 键提交消息?

    我正在开发一个基于本教程使用 Meteor 构建的聊天应用程序 http code tutsplus com tutorials real time messaging for meteor with meteor streams net
  • 如何对像 Excel Pivot 这样两个键必须匹配的数组求和?

    我尝试对 Datum 和 Material 必须匹配的所有 Menge 和 Fehler 值求和 结果应类似于 Excel 数据透视表 到目前为止 这是我的代码 但我不知道如何添加也必须匹配的第二个键 Material 我希望你能理解我试图
  • 如何格式化折线图谷歌图表材料上的轴?

    我在格式化材料图表的轴时遇到问题 Using classic line chart if I would like to format my vertical axis with a dollar sign I would do vAxes
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • 如何使用 javascript 将我的域名字母大写?

    假设我的域名是www hello com 如何使用 jQuery JavaScript 使浏览器的 URL 栏看起来像 www HELLO com 您无法更改浏览器地址栏中显示的内容 这是一项基本的安全功能 您可以使您的域名全部大写 并将页
  • 当系列没有相同的时间值时,如何在工具提示中显示所有系列

    我有一个显示多个时间序列的图表 不同时间序列不会同时采样 有没有办法在工具提示中显示所有系列 在示例中 您可以看到所有系列都包含在前 2 个点的工具提示中 因为它们是同时采样的 其余点仅包含 1 个系列 var myChart echart
  • 全日历与 UTC 和本地日期的混淆

    我确实让 fullcalendar 正常初始化 所以它代表当前日期 午夜 gt 午夜 1 天 1 小时时段 我从其他一些数据源获取带有时间戳的数据 格式为 YYYY MM DD HH mm 作为字符串传输 无时区信息 因此 我将该字符串转换
  • 测试 - 存根服务方法未定义

    我已经在非常简单的代码上编写了一个非常简单的测试 但由于某种原因存根服务方法未定义 当我使用 Jasmine Spy 时 它可以工作 但对于这样一个简单的任务 有人可以解释一下为什么会发生这种情况吗 我删除了 import 语句只是为了减少
  • 如何将值从孩子的孩子传递给父母?

    我有一个父组件 有一个子组件 它也有一个子组件 Parent Child One child of parent Child Two child of child 当在子二中定义一个值时 我使用回调将该值传递给子一 但我也想将相同的值传递回
  • 鼠标输入时反应显示按钮

    我有一个反应组件 它包含如下方法 mouseEnter console log this is mouse enter render var album list const albums this props if albums user
  • 如何从 Visual Studio Code API 打开浏览器

    我只是在探索一种从用于开发扩展的 Visual Studio Code API 打开默认浏览器的方法 以下是我的代码 var disposable vscode commands registerCommand extension brow
  • 如何加载Jquery Tiny滚动条

    所以我想自定义一个滚动条 我发现了一个很小的滚动条 这是一个jquery插件 http baijs nl tinyscrollbar http baijs nl tinyscrollbar 问题是 无论如何我都无法让它工作 我将 Jquer
  • FakeItEasy 代理方法调用实际实现

    我正在尝试将对假对象的调用代理到实际的实现 这样做的原因是我希望能够使用 Machine Specifications 的 WasToldTo 和 WhenToldTo 它们仅适用于接口类型的伪造 因此 我正在执行以下操作来代理对我的真实对
  • 如何使用node.js获取屏幕分辨率

    我需要使用 node js 获取屏幕分辨率 但以下代码不起作用 var w screen width var h screen height 这也行不通 var w window screen width var h window scre
  • gjs 如何使用 g_data_input_stream_read_line_async 在 Gnome Shell 扩展中读取套接字流

    我正在尝试编写一个 Gnome Shell 扩展 通过 Socket 服务器与 Arduino 进行通信 服务器和 Arduino 运行良好 但我陷入了监听传入服务器消息的扩展代码 因为我需要一种非阻塞方法 所以使用异步读取行 https

随机推荐