javascript - 在没有 NodeJS 的情况下编写 Javascript 测试

Question

我一直在努力回到做非节点依赖 javascript 的根源，在这种特殊情况下进行测试。像许多开发人员一样，我陷入了学习框架的陷阱，进而忘记/从未理解过一些 javascript 编程的基本范式。

问题

我正在尝试测试我为可折叠元素创建的简单 es6 脚本。它可以使用框架进行测试，但是脚本只是插入到 html 文件的底部，而不是以任何更复杂的方式执行，并且需要在没有复杂过程的情况下保持功能。我知道这不是执行此操作的传统方法，您可以使用现代技术轻松解决问题，但这是我需要将其组合在一起的方式。

可折叠.js

const initialiseCollapsible = (collapsible) => {
  let collapsibleButton = collapsible.querySelector(".collapsible__button");
  let collapsibleContent = collapsible.querySelector(".collapsible__content");

  collapsibleButton.setAttribute("aria-expanded", "false");
  collapsibleContent.setAttribute("aria-hidden", "true");

  collapsibleButton.addEventListener("click", () => {
    // cast the value of aria-expanded as a boolean
    let expanded =
      collapsibleButton.getAttribute("aria-expanded") === "false"
        ? false
        : true;
    // Toggle the expanded attribute
    collapsibleButton.setAttribute("aria-expanded", !expanded);
    collapsibleContent.setAttribute("aria-hidden", expanded);
  });
};

(() => {
  [...document.getElementsByClassName("collapsible")].forEach((collapsible) => {
    initialiseCollapsible(collapsible);
  });
})();

该文件旨在遍历 的所有实例.collapsible，添加事件侦听器以便它们可以正确切换，并最初关闭它们（内容必须在禁用 javascript 的情况下可访问）。

1) 模块功能

使用 es6 模块，我知道它通常使用诸如 babel 之类的东西进行转换。而对于requireJS，我仍然不明白module.exports浏览器是否会理解，目前它会抛出错误，因为它不理解语法。有没有办法解决这个问题？所以我可以编写一个在 html 文件中调用的功能脚本，同时仍然能够将它导入到测试文件中以运行测试？我假设我最终可以复制并粘贴它以使其可用。

2）测试事物

我正在努力考虑如何准确地测试这段代码。我看到了一些潜在的测试：

给定一个可折叠的 html 元素，

1. 扩展/隐藏已正确设置为开始（测试查询选择器是否有效并且设置的属性是否正常工作） 问题我不太明白如何在没有某种我可以篡改的虚拟 dom 的情况下模拟它，有没有好的图书馆为此？那些将允许我创建一个文档 html 元素，我可以在其上运行脚本代码以查看更改。
2. 现在，可折叠按钮上有一个与示例代码匹配的 clickEvent。问题这对我来说几乎就像一个功能测试，我正在测试当我点击按钮时会发生什么，就像黄瓜/硒会是一个更好的途径。这么简单的事情有大量的开销，但是有没有更简单的方法来做到这一点？

我意识到这可能是 10 个问题中的大约 1 个问题，但是如果您对所提出的问题有任何反馈/解决方案，请随时贡献。

标签： javascripthtml