javascript - 使用 shadow dom 对 native 自定义元素 v1 web 组件进行单元测试

标签 javascript web-component custom-element web-component-tester native-web-component

我按照指南 here 使用纯 JS/HTML/CSS 创建了一个原生自定义元素作为 Web 组件.

现在我想知道如何为这样的组件编写单元测试。有一个优秀的库 Web 组件测试器,但我相信它仅适用于使用聚合物创建的组件。

由于我的组件不是聚合物 Web 组件,而是原生组件,有人可以为我指明正确的单元测试方向吗。

最佳答案

您可以使用 Polymer 的 web-component-tester对于 Vanilla 成分。这篇博文有一些例子:https://bendyworks.com/blog/native-web-components .

您可以像这样测试您的组件:

  <my-vanilla-component></my-vanilla-component>
  <script>
    suite('<my-vanilla-component>', function() {
      let component = document.querySelector('my-vanilla-component');
      test('renders div', () => {
        assert.isOk(component.shadowRoot.querySelector('div'));
      });
    });
  </script>

关于javascript - 使用 shadow dom 对 native 自定义元素 v1 web 组件进行单元测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52157715/

相关文章:

javascript - 将代码逻辑简化为一行表达式

javascript - Polymer 1.0 无法访问嵌套 <template> 元素中的元素

javascript - 监听 child 或 parent 的事件以对 sibling 的变化使用react

javascript - Vanilla JS Web 组件中的外部依赖项位于何处?

angular - 使用 Angular 自定义 Web 组件会引发错误 : The selector "app-root" did not match any elements

javascript - 文档片段中自定义元素的初始化

javascript - 我如何检查一个元素是否可以承载 Shadow DOM?

javascript - 在javascript中覆盖现有对象的功能

javascript - 如何使用 Hooks 将状态从 child 传递给 parent

javascript - Karma-Browserify + Karma-Coverage 的问题