出于文章简洁性的考虑，GitHub secrets并没有被提及。Secrets实际上是GitHub提供的安全相关环境变量，这样我们就不需要硬编码project-token了。
出于文章的简洁起见，GitHub secrets 并没有被提及。Secrets 实际上是 GitHub 提供的安全环境变量，这样我们就不需要硬编码 project-token 了。
-- 
+-
```
-但是，当在 Storybook 中渲染 story 时事情就变得有趣起来了。
+然而，当在 Storybook 中渲染 story 时事情就变得有趣起来了。
-正如我们之前所见的，`TaskList`组件作为一个**容器**负责渲染`PureTaskList`这个表示型组件。我们定义了容器组件不能简单的被隔离式地渲染；我们希望传递给它们一些上下文或者让它们和某个服务进行通信。这表示如果我们希望在 Storybook 中渲染一个容器，我们必须模拟（例如提供一个虚拟版本）一个其所需的上下文或者服务。
+正如我们之前所见的，`TaskList` 组件作为一个**容器**负责渲染 `PureTaskList` 这个展示型组件。根据定义，容器组件不能简单的被隔离式地渲染；它们被期望传递一些上下文或者与某个服务进行通信。这意味着如果我们希望在 Storybook 中渲染一个容器，我们必须 mock（例如提供一个虚拟版本）一个其所需的上下文或者服务。
-当在 Storybook 中处理`TaskList`时，我们可以简单的通过渲染`PureTaskList`来回避这个问题。我们这里同样通过渲染`PureInboxScreen`来解决此问题。
+当在 Storybook 中处理 `TaskList` 时，我们可以通过简单的渲染 `PureTaskList` 并避开容器来回避这个问题。我们将做类似的处理并在 Storybook 中渲染 `PureInboxScreen`。
-但是这里我们遇到的问题是，尽管`PureInboxScreen`本身是表示型的，但它的子组件`TaskList`却并不是。某种意义上来说`PureIndexScreen`被“容器性”所污染了。所以当我们设置`src/components/PureInboxScreen.stories.js`时：
+但是，对于 `PureInboxScreen` 有一个问题。尽管 `PureInboxScreen` 自身是展示型的，但是其子组件 `TaskList` 不是。某种意义上来说，`PureInboxScreen` 已经被“容器性”污染了。所以当我们在 stroy 中设置 `src/components/PureInboxScreen.stories.js` 时：
```js:title=src/components/PureInboxScreen.stories.js
import PureInboxScreen from './PureInboxScreen.vue';
@@ -136,47 +148,30 @@ export const Error = Template.bind({});
Error.args = { error: true };
```
-我们发现尽管`error`的 story 运作正常，但因为`TaskList`没有连接相对应的 Vuex store，所以`default`的 story 出错了。（类似的问题同样出现在`PureIndexSreen`的单元测试中）。
+我们可以发现尽管 `error` story 运作正常，但因为 `TaskList` 没有连接相对应的 Pinia store，所以 `default` 的 story 出错了。（你同样会遇到类似的问题当试图对 `PureInboxScreen` 进行单元测试时）。
-
+
回避此问题的一种方法是永远不要在您应用中渲染容器组件，除非该组件是最高层组件，并且在最高层组件中自顶而下的传递所有需要的数据。
但是，开发人员**将会**不可避免的在下层结构中渲染容器组件。如果我们想要在 Storybook 中渲染应用中大部分或者全部的组件（我们想！），我们仍需要一个解决方案。
+-
-💡 需要说明的是，自顶而下的传递数据是一种合理的解决方案，尤其是使用GraphQL时。这也是我们在Chromatic中构建超过800个story的方式。
+💡 需要说明的是，自顶而下的传递数据是一种合理的解决方案，尤其是使用 GraphQL 时。这也是我们在 Chromatic 中构建超过 800 个 story 的方式。
## 在 story 中提供上下文
-好消息是对于 story 来说在`PureInboxScreen`中使用 Vuex store 十分容易！我们可以在 story 文件中创建一个新的 store 作为上下文：
+好消息是在 story 中的 `PureInboxScreen` 中使用 Pinia store 十分容易！我们可以更新 story 并直接导入在上一章中创建的 Pinia store。
```diff:title=src/components/PureInboxScreen.stories.js
+ import { app } from '@storybook/vue3';
-+ import { createStore } from 'vuex';
++ import { createPinia } from 'pinia';
-import PureInboxScreen from './PureInboxScreen.vue';
++ app.use(createPinia());
-+ import { action } from '@storybook/addon-actions';
-+ import * as TaskListStories from './PureTaskList.stories';
-
-+ const store = createStore({
-+ state: {
-+ tasks: TaskListStories.Default.args.tasks,
-+ },
-+ actions: {
-+ pinTask(context, id) {
-+ action("pin-task")(id);
-+ },
-+ archiveTask(context, id) {
-+ action("archive-task")(id);
-+ },
-+ },
-+ });
-
-+ app.use(store);
+import PureInboxScreen from './PureInboxScreen.vue';
export default {
title: 'PureInboxScreen',
@@ -199,7 +194,7 @@ export const Error = Template.bind({});
Error.args = { error: true };
```
-使用其他的，例如[Apollo](https://www.npmjs.com/package/apollo-storybook-decorator)，[Relay](https://github.com/orta/react-storybooks-relay-container) 或者别的库时也可以利用类似的方法模拟上下文。
+在其它库中也存在类似的方法提供模拟上下文，例如 [Apollo](https://www.npmjs.com/package/apollo-storybook-decorator)，[Relay](https://github.com/orta/react-storybooks-relay-container) 或者其他库。
在 Storybook 中遍历状态让我们可以轻松的测试应用的正确性：
@@ -211,9 +206,116 @@ Error.args = { error: true };
/>
+## 交互测试
+
+到目前为止，我们已经从头创建了一个功能齐全的应用，从简单组件到页面，并不断通过 story 来测试每个变动。但是每个新建的 story 需要手动检查其他所有 story 来确保 UI 没有崩溃。造成很多额外的工作。
+
+难道我们就不能将该流程自动化并自动对组件进行交互测试吗？
+
+### 通过 play 函数编写一个交互测试
+
+Storybook 的 [`play`](https://storybook.js.org/docs/vue/writing-stories/play-function) 和 [`@storybook/addon-interactions`](https://storybook.js.org/docs/vue/writing-tests/interaction-testing) 帮助我们解决上述问题。一个 play 函数包含 story 渲染之后的一小段代码。
+
+play 函数帮助我们验证当 task 更新后 UI 的变化。它使用与框架无关的 DOM API，这意味着不管什么框架，我们都可以通过编写 story 的 play 函数来与 UI 进行交互并模拟人类行为。
+
+`@storybook/addon-interactions` 帮助我们在 Storybok 中可视化我们的测试，提供一个循序渐进的流程。它还提供了一些方便的 UI 控件，可以暂停、恢复、倒带并逐步完成每个交互。
+
+让我们来看看它的实际应用，更新你新创建的 `PureInboxScreen` 文件，并通过添加以下内容来创建组件交互：
+
+```diff:title=src/components/PureInboxScreen.stories.js
+import { app } from '@storybook/vue3';
+
++ import { fireEvent, within } from '@storybook/testing-library';
+
+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,
+ };
+ },
+ template: '
+💡 使用 play 函数的交互测试时测试 UI 组件的绝佳方式。它能做的远比目前看到的多；我们推荐您阅读官方文档进行深入了解。
+
+为了深入了解测试，请查看测试手册。它涵盖了缩放前端（scaled-front-end）团队所使用的测试策略，以增强您的开发工作流程。 +
+
+
+
+成功了！现在我们拥有一个工具，可以帮助我们检查所有的 story 渲染是否出错，并且所有的断言是否自动通过。更重要的是，如果一个测试失败了，它将会提供一个链接，该链接可以在浏览器打开失败的 story。
+
## 组件驱动开发
-我们以`Task`起步，进一步实现`TaskList`，现在我们创建了整个页面的 UI。我们的`InboxScreen`包括了一个嵌套容器组件，以及一系列相关联的 story。
+我们以 `Task` 起步，进一步实现了 `TaskList`，现在我们创建了整个页面的 UI。我们的 `InboxScreen` 包括了一个嵌套容器组件，以及一系列相关联的 story。
-[**组件驱动开发**](https://www.componentdriven.org/)让您可以一步步的在升级组件结构的同时扩展应用的复杂性。同时也使得我们可以更专注于开发本身，并提高对所有可能的 UI 排列组合的覆盖率。简而言之，CDD 帮助您创建了高质量以及更复杂的 UI。
+[**组件驱动开发**](https://www.componentdriven.org/)让您可以一步步的在升级组件结构的同时扩展应用的复杂性。同时也使得我们可以更专注于开发本身，并提高对所有可能的 UI 排列组合的覆盖率。简而言之，CDD 帮助您创建了高质量以及更复杂的交互界面。
我们还没有完全结束 - 光创建 UI 是不够的。我们仍需要保证应用的耐用性。
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 21884274d..53592bf3b 100644
--- a/content/intro-to-storybook/vue/zh-CN/simple-component.md
+++ b/content/intro-to-storybook/vue/zh-CN/simple-component.md
@@ -16,42 +16,42 @@ commit: '6cb2cb5'
- `title` – 描述任务的字符串
- `state` - 当前任务所在列表，以及其是否被选中？
-在我们构建`Task`之前，首先我们根据上述的草图编写测试所需的状态(state)。然后我们使用 Storybook 模拟数据并独立的构建组件。我们可以“视觉测试”自己设定好状态的组件外观。
-
-这个过程有点像[驱动测试开发](https://en.wikipedia.org/wiki/Test-driven_development) (TDD) 所以我们可以称之为“[Visual TDD](https://www.chromatic.com/blog/visual-test-driven-development)”
+在我们构建`Task`之前，首先我们根据上述的草图编写测试所需的状态(state)。然后我们使用 Storybook 模拟数据并独立的构建组件。我们可以“视觉测试”组件在每个状态下的外观。
## 开始设置
首先，让我们创建 task 组件以及它相关的 story 文件：`src/components/Task.vue` 和 `src/components/Task.stories.js`。
-首先我们使用已知将会用到的属性为基础实现一个最基本的`Task`：
+我们将从 `Task` 的基础实现开始，简单传入我们所需要的属性和需要对任务执行的两个操作（在列表之间移动它）：
```html:title=src/components/Task.vue
+为了深入了解测试，请查看测试手册。它涵盖了缩放前端（scaled-front-end）团队所使用的测试策略，以增强您的开发工作流程。 +
-
+
```
-如上所示，我们直接基于现有的 Todos 应用的 HTML 结构创建一个`Task`。
+如上所示，我们基于 Todos 应用程序现有的 HTML 结构为 `Task` 直接渲染 markup。
-如下，我们在 story 文件中创建 Task 的三个不同测试状态：
+如下所示，我们在 story 文件中创建 Task 的三个不同测试状态：
```js:title=src/components/Task.stories.js
import Task from './Task.vue';
@@ -88,7 +88,6 @@ Default.args = {
id: '1',
title: 'Test Task',
state: 'TASK_INBOX',
- updatedAt: new Date(2018, 0, 1, 9, 0),
},
};
@@ -112,43 +111,47 @@ Archived.args = {
Storybook 有两个基本的组织级别：组件和他的 story。可以将每个 story 视作其组件的排列组合。您可以根据需要给每一个组件创建任意个 story。
- **组件**
+
- Story
+
- Story
+
- Story
-我们创建了一个`default`来提示 Storybook 我们正在文档化的组件：
+为了告诉 Storybook 我们正在文档化的组件，我们创建了一个 `default` 的默认导出，其中包含：
-- `component` -- 组件本身,
-- `title` -- 在 Storybook 应用侧边栏的显示,
-- `excludeStories` -- story 本身需要但是不用在 Storybook 应用中渲染的信息。
+- `component` -- 组件本身
+- `title` -- 如何在 Storybook 应用侧边栏中引用组件
+- `excludeStories` -- story 本身需要但是不用在 Storybook 应用中渲染的信息
+- `argTypes` -- 在每个 story 中具体说明 [args](https://storybook.js.org/docs/vue/api/argtypes) 的行为
-我们为每一个我们需要测试的状态导出一个函数，以此来定义我们的 story。Story 实际上就是一个根据给定的状态返回已渲染元素的函数---就像是[函数式组件](https://vuejs.org/v2/guide/render-function.html#Functional-Components)那样。
+为了定义我们的 stories，我们为每个测试状态导出一个函数用于生成一个 story。Story 实际上就是一个根据给定的状态返回已渲染元素（例如：一个具有一组 props 的类组件）的函数---就像是[函数式组件](https://vuejs.org/v2/guide/render-function.html#Functional-Components)。
-因为我们的组件存在多种排列组合，所以设置一个`Template`变量不失为一种便捷的做法。使用这样的模式来创建您的 Story 可以大量减少代码量和维护成本。
+因为我们的组件存在多种排列组合，所以设置一个 `Template` 变量不失为一种便捷的做法。使用这样的模式来创建您的 Story 可以大量减少代码量和维护成本。
💡
-Arguments 或者简写[`args`](https://storybook.js.org/docs/vue/writing-stories/args) , 让我们可以在不重启 Storybook 的前提下实时编辑我们的组件。只要 [`args`](https://storybook.js.org/docs/vue/writing-stories/args) 的值被修改我们的组件也会相应的更新。
+Arguments 或者简写 [`args`](https://storybook.js.org/docs/vue/writing-stories/args) ，让我们可以在不重启 Storybook 的前提下实时编辑我们的组件。一旦 [`args`](https://storybook.js.org/docs/vue/writing-stories/args) 的值被修改我们的组件也会进行相应的更新。
-我们创建了一个最基本的`task`变量来描述 task 组件应该呈现的样子。这通常是根据真实数据来进行建模的。同时，`导出`此 task 也让我们在以后编写其他 story 时可以复用它，详见下文。
+当创建一个 story，我们使用一个基本的 `task` 变量来构建 task 组件所期望的形状。通常是根据真实数据来进行建模的。
-`action()`使我们可以创建一个回调函数，当点击事件触发时 Storybook UI 的**actions**面板会显示结果。所以如果我们创建了一个 pin 按钮，我们就可以通过面板清楚的知道按钮是否被成功点击了。
+`actions` 允许我们创建 Storybook UI 的 **actions** 面板被点击时显示的回调。因此当我们构建一个 pin button 时，我们能够在 UI 上验证 button 点击是否成功。
-考虑到我们需要为组件的每一个排列组合都传入同样的 actions，通常的便捷做法是将他们合并到一个`actionsData`变量中，并传入给每一个定义好的 story 中。
+由于我们需要将相同的一组 actions 传入到组件的所有排列组合中，将它们合并到一个 `actionsData` 变量中，并在我们每次定义 story 的时候传入将会变得非常方便。
-值得一提的是当我们将组件所需的操作都合并到`actionsData`之后，我们可以在其他组件复用此组件时，让其他组件的 story 也可以复用`导出`的`actionsData`，详见下文。
+值得一提的是当我们将组件所需的操作都合并到 `actionsData` 之后，我们可以在其他组件复用此组件时，让其他组件的 story 也可以复用 `export` 的 `actionsData`，详见下文。
## 配置
-我们需要对 Storybook 的配置做几处修改，这样其不仅可以识别到近期创建的 story，同时还允许我们可以使用应用的 CSS 文件（在`sec/index.css`）。
+我们需要对 Storybook 的配置做几处修改，这样不仅可以识别到近期创建的 story，并且允许我们使用应用程序的 CSS 文件（位于 `src/index.css`）。
-如下修改您的 Storybook 配置文件(`.storybook/main.js`)：
+首先，修改您的 Storybook 配置文件(`.storybook/main.js`) 为以下内容：
```diff:title=.storybook/main.js
module.exports = {
@@ -157,11 +160,23 @@ module.exports = {
- '../src/**/*.stories.@(js|jsx|ts|tsx)'
- ],
+ stories: ['../src/components/**/*.stories.js'],
- addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+ staticDirs: ['../public'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ ],
+ framework: '@storybook/vue3',
+ core: {
+ builder: '@storybook/builder-webpack5',
+ },
+ features: {
+ interactionsDebugger: true,
+ },
};
```
-完成上述的修改后，如下所示修改您`.storybook`文件夹中的`preview.js` ：
+完成上述的修改后，修改位于 `.storybook`文件夹中的 `preview.js` 为以下内容：
```diff:title=.storybook/preview.js
+ import '../src/index.css';
@@ -169,14 +184,20 @@ module.exports = {
//👇 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$/,
+ },
+ },
};
```
-[`parameters`](https://storybook.js.org/docs/vue/writing-stories/parameters) 通常用来控制 Storybook 中特性和插件的行为。在我们的例子中我们使用它们来配置`actions`(模拟的回掉)该如何被处理。
+[`parameters`](https://storybook.js.org/docs/vue/writing-stories/parameters) 通常用来控制 Storybook 功能和插件的行为。在我们的例子中，我们使用它们来配置 `actions` （模拟回调）如何被处理。
-`actions`允许我们创建回调来决定当点击事件发生时 Storybook UI 的**actions**面板将如何显示。这样当我们创建了一个 pin 按钮后，我们就可以在测试 UI 中查看该按钮是否被点击成功了。
+`actions` 允许我们创建 Storybook UI 的 **actions** 面板被点击时显示的回调。因此当我们构建一个 pin button 时，我们能够在 UI 上验证 button 点击是否成功。
-完成了上述配置后重启 Storybook 服务器，Task 的三种状态的测试用例应该就生成完毕了：
+当我们完成这些，重启 Storybook 服务将会生成三种 Task 状态的测试用例：
Template.bind({}) 是 标准JavaScript 中用来复制函数的技术。我们使用这项技术保证了在使用同一份实现的同时，让每一个导出的story可以配置自己的属性。