章节

UI 测试剧本

一个不会拖慢你的测试工作流程

很容易找到测试 UI 不同部分的工具。但是，知道如何将它们组合成高效的工作流程是很棘手的。如果你弄错了，它会螺旋式地变成一场维护噩梦。

我们的工作流程通过重用 stories 作为测试用例来减轻维护负担。此外，通过在组件级别进行测试，我们可以更快地发现错误。

本章演示了整个 UI 测试工作流程，方法是添加删除任务的功能。

构建

Task 组件已经允许用户编辑、固定和归档任务。我们将添加一个删除按钮，并将其连接到应用程序状态以添加删除功能。

对于此演示，让我们直接跳到你准备好进行测试的点。下载更新的文件并将它们放在 /src 目录中

视觉和组合测试

首先，我们将确保更新的 UI 样式与规范匹配。Task 组件现在需要 onDeleteTask 属性来处理删除。让我们在 Task stories 中模拟该操作。

复制

src/components/Task.stories.jsx

import Task from './Task';

export default {
  component: Task,
  title: 'Task',
  argTypes: {
    onArchiveTask: { action: 'onArchiveTask' },
    onTogglePinTask: { action: 'onTogglePinTask' },
    onEditTitle: { action: 'onEditTitle' },
+   onDeleteTask: { action: 'onDeleteTask' },
  },
};

开发期间

你可以使用 Storybook 专注于 Task 组件，而无需启动整个应用程序。然后循环浏览其所有 stories 以手动验证其外观。

PR 检查

对 Task UI 的调整可能会导致使用它的其他组件（TaskList 和 InboxScreen）中出现意外更改。使用 Chromatic 运行视觉测试将捕获这些更改。它还将确保一切仍然正确连接。

当你创建拉取请求时，Chromatic 将自动触发。完成后，你将看到一个差异以供审查。在这种情况下，更改是故意的。按下接受按钮以更新基线。

可访问性测试

开发期间

在开发期间在 Storybook 中运行可访问性检查。A11y 插件使用 Axe 审核活动的 story，并在插件面板中显示报告。快速浏览确认我们的 stories 中没有任何违规行为。

PR 检查

要捕获回归，你需要对所有组件运行测试。你可以通过将 stories 导入到测试文件中，然后使用 jest-axe 运行可访问性审核来做到这一点。所有违规行为都将报告回 PR 页面。

组件测试

用户可以通过单击垃圾桶按钮来删除任务，我们需要添加一个测试来验证该行为。

开发期间

在开发期间，使用 InboxScreen stories 手动验证交互。如果它按预期工作，你可以使用 play 函数添加组件测试。

复制

src/InboxScreen.stories.jsx

// ... code omitted for brevity ...

export const DeleteTask = {
  parameters: {
    ...Default.parameters,
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const getTask = (id) => canvas.findByRole('listitem', { name: id });

    const itemToDelete = await getTask('task-1');
    const deleteButton = await findByRole(itemToDelete, 'button', {
      name: 'delete',
    });

    // Click the delete button
    await userEvent.click(deleteButton);
    await expect(canvas.getAllByRole('listitem').length).toBe(5);
  },
};

运行 yarn run test-storybook 以确认所有测试均通过。请注意 Jest 如何在监视模式下运行，并且仅执行与已更改文件相关的测试。