问题标签 [stencil-component]

我是单元测试的新手，并计划编写单元测试用例，但不是为下面提到的场景编写 E-2-E，场景的游乐场链接在底部。

Scenario:-

我有一个@State名为的变量"ifSuccessResponse"，初始值设置为false.

当@State变量"ifSuccessResponse"为true时，green-div加载。

当@State变量"ifSuccessResponse"为false时，red-div加载。

1. 如何模拟初始状态以将@State变量ifSuccessResponse设置为值true，然后加载 newSpecPage 以便我可以测试green-div已加载。

2. 在 Moc Doc 中加载页面后，@State是否可以使用. 很想知道我们是否可以像在图书馆中使用.ifSuccessResponsenewSpecPageenzymesetState method

Playground-link： https ://webcomponents.dev/edit/Cbr1NS2QTrvC5s​​csmFZQ/src/index.stories.tsx

我正在尝试学习 stencilJS，我正在开发具有自动对焦输入字段的组件。

我在 index.html 中调用了两次组件，我遇到了奇怪的问题，第二个渲染组件正在自动对焦第一个渲染组件。

并且组件不是每次都以相同的顺序呈现，最后呈现它的输入字段的组件将具有剩余的焦点，不会获得自动对焦。

下面附上代码，请帮我整理一下。

索引.html

搜索插件.tsx

我想用具有添加、更新、删除操作的表创建组件。但是当我尝试向数组添加一些测试元素时，我得到了这个错误

未捕获的 TypeError：this.documents 在 HTMLButtonElement.addNewDocument 处不可迭代

这是简单的代码，但我无法确定错误在哪里。

我有一个由 Stencil 编译为 Web 组件的简单组件：

在按钮上单击一个共享函数initAuth(...)，它是从服务目录导入的：

是否有任何（标准 Stencil）方法来构建和发布此文件，以便我们的 Web 组件库的用户可以导入导出的函数并使用/调用它们？在我们的用例中，最终用户应该能够直接在他/她自己的应用程序中使用方法，这些方法也用于我们的 Web 组件。

其他用例：共享变量、类...

提前致谢！

有趣的问题，所以请阅读到最后。我想要实现的是在另一个 js 文件中分离模板并在需要时延迟加载它。在 React 生态系统中做同样的事情，但是模板不行！分类回购https://github.com/pranav-js/triage-repo

我在另一个 .js 文件中有我的 tsx 模板说

template-three.js有简单的 onClick ，它只会发出警报

当我尝试通过像这样导入 component-two.tsx 来调用此方法时

查看呈现，但事件侦听器不起作用：/，甚至不是简单的警报 :(。当我检查时，我没有看到任何附加到按钮的事件。但是，如果我保留在组件类中的相同功能，它可以工作:(！ ！！

在组件内部和外部定义模板时检查两个不同的对象。

你能告诉我我在这里做错了什么吗？

我不能只在组件中保留模板，因为我有许多 UI 用于相同的逻辑。到目前为止，我在互联网上没有任何方法，这个答案对将 自定义模板传递给模板组件也无济于事

我正在编写一个input组件，并且在测试单击或按键stencil时触发的发出事件时遇到了麻烦。组件：enter

conponent.spec.jsx：

有一个错误：

我想要一个父组件来管理应用程序的中心状态并将相关信息传递给它的子组件，并根据需要重新渲染它们。这就是我在 Stencil 中理解父/子通信的方式——父母通过属性向孩子发送数据，孩子通过事件向父母发送数据。这个假设是错误的吗？

我在网上找不到不引用 React 特定 API 的相关示例时遇到问题

编辑：在我的情况下，父级渲染一个带有插槽的包装器组件可能是相关的。代码示例已更新以反映...

简化示例：

父.tsx：

child.tsx:

单击新功能时，我希望子组件显示它。目前，我无法做到这一点，除非：

• 我在第一次渲染时传递了一个有效的功能（它正确渲染一次）
• 在子级中有一个侦听器以从 DOM 中捕获所选功能

有没有办法在孩子不听事件的情况下做到这一点？

提前致谢。

一段时间以来，我试图弄清楚如何重用 Stencil Decorators。在我们公司，我们有一大堆组件都使用翻译。我们 Web 组件的用户应该能够将翻译对象作为属性传递。我们使用 @Prop 装饰器接收该属性：

如前所述，我们有一个相当大的组件列表，它们一遍又一遍地需要完全相同的代码：translationService、@Prop 和 @Watch 用于该道具。

有没有办法收集该代码，将其放在其他地方并在所有组件中重复使用相同的代码？

提前致谢！