构建一个简单组件

我们将遵循组件驱动开发 (CDD) 方法来构建我们的 UI。这是一个“自下而上”构建 UI 的过程，从组件开始，到屏幕结束。CDD 帮助您扩展在构建 UI 时面临的复杂性。

任务

Task 是我们应用程序的核心组件。每个任务的显示方式略有不同，具体取决于它所处的状态。我们显示一个选中（或未选中）的复选框、一些关于任务的信息和一个“固定”按钮，允许我们上下移动任务列表。综上所述，我们将需要以下属性

• title – 描述任务的字符串
• state - 任务当前在哪个列表中，以及是否已选中？

当我们开始构建 Task 时，我们首先编写与上面草图中的不同类型任务相对应的测试状态。然后我们使用 Storybook，使用模拟数据在隔离环境中创建组件。我们将手动测试组件在每种状态下的外观。

开始设置

首先，让我们创建任务组件及其配套的故事文件：src/components/Task.vue 和 src/components/Task.stories.js。

我们将从 Task 的基线实现开始，简单地接受我们知道需要的属性以及您可以对任务执行的两个操作（在列表之间移动它）

<template>
  <div class="list-item">
    <label for="title" :aria-label="task.title">
      <input type="text" readonly :value="task.title" id="title" name="title" />
    </label>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Task',
  props: {
    task: {
      type: Object,
      required: true,
      default: () => ({ id: '', state: '', title: '' }),
      validator: (task) => ['id', 'state', 'title'].every((key) => key in task)
    }
  }
}
</script>

上面，我们基于 Todos 应用程序的现有 HTML 结构为 Task 渲染了简单的标记。

下面我们在故事文件中构建 Task 的三个测试状态

import { fn } from '@storybook/test';

import Task from './Task.vue';

export const ActionsData = {
  onPinTask: fn(),
  onArchiveTask: fn(),
};

export default {
  component: Task,
  title: 'Task',
  tags: ['autodocs'],
  //👇 Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  args: {
    ...ActionsData
  }
};

export const Default = {
  args: {
    task: {
      id: '1',
      title: 'Test Task',
      state: 'TASK_INBOX',
    },
  },
};

export const Pinned = {
  args: {
    task: {
      ...Default.args.task,
      state: 'TASK_PINNED',
    },
  },
};

export const Archived = {
  args: {
    task: {
      ...Default.args.task,
      state: 'TASK_ARCHIVED',
    },
  },
};

Storybook 中有两个基本的组织级别：组件及其子故事。将每个故事视为组件的一种排列。每个组件可以根据需要拥有任意数量的故事。

• 组件
  • 故事
  • 故事
  • 故事

为了告诉 Storybook 我们正在记录的组件，我们创建一个包含以下内容的 default 导出

• component -- 组件本身
• title -- 如何在 Storybook 侧边栏中分组或分类组件
• tags -- 为我们的组件自动生成文档
• excludeStories-- 故事所需的其他信息，但不应在 Storybook 中呈现
• args -- 定义组件期望模拟自定义事件的操作 args

为了定义我们的故事，我们将使用 Component Story Format 3（也称为 CSF3）来构建我们的每个测试用例。此格式旨在以简洁的方式构建我们的每个测试用例。通过导出包含每个组件状态的对象，我们可以更直观地定义我们的测试，并更有效地编写和重用故事。

参数或 args 的缩写，允许我们使用控件插件实时编辑我们的组件，而无需重启 Storybook。一旦 args 值发生更改，组件也会随之更改。

fn() 允许我们创建一个回调，该回调在单击时出现在 Storybook UI 的操作面板中。因此，当我们构建一个固定按钮时，我们将能够确定 UI 中的按钮单击是否成功。

由于我们需要将相同的操作集传递给组件的所有排列，因此将它们捆绑到一个 ActionsData 变量中，并在每次故事定义时传递它们是很方便的。捆绑组件需要的 ActionsData 的另一个好处是，您可以 export 它们并将它们用于重用此组件的组件的故事中，我们稍后会看到。

在创建故事时，我们使用基本 task arg 来构建组件期望的任务的形状。通常从实际数据的外观建模而来。同样，export-ing 此形状将使我们能够在以后的故事中重用它，我们稍后会看到。

配置

我们需要对 Storybook 的配置文件进行一些更改，以便它注意到我们最近创建的故事，并允许我们使用应用程序的 CSS 文件（位于 src/index.css 中）。

首先，将您的 Storybook 配置文件 (.storybook/main.js) 更改为以下内容

/** @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: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
};
export default config;

完成上述更改后，在 .storybook 文件夹内，将您的 preview.js 更改为以下内容

+ import '../src/index.css';

//👇 Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
/** @type { import('@storybook/vue3').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

parameters 通常用于控制 Storybook 的功能和插件的行为。在我们的例子中，我们不会将它们用于此目的。相反，我们将导入应用程序的 CSS 文件。

完成此操作后，重启 Storybook 服务器应该会为三个 Task 状态生成测试用例

构建状态

现在我们已经设置了 Storybook，导入了样式，并构建了测试用例，我们可以快速开始实现组件的 HTML 以匹配设计。

该组件目前仍然是初步的。首先，编写实现设计的代码，而无需深入细节

<template>
  <div :class="classes">
    <label
      :for="'checked' + task.id"
      :aria-label="'archiveTask-' + task.id"
      class="checkbox"
    >
      <input
        type="checkbox"
        :checked="isChecked"
        disabled
        :name="'checked' + task.id"
        :id="'archiveTask-' + task.id"
      />
      <span class="checkbox-custom" @click="archiveTask" />
    </label>
    <label :for="'title-' + task.id" :aria-label="task.title" class="title">
      <input
        type="text"
        readonly
        :value="task.title"
        :id="'title-' + task.id"
        name="title"
        placeholder="Input title"
      />
    </label>
    <button
      v-if="!isChecked"
      class="pin-button"
      @click="pinTask"
      :id="'pinTask-' + task.id"
      :aria-label="'pinTask-' + task.id"
    >
      <span class="icon-star" />
    </button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Task',
  props: {
    task: {
      type: Object,
      required: true,
      default: () => ({ id: '', state: '', title: '' }),
      validator: task => ['id', 'state', 'title'].every(key => key in task),
    },
  },
  emits: ['archive-task', 'pin-task'],

  setup(props, { emit }) {
    props = reactive(props);
    return {
      classes: computed(() => ({
        'list-item TASK_INBOX': props.task.state === 'TASK_INBOX',
        'list-item TASK_PINNED': props.task.state === 'TASK_PINNED',
        'list-item TASK_ARCHIVED': props.task.state === 'TASK_ARCHIVED',
      })),
      /**
       * Computed property for checking the state of the task
       */
      isChecked: computed(() => props.task.state === 'TASK_ARCHIVED'),
      /**
       * Event handler for archiving tasks
       */
      archiveTask() {
        emit('archive-task', props.task.id);
      },
      /**
       * Event handler for pinning tasks
       */
      pinTask() {
        emit('pin-task', props.task.id);
      },
    };
  },
};
</script>

上面添加的标记与我们之前导入的 CSS 相结合，产生了以下 UI

组件已构建！

我们现在已经成功构建了一个组件，而无需服务器或运行整个前端应用程序。下一步是以类似的方式逐个构建其余的 Taskbox 组件。

如您所见，开始在隔离环境中构建组件既简单又快速。我们可以期望生产更高质量的 UI，错误更少，并且更精细，因为可以深入研究和测试每种可能的状态。

捕获可访问性问题

可访问性测试是指使用自动化工具根据基于 WCAG 规则和其他行业公认的最佳实践的一组启发式方法来审核渲染的 DOM 的实践。它们充当 QA 的第一道防线，以捕获明显的辅助功能违规行为，确保应用程序尽可能多的人可以使用，包括视力障碍、听力问题和认知障碍人士。

Storybook 包括一个官方的 可访问性插件。它由 Deque 的 axe-core 提供支持，可以捕获高达 57% 的 WCAG 问题。

让我们看看它是如何工作的！运行以下命令安装插件

yarn add --dev @storybook/addon-a11y

然后，更新您的 Storybook 配置文件 (.storybook/main.js) 以启用它

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
const config = {
  stories: ['../src/components/**/*.stories.js'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
+   '@storybook/addon-a11y',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
};
export default config;

最后，重启您的 Storybook 以在 UI 中看到新启用的插件。

在我们的故事中循环，我们可以看到该插件在一个测试状态中发现了一个可访问性问题。消息 “元素必须具有足够的颜色对比度” 本质上意味着任务标题和背景之间的对比度不足。我们可以通过在应用程序的 CSS 中（位于 src/index.css 中）将文本颜色更改为较深的灰色来快速修复它。

.list-item.TASK_ARCHIVED input[type="text"] {
- color: #a0aec0;
+ color: #4a5568;
  text-decoration: line-through;
}

就这样！我们已经迈出了确保 UI 变得可访问的第一步。当我们继续为应用程序添加复杂性时，我们可以为所有其他组件重复此过程，而无需启动其他工具或测试环境。