出于文章的简洁起见，GitHub secrets 并没有被提及。Secrets 实际上是 GitHub 提供的安全环境变量，这样我们就不需要硬编码 project-token 了。
+
+、出于文章的简洁起见，[GitHub secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) 并没有被提及。Secrets 实际上是 GitHub 提供的安全环境变量，这样我们就不需要硬编码 `project-token` 了。、
+
+
### 提交 action
diff --git a/content/intro-to-storybook/vue/zh-CN/get-started.md b/content/intro-to-storybook/vue/zh-CN/get-started.md
index 9cf26c05c..e863c7255 100644
--- a/content/intro-to-storybook/vue/zh-CN/get-started.md
+++ b/content/intro-to-storybook/vue/zh-CN/get-started.md
@@ -32,19 +32,16 @@ yarn
现在通过下述的命令行我们可以快速查看应用程序中的各个环境是否正常运行：
```shell:clipboard=false
-# Run the test runner (Jest) in a terminal:
-yarn test:unit
-
# Start the component explorer on port 6006:
yarn storybook
-# Run the frontend app proper on port 8080:
-yarn serve
+# Run the frontend app proper on port 5173:
+yarn dev
```
我们的三个前端应用程序模式：自动化测试(Jest)，组件开发(Storybook)和应用程序本身。
-
+
您可以根据您目前所处理的应用程序的不同部分来决定同时运行上述三个中的一个或者多个。因为我们现在专注于创建一个简单的 UI 组件，所以我们继续运行 Storybook。
diff --git a/content/intro-to-storybook/vue/zh-CN/screen.md b/content/intro-to-storybook/vue/zh-CN/screen.md
index f97273721..b1a66dafa 100644
--- a/content/intro-to-storybook/vue/zh-CN/screen.md
+++ b/content/intro-to-storybook/vue/zh-CN/screen.md
@@ -89,30 +89,19 @@ import App from './App.vue';
我们同样需要修改 `App` 组件让其渲染 `InboxScreen`（最终，我们将会使用路由来决定渲染哪个页面，现在我们暂时不需要关注这些）：
-```diff:title=src/App.vue
+```html:title=src/App.vue
+
+
-- 
--
-
-
```
@@ -130,68 +119,59 @@ import PureInboxScreen from './PureInboxScreen.vue';
export default {
component: PureInboxScreen,
title: 'PureInboxScreen',
+ tags: ['autodocs'],
};
-const Template = args => ({
- components: { PureInboxScreen },
- setup() {
- return {
- args,
- };
- },
- template: '
--
-💡 需要说明的是，自顶而下的传递数据是一种合理的解决方案，尤其是使用 GraphQL 时。这也是我们在 Chromatic 中构建超过 800 个 story 的方式。
+
+💡 需要说明的是，自顶而下的传递数据是一种合理的解决方案，尤其是使用 [GraphQL](http://graphql.org/) 时。这也是我们在 [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) 中构建超过 800 个 story 的方式。
+
## 在 story 中提供上下文
-好消息是在 story 中的 `PureInboxScreen` 中使用 Pinia store 十分容易！我们可以更新 story 并直接导入在上一章中创建的 Pinia store。
+好消息是在 story 中使用 Pinia store 十分容易！我们可以更新 `.storybook/preview.js` 配置文件并依赖于Storybook's `setup` 函数以注册我们的 Pinia store。
-```diff:title=src/components/PureInboxScreen.stories.js
-+ import { app } from '@storybook/vue3';
+```diff:title=.storybook/preview.js
++ import { setup } from '@storybook/vue3';
+ import { createPinia } from 'pinia';
-+ app.use(createPinia());
-
-import PureInboxScreen from './PureInboxScreen.vue';
-
-export default {
- title: 'PureInboxScreen',
- component: PureInboxScreen,
-};
-
-const Template = (args) => ({
- components: { PureInboxScreen },
- setup() {
- return {
- args,
- };
+import '../src/index.css';
+
+//👇 Registers a global Pinia instance inside Storybook to be consumed by existing stories
++ setup((app) => {
++ app.use(createPinia());
++ });
+
+/** @type { import('@storybook/vue3').Preview } */
+const preview = {
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
},
- template: '
+
+💡 `@storybook/test` 包取代了 `@storybook/jest` 及 `@storybook/testing-library` 测试包，提供了大小近似且基于 [Vitest](https://vitest.dev/) 更清晰的 API 的包。
+
+
+
检查你最新创建的 story。点击 `Interactions` 面板来查看在 story play 函数中的交互列表。
@@ -304,9 +276,9 @@ yarn test-storybook --watch
```
-💡 使用 play 函数的交互测试时测试 UI 组件的绝佳方式。它能做的远比目前看到的多；我们推荐您阅读官方文档进行深入了解。
+💡 使用 play 函数的交互测试时测试 UI 组件的绝佳方式。它能做的远比目前看到的多；我们推荐您阅读 [官方文档](https://storybook.js.org/docs/writing-tests/interaction-testing) 进行深入了解。
-为了深入了解测试，请查看测试手册。它涵盖了缩放前端（scaled-front-end）团队所使用的测试策略，以增强您的开发工作流程。 +为了深入了解测试，请查看 [测试手册](/ui-testing-handbook)。它涵盖了缩放前端（scaled-front-end）团队所使用的测试策略，以增强您的开发工作流程。
diff --git a/content/intro-to-storybook/vue/zh-CN/simple-component.md b/content/intro-to-storybook/vue/zh-CN/simple-component.md
index f222ef977..9bbbae317 100644
--- a/content/intro-to-storybook/vue/zh-CN/simple-component.md
+++ b/content/intro-to-storybook/vue/zh-CN/simple-component.md
@@ -54,60 +54,62 @@ export default {
如下所示，我们在 story 文件中创建 Task 的三个不同测试状态：
```js:title=src/components/Task.stories.js
+import { fn } from '@storybook/test';
+
import Task from './Task.vue';
-import { action } from '@storybook/addon-actions';
+export const ActionsData = {
+ onPinTask: fn(),
+ onArchiveTask: fn(),
+};
export default {
component: Task,
+ tags: ['autodocs'],
//👇 Our exports that end in "Data" are not stories.
excludeStories: /.*Data$/,
title: 'Task',
//👇 Our events will be mapped in Storybook UI
argTypes: {
- onPinTask: {},
- onArchiveTask: {},
+ ...ActionsData
},
};
-export const actionsData = {
- onPinTask: action('pin-task'),
- onArchiveTask: action('archive-task'),
-};
-
-const Template = args => ({
- components: { Task },
- setup() {
- return { args, ...actionsData };
- },
- template: '-为了深入了解测试，请查看测试手册。它涵盖了缩放前端（scaled-front-end）团队所使用的测试策略，以增强您的开发工作流程。 +为了深入了解测试，请查看 [测试手册](/ui-testing-handbook)。它涵盖了缩放前端（scaled-front-end）团队所使用的测试策略，以增强您的开发工作流程。
+
+💡 [**Actions**](https://storybook.js.org/docs/essentials/actions) 可以帮助一在构建独立的 UI 组件时进行交互验证。一般来说，你无法访问程序上下文中的函数及状态。使用 `fn()` 可以做到。
+
+
+
Storybook 有两个基本的组织级别：组件和他的 story。可以将每个 story 视作其组件的排列组合。您可以根据需要给每一个组件创建任意个 story。
- **组件**
@@ -122,30 +124,21 @@ Storybook 有两个基本的组织级别：组件和他的 story。可以将每
- `component` -- 组件本身
- `title` -- 如何在 Storybook 应用侧边栏中引用组件
+- `tags` -- 自动为我们的组件生成文档
- `excludeStories` -- story 本身需要但是不用在 Storybook 应用中渲染的信息
-- `argTypes` -- 在每个 story 中具体说明 [args](https://storybook.js.org/docs/vue/api/argtypes) 的行为
-
-为了定义我们的 stories，我们为每个测试状态导出一个函数用于生成一个 story。Story 实际上就是一个根据给定的状态返回已渲染元素（例如：一个具有一组 props 的类组件）的函数---就像是[函数式组件](https://vuejs.org/v2/guide/render-function.html#Functional-Components)。
+- `args` -- 在每个 story 中具体说明 [args](https://storybook.js.org/docs/essentials/actions#action-args) 的行为
-因为我们的组件存在多种排列组合，所以设置一个 `Template` 变量不失为一种便捷的做法。使用这样的模式来创建您的 Story 可以大量减少代码量和维护成本。
-
-
-💡
+为了定义我们的 stories，我们将使用 Component Story Format 3 （也即 [CSF3](https://storybook.js.org/docs/api/csf) ）构建所有的测试用例。这种形式被设计用来以一种简洁的方式构建我们所用到的测试用例。通过导出包含每个组件状态的对象，我们可以更直观地定义测试，并更有效地创建和复用 story。
Arguments 或者简写 [`args`](https://storybook.js.org/docs/vue/writing-stories/args) ，让我们可以在不重启 Storybook 的前提下实时编辑我们的组件。一旦 [`args`](https://storybook.js.org/docs/vue/writing-stories/args) 的值被修改我们的组件也会进行相应的更新。
-当创建一个 story，我们使用一个基本的 `task` 变量来构建 task 组件所期望的形状。通常是根据真实数据来进行建模的。
-
-`actions` 允许我们创建 Storybook UI 的 **actions** 面板被点击时显示的回调。因此当我们构建一个 pin button 时，我们能够在 UI 上验证 button 点击是否成功。
+`fn()` 允许我们创建 Storybook UI 的 **actions** 面板被点击时显示的回调。因此当我们构建一个 pin button 时，我们能够在 UI 上验证 button 点击是否成功。
由于我们需要将相同的一组 actions 传入到组件的所有排列组合中，将它们合并到一个 `actionsData` 变量中，并在我们每次定义 story 的时候传入将会变得非常方便。
值得一提的是当我们将组件所需的操作都合并到 `actionsData` 之后，我们可以在其他组件复用此组件时，让其他组件的 story 也可以复用 `export` 的 `actionsData`，详见下文。
-Template.bind({}) 是 标准JavaScript 中用来复制函数的技术。我们使用这项技术保证了在使用同一份实现的同时，让每一个导出的story可以配置自己的属性。
-
-💡 Actions 帮助您在独立构建UI组件时验证交互。通常情况下您无法访问应用程序上下文中的函数和状态。请使用
+当创建一个 story 时，我们使用一个基本的 `task` 变量来构建 task 组件所期望的形状。通常是根据真实数据来进行建模的。再次说明，`export`-ing 这个语法将让我们在之后的 story 中复用，之后将会看到。
## 配置
@@ -154,11 +147,9 @@ Arguments 或者简写 [`args`](https://storybook.js.org/docs/vue/writing-storie
首先，修改您的 Storybook 配置文件(`.storybook/main.js`) 为以下内容：
```diff:title=.storybook/main.js
-module.exports = {
-- stories: [
-- '../src/**/*.stories.mdx',
-- '../src/**/*.stories.@(js|jsx|ts|tsx)'
-- ],
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ stories: ['../src/components/**/*.stories.js'],
staticDirs: ['../public'],
addons: [
@@ -166,14 +157,12 @@ module.exports = {
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
- framework: '@storybook/vue3',
- core: {
- builder: '@storybook/builder-webpack5',
- },
- features: {
- interactionsDebugger: true,
+ framework: {
+ name: '@storybook/vue3-vite',
+ options: {},
},
};
+export default config;
```
完成上述的修改后，修改位于 `.storybook`文件夹中的 `preview.js` 为以下内容：
@@ -182,26 +171,28 @@ module.exports = {
+ import '../src/index.css';
//👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
-export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
- controls: {
- matchers: {
- color: /(background|color)$/i,
- date: /Date$/,
+/** @type { import('@storybook/vue3').Preview } */
+const preview = {
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
},
},
};
-```
-[`parameters`](https://storybook.js.org/docs/vue/writing-stories/parameters) 通常用来控制 Storybook 功能和插件的行为。在我们的例子中，我们使用它们来配置 `actions` （模拟回调）如何被处理。
+export default preview;
+```
-`actions` 允许我们创建 Storybook UI 的 **actions** 面板被点击时显示的回调。因此当我们构建一个 pin button 时，我们能够在 UI 上验证 button 点击是否成功。
+[`parameters`](https://storybook.js.org/docs/vue/writing-stories/parameters) 通常用来控制 Storybook 功能和插件的行为。在我们的例子中，我们并不需要用到这个能力。相反，我们将会导入我们应用的 CSS 文件。
当我们完成这些，重启 Storybook 服务将会生成三种 Task 状态的测试用例：
@@ -301,7 +292,7 @@ export default {
@@ -327,6 +318,7 @@ yarn add --dev @storybook/addon-a11y
然后，更新 Storybook 配置文件（`.storybook/main.js`）来启用它：
```diff:title=.storybook/main.js
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
module.exports = {
stories: ['../src/components/**/*.stories.js'],
staticDirs: ['../public'],
@@ -336,17 +328,16 @@ module.exports = {
'@storybook/addon-interactions',
+ '@storybook/addon-a11y',
],
- framework: '@storybook/vue3',
- core: {
- builder: '@storybook/builder-webpack5',
- },
- features: {
- interactionsDebugger: true,
+ framework: {
+ name: '@storybook/vue3-vite',
+ options: {},
},
};
+export default config;
```
+最终，重启你的 Storybook 服务，就可以在 UI 中看到新的插件。
-
+
回顾我们的 stories，我们可以发现插件在我们的一个测试状态中发现可访问性问题。 [**"Elements must have sufficient color contrast"**](https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axeAPI) 信息实质上意味着在 task 标题和背景之间没有足够的差异性。我们可以快速的修复这个问题，通过修改应用程序的 CSS（位于`src/index.css`），将文本颜色改为 darker gray 。
diff --git a/content/intro-to-storybook/vue/zh-CN/test.md b/content/intro-to-storybook/vue/zh-CN/test.md
index dd864136a..1313e1c61 100644
--- a/content/intro-to-storybook/vue/zh-CN/test.md
+++ b/content/intro-to-storybook/vue/zh-CN/test.md
@@ -86,7 +86,7 @@ git checkout -b change-task-background
这为每个 task 项提供了一个新的背景色。
-
+
添加文件：
diff --git a/content/intro-to-storybook/vue/zh-CN/using-addons.md b/content/intro-to-storybook/vue/zh-CN/using-addons.md
index b9eb95a95..0d259c316 100644
--- a/content/intro-to-storybook/vue/zh-CN/using-addons.md
+++ b/content/intro-to-storybook/vue/zh-CN/using-addons.md
@@ -5,11 +5,11 @@ description: '学习如何集成并使用热门插件'
commit: '13da85f'
---
-Storybook 拥有一个健壮的[插件](https://storybook.js.org/docs/vue/configure/storybook-addons)生态系统来帮助您的团队提高开发体验。在[这里](https://storybook.js.org/addons)查看它们，
+Storybook 拥有一个健壮的[插件](https://storybook.js.org/docs/configure/storybook-addons)生态系统来帮助您的团队提高开发体验。在[这里](https://storybook.js.org/integrations)查看它们，
如果您完成了教程之前的部分，您实际上已经接触了一些插件，并在[测试](/intro-to-storybook/vue/zh-CN/test/)章节配置了其中一个。
-基本上每一个用例都有对应的插件，要把它们都写出来可能要花很长时间。让我们来集成其中最受欢迎的一个吧：[Controls](https://storybook.js.org/docs/vue/essentials/controls)。
+基本上每一个用例都有对应的插件，要把它们都写出来可能要花很长时间。让我们来集成其中最受欢迎的一个吧：[Controls](https://storybook.js.org/docs/essentials/controls)。
## 什么是 Controls？
@@ -19,7 +19,7 @@ Controls 允许设计人员和开发人员通过*修改*组件参数的方式轻
@@ -32,7 +32,7 @@ Storybook 是一个非常棒的[组件驱动式开发环境](https://www.compone
通过 Controls，任何的 QA 工程师，UI 工程师，或者其他的利益相关者都可以将组件推进到极致！让我们考虑下面这个例子，如果我们添加了一个**非常长**的字符串，我们的 `Task` 会发生什么？
-
+
这显然不对！就好像文本从 Task 组件的边界溢出了一样。
@@ -81,7 +81,7 @@ Controls 使得我们可以快速验证组件的各种输入。在这个例子
```
-
+
问题解决了！当文本到达 Task 区域边界时，通过漂亮的省略号将其截断。
@@ -107,14 +107,18 @@ LongTitle.args = {
如果我们在进行[视觉测试](/intro-to-storybook/vue/zh-CN/test/)，那么在截断方案失效时我们也会得到提示。如果没有覆盖测试，这样的模糊的边缘用例很容易被忽视。
-action() 将他们插入。
-💡 Controls 非常适合让一些非开发人员测试您的组件和 story，它远比您想象的要强大。我们推荐您阅读官方文档来了解更多。此外您还可以使用很多别的方式来定制 Storybook，以通过插件来适应您的工作流程。在创建组件指导中我们将会教您，通过创建一个插件来帮助增强您的开发工作流程。
+
+Controls 非常适合让一些非开发人员测试您的组件和 story，它远比您想象的要强大。我们推荐您阅读[官方文档](https://storybook.js.org/docs/essentials/controls) 来了解更多。此外您还可以使用很多别的方式来定制 Storybook，以通过插件来适应您的工作流程。在[创建组件指导](https://storybook.js.org/docs/addons/writing-addons)中我们将会教您，通过创建一个插件来帮助增强您的开发工作流程。
+
+
### 合并修改