視覺化測試

我們使用 Loki 與 Storybook 進行視覺化測試。Loki 從選定的故事擷取快照，並在 ./loki/references 資料夾中建立 PNG 參考。

本機

在本機執行 Loki 測試之前，請確保 Storybook 和 Docker 都在執行中。

指令

• 執行視覺化測試：yarn test-visual:loki
• 更新快照：yarn test-visual:loki-update
• 產生 HTML 報告：yarn test-visual:loki-report
• 產生並開啟報告：yarn test-visual:loki-report-open

CI

視覺化測試會在提取請求時自動觸發。Loki CI 工作會建置 Storybook、擷取新快照，並將其與參考進行比較。如果存在差異，「Loki 視覺化迴歸測試」檢查將會失敗。

若要檢視視覺化差異報告，請開啟失敗的工作頁面，前往「摘要」區段，並下載 loki-report 成品。

如果差異是刻意的或由瑕疵引起，請新增 loki-update 標籤至提取請求，以更新參考快照。

新增測試

新增測試就像新增新故事一樣簡單。截至今日，我們僅對圖表使用視覺化測試，但是，您可以將其用於任何其他故事。請確保 loki.config.js 中的 storiesFilter 值包含您想要作為視覺化測試的故事。