nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: expose map overview sections

Browse Source
This commit is contained in:
Nico 2026-06-15 23:08:31 -07:00
parent 32a4724858
commit 35ce919cd2
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/maps/LocationMapBottomSheetSections.jsx
View File

@ -100,7 +100,7 @@ export function LocationMapLayerPanel({ filters, setFilters }) {
export function LocationMapOverview({ ariaLabel, rows }) { export function LocationMapOverview({ ariaLabel, rows }) {
return ( return (
<div className="location-map-overview" aria-label={ariaLabel}> <div className="location-map-overview" role="group" aria-label={ariaLabel}>
{rows.map((row) => ( {rows.map((row) => (
<div className="location-map-overview-row" key={row.label}> <div className="location-map-overview-row" key={row.label}>
<span>{row.label}</span> <span>{row.label}</span>

20
frontend/tests/location-map-manager.spec.ts
View File

@ -1713,7 +1713,7 @@ test("admin selecting an object does not mark a draft dirty until it changes", a
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Continue Editing" }).click(); await page.getByRole("button", { name: "Continue Editing" }).click();
const summary = page.getByLabel("Draft map summary"); const summary = page.getByRole("group", { name: "Draft map summary" });
await expect(summary.locator(".location-map-overview-row")).toHaveCount(1); await expect(summary.locator(".location-map-overview-row")).toHaveCount(1);
await expect(summary.locator(".location-map-overview-row", { hasText: "Areas" }).locator("strong")).toHaveText("1"); await expect(summary.locator(".location-map-overview-row", { hasText: "Areas" }).locator("strong")).toHaveText("1");
await expect(summary.locator(".location-map-overview-row", { hasText: "Hidden" })).toHaveCount(0); await expect(summary.locator(".location-map-overview-row", { hasText: "Hidden" })).toHaveCount(0);
@ -1927,7 +1927,7 @@ test("admin edit mode summarizes draft areas before selection", async ({ page })
await page.getByRole("button", { name: "Continue Editing" }).click(); await page.getByRole("button", { name: "Continue Editing" }).click();
const summary = page.getByLabel("Draft map summary"); const summary = page.getByRole("group", { name: "Draft map summary" });
const areasRow = summary.locator(".location-map-overview-row", { hasText: "Areas" }); const areasRow = summary.locator(".location-map-overview-row", { hasText: "Areas" });
const hiddenRow = summary.locator(".location-map-overview-row", { hasText: "Hidden" }); const hiddenRow = summary.locator(".location-map-overview-row", { hasText: "Hidden" });
const unlinkedRow = summary.locator(".location-map-overview-row", { hasText: "Unlinked" }); const unlinkedRow = summary.locator(".location-map-overview-row", { hasText: "Unlinked" });
@ -1939,7 +1939,7 @@ test("admin edit mode summarizes draft areas before selection", async ({ page })
await page.getByRole("button", { name: "Map area Bakery" }).click(); await page.getByRole("button", { name: "Map area Bakery" }).click();
await expect(page.getByLabel("Draft map summary")).toHaveCount(0); await expect(page.getByRole("group", { name: "Draft map summary" })).toHaveCount(0);
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
}); });
@ -3249,7 +3249,7 @@ test("viewer shows a compact map overview before selecting an area", async ({ pa
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
const overview = page.getByLabel("Map summary"); const overview = page.getByRole("group", { name: "Map summary" });
const areasRow = overview.locator(".location-map-overview-row", { hasText: "Areas" }); const areasRow = overview.locator(".location-map-overview-row", { hasText: "Areas" });
const mappedRow = overview.locator(".location-map-overview-row", { hasText: "Mapped items" }); const mappedRow = overview.locator(".location-map-overview-row", { hasText: "Mapped items" });
const unmappedRow = overview.locator(".location-map-overview-row", { hasText: "Unmapped" }); const unmappedRow = overview.locator(".location-map-overview-row", { hasText: "Unmapped" });
@ -3263,7 +3263,7 @@ test("viewer shows a compact map overview before selecting an area", async ({ pa
await expect(unmappedRow.locator("strong")).toHaveText("1"); await expect(unmappedRow.locator("strong")).toHaveText("1");
await page.getByRole("button", { name: "Map area Bakery" }).click(); await page.getByRole("button", { name: "Map area Bakery" }).click();
await expect(page.getByLabel("Map summary")).toHaveCount(0); await expect(page.getByRole("group", { name: "Map summary" })).toHaveCount(0);
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
}); });
@ -3303,7 +3303,7 @@ test("viewer omits zero item rows from the map overview", async ({ page }) => {
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
const overview = page.getByLabel("Map summary"); const overview = page.getByRole("group", { name: "Map summary" });
await expect(overview.locator(".location-map-overview-row")).toHaveCount(1); await expect(overview.locator(".location-map-overview-row")).toHaveCount(1);
await expect(overview.locator(".location-map-overview-row", { hasText: "Areas" }).locator("strong")).toHaveText("1 shown"); await expect(overview.locator(".location-map-overview-row", { hasText: "Areas" }).locator("strong")).toHaveText("1 shown");
await expect(overview.locator(".location-map-overview-row", { hasText: "Mapped items" })).toHaveCount(0); await expect(overview.locator(".location-map-overview-row", { hasText: "Mapped items" })).toHaveCount(0);
@ -3431,7 +3431,7 @@ test("viewer can buy unmapped map items in place", async ({ page }) => {
}); });
await expect(page.locator(".confirm-buy-item-name")).toHaveText("paper plates"); await expect(page.locator(".confirm-buy-item-name")).toHaveText("paper plates");
await expect(page.getByText("loose batteries")).toHaveCount(0); await expect(page.getByText("loose batteries")).toHaveCount(0);
await expect(page.getByLabel("Map summary").locator(".location-map-overview-row", { hasText: "Unmapped" })).toContainText("1 shown"); await expect(page.getByRole("group", { name: "Map summary" }).locator(".location-map-overview-row", { hasText: "Unmapped" })).toContainText("1 shown");
await page.getByRole("button", { name: "Mark as Bought" }).click(); await page.getByRole("button", { name: "Mark as Bought" }).click();
@ -3443,10 +3443,10 @@ test("viewer can buy unmapped map items in place", async ({ page }) => {
}); });
await expect(page.locator(".confirm-buy-modal")).toHaveCount(0); await expect(page.locator(".confirm-buy-modal")).toHaveCount(0);
await expect(page.getByText("paper plates")).toHaveCount(0); await expect(page.getByText("paper plates")).toHaveCount(0);
await expect(page.getByLabel("Map summary").locator(".location-map-overview-row", { hasText: "Unmapped" })).toContainText("0 shown"); await expect(page.getByRole("group", { name: "Map summary" }).locator(".location-map-overview-row", { hasText: "Unmapped" })).toContainText("0 shown");
await page.getByRole("button", { name: "Bought" }).click(); await page.getByRole("button", { name: "Bought" }).click();
await expect(page.getByLabel("Map summary").locator(".location-map-overview-row", { hasText: "Unmapped" })).toContainText("2"); await expect(page.getByRole("group", { name: "Map summary" }).locator(".location-map-overview-row", { hasText: "Unmapped" })).toContainText("2");
const looseBatteriesRow = page.getByRole("button", { name: "loose batteries bought" }); const looseBatteriesRow = page.getByRole("button", { name: "loose batteries bought" });
const paperPlatesRow = page.getByRole("button", { name: "paper plates bought" }); const paperPlatesRow = page.getByRole("button", { name: "paper plates bought" });
await expect(looseBatteriesRow).toBeVisible(); await expect(looseBatteriesRow).toBeVisible();
@ -4422,7 +4422,7 @@ test("viewer map areas are keyboard selectable", async ({ page }) => {
await expect(frozenArea).toBeFocused(); await expect(frozenArea).toBeFocused();
await expect(frozenArea).toHaveAttribute("aria-pressed", "false"); await expect(frozenArea).toHaveAttribute("aria-pressed", "false");
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details");
await expect(page.getByLabel("Map summary")).toBeVisible(); await expect(page.getByRole("group", { name: "Map summary" })).toBeVisible();
}); });
test("mobile starts fitted and fit returns panned maps into the canvas", async ({ page }) => { test("mobile starts fitted and fit returns panned maps into the canvas", async ({ page }) => {