diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx index d2f860f..8743896 100644 --- a/frontend/src/components/maps/LocationMapBottomSheet.jsx +++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx @@ -81,6 +81,7 @@ export default function LocationMapBottomSheet({ const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject); const showEditorControls = mode === "edit" && canManage; const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject); + const showUnmappedPanel = filters.showUnmapped && !selectedObject; const changedLayerCount = useMemo( () => MAP_DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length, [filters] @@ -276,7 +277,7 @@ export default function LocationMapBottomSheet({ ) : null} - {filters.showUnmapped ? ( + {showUnmappedPanel ? ( { + await mockMapShell(page); + + const mapState = publishedMapState([ + { + id: 1531, + location_map_id: 901, + zone_id: 501, + zone_name: "Bakery", + type: "zone", + label: "Bakery", + x: 40, + y: 40, + width: 260, + height: 160, + rotation: 0, + locked: false, + visible: true, + sort_order: 1, + }, + ], true); + + await page.route("**/households/1/locations/10/map", async (route) => { + await route.fulfill({ + status: 200, + contentType: "application/json", + body: JSON.stringify(mapState), + }); + }); + + await page.goto("/stores/100/locations/10/map"); + await page.getByRole("button", { name: "Layers" }).click(); + await page.getByRole("button", { name: "Unmapped" }).click(); + await expect(page.getByText("Unmapped Items")).toBeVisible(); + await expect(page.getByText("loose batteries")).toBeVisible(); + + await page.locator('[data-object-key="1531"]').locator("rect").first().click(); + await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery"); + await expect(page.getByText("french bread")).toBeVisible(); + await expect(page.getByText("Unmapped Items")).toHaveCount(0); + await expect(page.getByText("loose batteries")).toHaveCount(0); + + await page.locator(".location-map-background").click({ position: { x: 8, y: 8 } }); + await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Map Details"); + await expect(page.getByText("Unmapped Items")).toBeVisible(); + await expect(page.getByText("loose batteries")).toBeVisible(); +}); + test("viewer explains when unmapped items are hidden by filters", async ({ page }) => { await mockMapShell(page);