More

frontend/src/hooks/usePoiLayers.test.ts

@@ -14,6 +14,16 @@ const supermarket: POI = {
   emoji: '🛒',
 };
 
+const waitrose: POI = {
+  id: 'poi-3',
+  name: 'Waitrose Marylebone',
+  category: 'Waitrose',
+  group: 'Groceries',
+  lat: 51.52,
+  lng: -0.15,
+  emoji: '🛒',
+};
+
 const busStop: POI = {
   id: 'poi-2',
   name: 'High Street Stop',
@@ -45,6 +55,18 @@ describe('usePoiLayers', () => {
     ]);
   });
 
+  it('uses POI category logos for map marker icons', () => {
+    const { result } = renderHook(() =>
+      usePoiLayers({ pois: [waitrose], zoom: 15, isDark: false })
+    );
+    const iconLayer = layerById(result.current.poiLayers, 'poi-icons');
+    const getIcon = iconLayer.props.getIcon as (poi: POI) => { url: string };
+
+    expect(getIcon(waitrose).url).toBe(
+      'https://geolytix.github.io/MapIcons/brands/waitrose_24px.svg'
+    );
+  });
+
   it('hides minor POI categories until the configured zoom threshold', () => {
     const { result, rerender } = renderHook(
       ({ zoom }) => usePoiLayers({ pois: [busStop], zoom, isDark: false }),