章節

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 執行視覺化測試將會捕捉到這些變更。它也將確保所有項目仍然正確連接。

當您建立 pull request 時，Chromatic 將會自動觸發。完成後，您將看到差異以供檢閱。在這種情況下，這些變更是有意的。按下「接受」按鈕以更新基準。

可及性測試

開發期間

在開發期間於 Storybook 內執行可及性檢查。A11y addon 使用 Axe 來稽核活動中的 story，並在 addon 面板中顯示報告。快速瀏覽即可確認我們的 stories 中沒有任何違規事項。

PR 檢查

為了捕捉迴歸錯誤，您需要在所有元件上執行測試。您可以透過將 stories 匯入到測試檔案中，然後使用 jest-axe 執行可及性稽核來完成此操作。所有違規事項都將回報到 PR 頁面。

元件測試

使用者可以透過點擊垃圾桶按鈕來刪除任務，我們需要加入一個測試來驗證此行為。

開發期間

在開發期間，使用 InboxScreen stories 手動驗證互動。如果它如預期般運作，您可以使用 play function 加入元件測試。

複製

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 如何在監看模式下執行，並且只執行與已變更檔案相關的測試。