makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

test: add E2E tests for dashboard and collection views

Browse Source 
Covers dashboard card rendering (item count, nav links, active thread/setup counts)
and collection page (gear display, search, category filter, tab switching).
Updates playwright config to serve production build with pre-seeded test DB.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-04-03 16:14:07 +02:00
parent ecbfbc00e9
commit 60db8bd9de
4 changed files with 151 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
e2e/collection.spec.ts Normal file
View File

@@ -0,0 +1,89 @@
import { expect, test } from "@playwright/test";
test.describe("Collection page", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/collection");
await page.waitForLoadState("networkidle");
});
test.describe("Gear tab", () => {
test("shows seeded items", async ({ page }) => {
await expect(page.getByText("Zpacks Duplex")).toBeVisible();
await expect(page.getByText("BRS-3000T Stove")).toBeVisible();
});
test("search filters items by name", async ({ page }) => {
const searchInput = page.getByPlaceholder("Search items...");
await searchInput.fill("Zpacks");
await expect(page.getByText("Zpacks Duplex")).toBeVisible();
// Other items should not be visible
await expect(page.getByText("BRS-3000T Stove")).not.toBeVisible();
});
test("clearing search restores all items", async ({ page }) => {
const searchInput = page.getByPlaceholder("Search items...");
await searchInput.fill("Zpacks");
await expect(page.getByText("BRS-3000T Stove")).not.toBeVisible();
// Clear the search
await searchInput.clear();
await expect(page.getByText("BRS-3000T Stove")).toBeVisible();
});
test("category filter dropdown opens and lists categories", async ({
page,
}) => {
const filterButton = page.getByRole("button", {
name: /all categories/i,
});
await filterButton.click();
// Dropdown list (ul) contains the category options
const dropdown = page.locator("ul");
await expect(
dropdown.getByRole("button", { name: "Shelter" }),
).toBeVisible();
await expect(
dropdown.getByRole("button", { name: "Cook Kit" }),
).toBeVisible();
});
test("category filter shows only items in selected category", async ({
page,
}) => {
// Open filter dropdown
const filterButton = page.getByRole("button", {
name: /all categories/i,
});
await filterButton.click();
// Select "Shelter" from the dropdown list
const dropdown = page.locator("ul");
await dropdown.getByRole("button", { name: "Shelter" }).click();
await expect(page.getByText("Zpacks Duplex")).toBeVisible();
// Items from other categories should not be visible
await expect(page.getByText("BRS-3000T Stove")).not.toBeVisible();
});
});
test.describe("Tab switching", () => {
test("navigates to planning tab", async ({ page }) => {
await page.goto("/collection?tab=planning");
await page.waitForLoadState("networkidle");
// Planning tab shows the active thread
await expect(page.getByText("New Backpack")).toBeVisible();
});
test("navigates to setups tab", async ({ page }) => {
await page.goto("/collection?tab=setups");
await page.waitForLoadState("networkidle");
// Setups tab shows the seeded setup
await expect(page.getByText("Weekend Overnighter")).toBeVisible();
});
test("gear tab is default and shows items", async ({ page }) => {
// Default tab (no ?tab param) shows gear
await expect(page.getByText("Zpacks Duplex")).toBeVisible();
});
});
});