@acot/acot-runner-storybook 中文文档教程

Question

@acot/acot-runner-storybook

Storybook 的 acot 自定义跑步者。

@acot/acot-runner-storybook 抓取 Storybook 中的所有故事，并设置它们以供 acot 审核。

Installation

通过 npm 安装：

$ npm install --save-dev @acot/acot-runner-storybook

Usage

将 @acot/storybook 添加到 配置文件<的 runner 字段/a>。

{
  "runner": "@acot/storybook"
}

Custom config for each story

您可以将自定义配置传递到 Story 元数据中的 parameters.acot 字段，如下例所示：

// Component Story Format (CSF) Example:
export default {
  title: 'Button',
  component: Button,
  parameters: {
    acot: {
      rules: {
        '@acot/wcag/button-has-name': 'off',
      },
    },
  },
};

Options

include

Type: string[]
必需： false

要包含在审核目标中的故事名称模式。 有关模式字符串，请参阅 micromatch 文档。

{
  "runner": {
    "uses": "@acot/storybook",
    "with": {
      "include": ["*", "/atoms/**/*"]
    }
  }
}

exclude

类型： string[]
必需： false

要在审计目标中排除的故事名称模式。 有关模式字符串，请参阅 micromatch 文档。

{
  "runner": {
    "uses": "@acot/storybook",
    "with": {
      "exclude": ["/utils/**/*"]
    }
  }
}

timeout

类型： 数字
默认值： 60000
必需： false

等待浏览器实例收集故事的最长时间（以毫秒为单位）。

{
  "runner": {
    "uses": "@acot/storybook",
    "with": {
      "timeout": 120000
    }
  }
}

Storybook compatibility

Storybook versions

• [x] Storybook v5
• [ ] Storybook v6 (TODO)

UI frameworks

由于 @acot/acot-runner-storybook 不依赖于 React、Angular 或 Vue.js 等 UI 框架，因此它可以与您选择的任何 UI 框架结合使用！