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

fix: expose map layer filter group

Browse Source
This commit is contained in:
Nico 2026-06-15 23:19:40 -07:00
parent 35ce919cd2
commit 82eab81149
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,7 +75,7 @@ function MapItemActionList({ items, onSelectItem, itemGroupLabel }) {
export function LocationMapLayerPanel({ filters, setFilters }) { export function LocationMapLayerPanel({ filters, setFilters }) {
return ( return (
<div className="location-map-display-panel"> <div className="location-map-display-panel">
<div className="location-map-display-controls"> <div className="location-map-display-controls" role="group" aria-label="Layer filters">
{MAP_DISPLAY_CONTROLS.map(([key, label]) => ( {MAP_DISPLAY_CONTROLS.map(([key, label]) => (
<button <button
key={key} key={key}

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

@ -1392,27 +1392,27 @@ test("mode switches close open map layers without resetting filters", async ({ p
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByRole("button", { name: "Pins" }).click(); await page.getByRole("button", { name: "Pins" }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "true"); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "true");
await expect(page.locator(".location-map-display-panel")).toBeVisible(); await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
await page.getByRole("button", { name: "Edit Draft" }).click(); await page.getByRole("button", { name: "Edit Draft" }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false"); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.locator(".location-map-display-panel")).toHaveCount(0); await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
await page.getByRole("button", { name: "Layers, 1 changed" }).click(); await page.getByRole("button", { name: "Layers, 1 changed" }).click();
await expect(page.locator(".location-map-display-panel")).toBeVisible(); await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
await page.getByRole("button", { name: "View", exact: true }).click(); await page.getByRole("button", { name: "View", exact: true }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false"); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.locator(".location-map-display-panel")).toHaveCount(0); await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
await page.getByRole("button", { name: "Edit Draft" }).click(); await page.getByRole("button", { name: "Edit Draft" }).click();
await page.getByRole("button", { name: "Layers, 1 changed" }).click(); await page.getByRole("button", { name: "Layers, 1 changed" }).click();
await expect(page.locator(".location-map-display-panel")).toBeVisible(); await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
await page.getByRole("button", { name: "View", exact: true }).click(); await page.getByRole("button", { name: "View", exact: true }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false"); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.locator(".location-map-display-panel")).toHaveCount(0); await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
}); });
test("mobile keeps viewing draft status compact in the topbar", async ({ page }) => { test("mobile keeps viewing draft status compact in the topbar", async ({ page }) => {
@ -3142,8 +3142,9 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
await expect(page.locator(".location-map-pin")).toHaveCount(0); await expect(page.locator(".location-map-pin")).toHaveCount(0);
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
const labelsToggle = page.getByRole("button", { name: "Labels" }); const layerFilters = page.getByRole("group", { name: "Layer filters" });
await expect(page.locator(".location-map-display-controls .location-map-layer-state")).toHaveCount(8); const labelsToggle = layerFilters.getByRole("button", { name: "Labels" });
await expect(layerFilters.locator(".location-map-layer-state")).toHaveCount(8);
await expect(labelsToggle).toHaveAttribute("aria-pressed", "true"); await expect(labelsToggle).toHaveAttribute("aria-pressed", "true");
await expect(labelsToggle.locator(".location-map-layer-state.is-on")).toHaveCount(1); await expect(labelsToggle.locator(".location-map-layer-state.is-on")).toHaveCount(1);
await expect(page.getByRole("button", { name: "Bought" })).toBeVisible(); await expect(page.getByRole("button", { name: "Bought" })).toBeVisible();
@ -3338,7 +3339,7 @@ test("viewer shows a compact overflow cue for long unmapped lists", async ({ pag
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
const unmappedToggle = page.locator(".location-map-display-panel").getByRole("button", { name: "Unmapped" }); const unmappedToggle = page.getByRole("group", { name: "Layer filters" }).getByRole("button", { name: "Unmapped" });
await expect(unmappedToggle).toHaveAttribute("aria-pressed", "false"); await expect(unmappedToggle).toHaveAttribute("aria-pressed", "false");
await unmappedToggle.click(); await unmappedToggle.click();
await expect(unmappedToggle).toHaveAttribute("aria-pressed", "true"); await expect(unmappedToggle).toHaveAttribute("aria-pressed", "true");
@ -3488,7 +3489,7 @@ test("viewer hides unrelated unmapped items while a zone is selected", async ({
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await page.getByRole("button", { name: "Unmapped" }).click(); await page.getByRole("button", { name: "Unmapped" }).click();
await expect(page.locator(".location-map-display-panel")).toBeVisible(); await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
await expect(page.getByLabel("Unmapped items")).toBeVisible(); await expect(page.getByLabel("Unmapped items")).toBeVisible();
await expect(page.getByText("Unmapped Items")).toHaveCount(0); await expect(page.getByText("Unmapped Items")).toHaveCount(0);
await expect(page.getByText("loose batteries")).toBeVisible(); await expect(page.getByText("loose batteries")).toBeVisible();
@ -3496,7 +3497,7 @@ test("viewer hides unrelated unmapped items while a zone is selected", async ({
await page.locator('[data-object-key="1531"]').locator("rect").first().click(); 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.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false"); await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.locator(".location-map-display-panel")).toHaveCount(0); await expect(page.getByRole("group", { name: "Layer filters" })).toHaveCount(0);
await expect(page.getByText("french bread")).toBeVisible(); await expect(page.getByText("french bread")).toBeVisible();
await expect(page.getByLabel("Unmapped items")).toHaveCount(0); await expect(page.getByLabel("Unmapped items")).toHaveCount(0);
await expect(page.getByText("loose batteries")).toHaveCount(0); await expect(page.getByText("loose batteries")).toHaveCount(0);
@ -4676,6 +4677,7 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
expect(actionButtonBox.height).toBeGreaterThanOrEqual(40); expect(actionButtonBox.height).toBeGreaterThanOrEqual(40);
} }
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await expect(page.getByRole("group", { name: "Layer filters" })).toBeVisible();
await page.getByRole("button", { name: "Pins" }).click(); await page.getByRole("button", { name: "Pins" }).click();
const resetLayersButtonBox = await page.getByRole("button", { name: "Reset layer filters" }).boundingBox(); const resetLayersButtonBox = await page.getByRole("button", { name: "Reset layer filters" }).boundingBox();
expect(resetLayersButtonBox).not.toBeNull(); expect(resetLayersButtonBox).not.toBeNull();