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

fix: compact map state cards

Browse Source
This commit is contained in:
Nico 2026-06-04 17:59:24 -07:00
parent 5f1eb30080
commit a2db8cd655
2 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/maps/LocationMapStateViews.jsx
View File

@ -11,13 +11,9 @@ export function LocationMapMessageState({ message, location, status = "Loading",
<main className="location-map-workspace location-map-message-workspace">
<section className="location-map-setup location-map-message-card" aria-live="polite">
<h2>{status}</h2>
<div className="location-map-setup-rows" role="group" aria-label="Map message status">
<div className="location-map-setup-rows" role="group" aria-label="Map message details">
<div className="location-map-setup-row">
<span>Status</span>
<strong>{status}</strong>
</div>
<div className="location-map-setup-row">
<span>Detail</span>
<span>Message</span>
<strong>{message}</strong>
</div>
</div>
@ -34,13 +30,9 @@ export function LocationMapLoadErrorState({ location, loadError, onBack, onRetry
<main className="location-map-workspace">
<section className="location-map-setup location-map-load-error" role="alert" aria-live="polite">
<h2>Map Unavailable</h2>
<div className="location-map-setup-rows" role="group" aria-label="Map load status">
<div className="location-map-setup-rows" role="group" aria-label="Map load details">
<div className="location-map-setup-row">
<span>Status</span>
<strong>Load failed</strong>
</div>
<div className="location-map-setup-row">
<span>Detail</span>
<span>Error</span>
<strong>{loadError}</strong>
</div>
</div>

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

@ -465,9 +465,10 @@ test("map message prompts for a household with compact status rows", async ({ pa
await page.goto("/stores/100/locations/10/map");
await expect(page.getByRole("heading", { name: "Select Household" })).toBeVisible();
const messageStatus = page.getByRole("group", { name: "Map message status" });
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Status" })).toContainText("Select Household");
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Detail" })).toContainText("Select a household to manage maps.");
const messageDetails = page.getByRole("group", { name: "Map message details" });
await expect(messageDetails.locator(".location-map-setup-row")).toHaveCount(1);
await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Message" })).toContainText("Select a household to manage maps.");
await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
await expect(page.getByLabel("Map controls")).toHaveCount(0);
});
@ -517,9 +518,10 @@ test("load failure shows retryable error instead of no-map setup", async ({ page
const errorCard = page.locator(".location-map-load-error");
await expect(errorCard.getByRole("heading", { name: "Map Unavailable" })).toBeVisible();
const loadStatus = errorCard.getByRole("group", { name: "Map load status" });
await expect(loadStatus.locator(".location-map-setup-row", { hasText: "Status" })).toContainText("Load failed");
await expect(loadStatus.locator(".location-map-setup-row", { hasText: "Detail" })).toContainText("Map service unavailable");
const loadDetails = errorCard.getByRole("group", { name: "Map load details" });
await expect(loadDetails.locator(".location-map-setup-row")).toHaveCount(1);
await expect(loadDetails.locator(".location-map-setup-row", { hasText: "Error" })).toContainText("Map service unavailable");
await expect(loadDetails.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
await expect(errorCard.locator("p")).toHaveCount(0);
await expect(page.getByText("Load Error")).toBeVisible();
await expect(page.getByRole("heading", { name: "No Map" })).toHaveCount(0);
@ -585,9 +587,10 @@ test("loading map keeps location context visible", async ({ page }) => {
await expect(page.getByText("Eastvale")).toBeVisible();
await expect(page.getByRole("button", { name: "Back to grocery list" })).toBeVisible();
await expect(page.locator(".location-map-status")).toHaveText("Loading");
const messageStatus = page.getByRole("group", { name: "Map message status" });
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Status" })).toContainText("Loading");
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Detail" })).toContainText("Loading map...");
const messageDetails = page.getByRole("group", { name: "Map message details" });
await expect(messageDetails.locator(".location-map-setup-row")).toHaveCount(1);
await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Message" })).toContainText("Loading map...");
await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
releaseMapResponse();