插件

Storybook 拥有强大的插件生态系统，您可以使用它们来增强团队中每个人的开发者体验。 此处查看所有插件。

如果您一直在关注本教程，您已经遇到过多个插件，并在测试章节中设置了一个。

每个可能的用例都有插件，要写完所有插件将需要很长时间。 让我们集成最流行的插件之一：Controls。

什么是 Controls？

Controls 允许设计师和开发者通过摆弄组件的参数来轻松探索组件行为。 无需代码。 Controls 会在您的 Story 旁边创建一个插件面板，以便您可以实时编辑它们的参数。

全新安装的 Storybook 开箱即用，包含 Controls。 无需额外配置。

插件解锁新的 Storybook 工作流程

Storybook 是一个出色的组件驱动的开发环境。 Controls 插件将 Storybook 演变为交互式文档工具。

使用 Controls 查找边缘案例

借助 Controls，QA 工程师、UI 工程师或任何其他利益干系人都可以将组件推向极限！ 考虑到以下示例，如果我们添加一个 超长 字符串，我们的 Task 会发生什么？

这不对！ 看起来文本溢出 Task 组件的边界。

Controls 使我们能够快速验证组件的不同输入（在本例中，是一个长字符串），并减少了发现 UI 问题所需的工作量。

现在，让我们通过向 Task.tsx 添加样式来修复溢出问题

import type { TaskData } from '../types';

type TaskProps = {
  /** Composition of the task */
  task: TaskData;
  /** Event to change the task to archived */
  onArchiveTask: (id: string) => void;
  /** Event to change the task to pinned */
  onPinTask: (id: string) => void;
};

export default function Task({
  task: { id, title, state },
  onArchiveTask,
  onPinTask,
}: TaskProps) {
  return (
    <div className={`list-item ${state}`}>
      <label
        htmlFor={`archiveTask-${id}`}
        aria-label={`archiveTask-${id}`}
        className="checkbox"
      >
        <input
          type="checkbox"
          disabled={true}
          name="checked"
          id={`archiveTask-${id}`}
          checked={state === "TASK_ARCHIVED"}
        />
        <span className="checkbox-custom" onClick={() => onArchiveTask(id)} />
      </label>

      <label htmlFor={`title-${id}`} aria-label={title} className="title">
        <input
          type="text"
          value={title}
          readOnly={true}
          name="title"
          id={`title-${id}`}
          placeholder="Input title"
+         style={{ textOverflow: "ellipsis" }}
        />
      </label>
      {state !== "TASK_ARCHIVED" && (
        <button
          className="pin-button"
          onClick={() => onPinTask(id)}
          id={`pinTask-${id}`}
          aria-label={`pinTask-${id}`}
          key={`pinTask-${id}`}
        >
          <span className={`icon-star`} />
        </button>
      )}
    </div>
  );
}

问题已解决！ 文本现在在到达 Task 区域的边界时被截断，并使用美观的省略号。

添加新的 Story 以避免回归

将来，我们可以通过 Controls 手动重现此问题。 但更简单的方法是编写一个 Story 来展示此边缘案例。 这扩大了我们的回归测试覆盖率，并为团队的其他成员清楚地概述了组件的限制。

在 Task.stories.tsx 中为长文本案例添加新的 Story

const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;

export const LongTitle: Story = {
  args: {
    task: {
      ...Default.args.task,
      title: longTitleString,
    },
  },
};

现在我们可以轻松重现和处理此边缘案例。

如果我们正在进行可视化测试，如果截断解决方案中断，我们也会收到通知。 如果没有测试覆盖，极端边缘案例很容易被遗忘！

合并更改

不要忘记使用 git 合并您的更改！