{error}
) + await expect(page.locator(".text-red-600")).toBeVisible({ timeout: 5000 }); + }); +}); diff --git a/e2e/error-handling.spec.ts b/e2e/error-handling.spec.ts new file mode 100644 index 0000000..4dda58f --- /dev/null +++ b/e2e/error-handling.spec.ts @@ -0,0 +1,59 @@ +import { expect, test } from "@playwright/test"; + +test.describe("Error handling — non-existent routes", () => { + test("non-existent thread does not white-screen", async ({ page }) => { + await page.goto("/threads/99999"); + + // React Query retries failed requests (default 3 times with backoff) before + // setting isError=true. Wait for the page to leave loading state and show content. + // The thread detail page renders "Thread not found" + "Back to planning" link on error. + await expect(page.getByText("Back to planning")).toBeVisible({ + timeout: 30000, + }); + await expect(page.getByText("Thread not found")).toBeVisible({ + timeout: 5000, + }); + }); + + test("non-existent setup does not white-screen", async ({ page }) => { + await page.goto("/setups/99999"); + await page.waitForLoadState("networkidle"); + + // Setup detail shows "Setup not found." when data is null (no retry — isLoading=false, data=undefined) + // The setup query resolves with undefined rather than throwing for missing items. + // Check that the page has content (not a blank screen). + const body = page.locator("body"); + await expect(body).not.toBeEmpty(); + + // Navigation header should be visible (app did not crash) + await expect(page.getByText("GearBox")).toBeVisible({ timeout: 5000 }); + + // Wait for setup data to load; it will show "Setup not found." when done + await expect(page.getByText("Setup not found.")).toBeVisible({ + timeout: 30000, + }); + }); + + test("app recovers after bad route — dashboard loads fine", async ({ + page, + }) => { + // Navigate to a non-existent thread first + await page.goto("/threads/99999"); + + // The page should render without crashing — wait for the error state + // (React Query retries before showing isError state, so use a long timeout) + await expect(page.getByText("Back to planning")).toBeVisible({ + timeout: 30000, + }); + + // Now navigate to the dashboard + await page.goto("/"); + await page.waitForLoadState("networkidle"); + + // Dashboard should load normally + await expect(page.getByText("GearBox")).toBeVisible({ timeout: 5000 }); + await expect(page.getByRole("heading", { name: "Collection" })).toBeVisible( + { timeout: 5000 }, + ); + }); +}); diff --git a/e2e/threads.spec.ts b/e2e/threads.spec.ts new file mode 100644 index 0000000..a75b041 --- /dev/null +++ b/e2e/threads.spec.ts @@ -0,0 +1,113 @@ +import { expect, test } from "@playwright/test"; + +test.describe("Thread detail page", () => { + test("loads with candidates visible", async ({ page }) => { + await page.goto("/collection?tab=planning"); + await page.waitForLoadState("networkidle"); + + // Click the "New Backpack" thread card + await page.getByText("New Backpack").click(); + await page.waitForLoadState("networkidle"); + + // Thread detail page should show the thread name + await expect( + page.getByRole("heading", { name: "New Backpack" }), + ).toBeVisible({ timeout: 5000 }); + + // Candidates should be visible + await expect(page.getByText("ULA Circuit")).toBeVisible({ timeout: 5000 }); + await expect(page.getByText("Gossamer Gear Mariposa")).toBeVisible({ + timeout: 5000, + }); + await expect(page.getByText("Granite Gear Crown2 38")).toBeVisible({ + timeout: 5000, + }); + }); + + test("rank badges are visible for top 3 candidates", async ({ page }) => { + await page.goto("/collection?tab=planning"); + await page.waitForLoadState("networkidle"); + + await page.getByText("New Backpack").click(); + await page.waitForLoadState("networkidle"); + + // Rank badges are medal icons — the component renders LucideIcon with name="medal" + // for ranks 1, 2, 3. We can verify via SVG elements or by checking the page has + // the expected number of medal icons (one per top candidate). + // The list view is default, which renders CandidateListItem with RankBadge. + // With 3 candidates all in top 3, all 3 get medal icons. + await expect(page.locator("text=ULA Circuit")).toBeVisible({ + timeout: 5000, + }); + await expect(page.locator("text=Gossamer Gear Mariposa")).toBeVisible({ + timeout: 5000, + }); + await expect(page.locator("text=Granite Gear Crown2 38")).toBeVisible({ + timeout: 5000, + }); + + // Verify candidates are rendered (rank badges are SVG medals, not text) + // Check that at least the 3 candidates are present in the list + const candidateRows = page.locator(".bg-white.rounded-xl.border"); + await expect(candidateRows).toHaveCount(3, { timeout: 5000 }); + }); + + test("comparison view toggle works", async ({ page }) => { + await page.goto("/collection?tab=planning"); + await page.waitForLoadState("networkidle"); + + await page.getByText("New Backpack").click(); + await page.waitForLoadState("networkidle"); + + await expect(page.getByText("ULA Circuit")).toBeVisible({ timeout: 5000 }); + + // The compare button is a button with title="Compare view" (icon button with columns-3 icon) + const compareButton = page.getByRole("button", { name: "Compare view" }); + await expect(compareButton).toBeVisible({ timeout: 5000 }); + await compareButton.click(); + + // After clicking, a table should appear with Weight and Price row labels + await expect(page.locator("table")).toBeVisible({ timeout: 5000 }); + // The comparison table renders row labels in sticky