在前端开发中,调试和测试是必不可少的环节。使用 Storybook
可以更轻松地在一个单独的环境中在 Web 组件层面进行调试。本文将介绍如何使用 Storybook
来调试和测试你的 Web Components,并分享一些实用技巧。
什么是 Storybook?
Storybook
是一个 UI 开发环境,可以协助前端开发人员在组件层面上构建、展示、测试 UI. 它提供了一个可定制的界面,对每个组件提供实时反馈,有利于快速开发UI组件的同时,还可以进行一些交互测试。
如何使用 Storybook?
步骤1:安装 Storybook
--- -- ----
步骤2:创建 Stories
我们可以通过创建 stories 来为我们的组件提供交互测试。一个 story 其实就像是一堆应该渲染出什么的代码片段。例如:
------ - ----------- - ---- ----------------- ------ ------- - ------ -------------- ---------- ------------ -- ------ ----- ------- - -- -- -- ------ - ----- --------- -- --------- -------------- ------------------------------- --- ------ ----- --------- - -- -- -- ------ - ----- ----------- -- --------- -------------- ------------------------------- ---
上述代码使用 props
来提供了一些可配置项,我们使用这些可配置项来测试组件在不同的情况下是否正常工作。
步骤3:开发组件
我们首先需要编写实际的 Web Component。例如:
------ - ---------- ----- - ---- ---------------- ------------ --------- --------------- --------- ---------------------------- -- ------ ----- ----------- - -------- ----- ------ - --- -
步骤4:运行 Storybook
运行命令以启动 Storybook:
--- --- ---------
访问 http://localhost:6006/ 即可看到 Storybook
界面,并浏览 Storybook 中定义的组件和交互。
如何调试和测试?
调试组件 Props
我们可以使用 Storybook 面板中的 Knobs 进行 Prop 值的变更测试:
------ - ----------- - ---- ----------------- ------ ------- - ---------- ------------ ------ -------------- -- ------ ----- ------- - -- -- -- ------ - ----- --------- -- --------- -------------- ------------------------------- --- ------------------ - - ------ - ----- - ----- ------- ------------- ------ ------ -- -- --
添加了 Primary.parameters.knobs
后,我们就可以在 Storybook 的 Knobs 面板中找到一个带有文本输入框的输入框。
在运行时,我们可以随意更改输入框中的文本,以验证是否正确映射到我们的组件上。
调试事件
Storybook 还提供了另一个工具——Action 录制器。你可以使用 emit
方法记录和观察元素上发生的所有事件:
------ - ----------- - ---- ----------------- ------ ------- - ---------- ------------ ------ -------------- -- ------ ----- ------- - -- -- -- ------ - ----- -------- -- --------- -------------- ------------- --------------------------------------------- --- ------------ - - -------- --- ---- -- --------------- --
现在你可以在 Storybook 的 Action 面板上查看这个方法会发生什么效果。
结论
通过使用 Storybook,我们可以快速简单地构建、展示和测试 Web Components,并
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6723f3a02e7021665e11f3e8