Question

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

问题

我正在尝试测试为可折叠元素创建的简单es6脚本。可以使用框架对其进行测试，但是该脚本只是插入到html文件的底部，而不是以任何更复杂的方式执行，并且需要保持功能而不需要复杂的过程。我知道这不是执行此操作的常规方法，您可以通过现代技术轻松地使问题变得微不足道，但这是我要求将其组合在一起的方法。

Collapsible.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元素，

已正确设置展开/隐藏状态以启动（测试查询选择器是否正常工作，以及设置的属性是否正常工作）问题：我不太了解如何在没有某种我可以篡改的虚拟dom的情况下对其进行仿真，是否为此提供了良好的库？允许我创建一个文档htmlelement，可以运行脚本代码以查看更改。
可折叠按钮现在具有与示例代码匹配的clickEvent。问题对我来说，这几乎就像一个功能测试，我正在测试单击按钮时发生的事情，几乎就像黄瓜/硒将是更好的方法。这么简单的事情有很多开销，有没有更简单的方法来做到这一点？

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

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

0 个答案: