diff --git a/frontend/src/components/maps/LocationMapStateViews.jsx b/frontend/src/components/maps/LocationMapStateViews.jsx index e51cdb4..bf5f890 100644 --- a/frontend/src/components/maps/LocationMapStateViews.jsx +++ b/frontend/src/components/maps/LocationMapStateViews.jsx @@ -11,13 +11,9 @@ export function LocationMapMessageState({ message, location, status = "Loading",

{status}

-
+
- Status - {status} -
-
- Detail + Message {message}
@@ -34,13 +30,9 @@ export function LocationMapLoadErrorState({ location, loadError, onBack, onRetry

Map Unavailable

-
+
- Status - Load failed -
-
- Detail + Error {loadError}
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts index d3d4a57..9aaa9da 100644 --- a/frontend/tests/location-map-manager.spec.ts +++ b/frontend/tests/location-map-manager.spec.ts @@ -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();