Lint

frontend/src/hooks/usePoiLayers.test.ts

@@ -34,6 +34,17 @@ const busStop: POI = {
   emoji: '🚌',
 };
 
+const foodWarehouse: POI = {
+  id: 'poi-4',
+  name: 'Iceland Avonmead Food Warehouse',
+  category: 'Iceland',
+  icon_category: 'The Food Warehouse',
+  group: 'Groceries',
+  lat: 51.49,
+  lng: -0.18,
+  emoji: '🛒',
+};
+
 function layerById(layers: readonly unknown[], id: string) {
   const layer = layers.find((item) => (item as { id?: string }).id === id);
   if (!layer) throw new Error(`Layer ${id} not found`);
@@ -62,8 +73,18 @@ describe('usePoiLayers', () => {
     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'
+    expect(getIcon(waitrose).url).toBe('/assets/poi-icons/brands/waitrose_24px.svg');
+  });
+
+  it('prefers POI fascia icon categories for map marker icons', () => {
+    const { result } = renderHook(() =>
+      usePoiLayers({ pois: [foodWarehouse], zoom: 15, isDark: false })
+    );
+    const iconLayer = layerById(result.current.poiLayers, 'poi-icons');
+    const getIcon = iconLayer.props.getIcon as (poi: POI) => { url: string };
+
+    expect(getIcon(foodWarehouse).url).toBe(
+      '/assets/poi-icons/brands/iceland_food_warehouse_24px.svg'
     );
   });
 
@@ -99,6 +120,7 @@ describe('usePoiLayers', () => {
       y: 88,
       name: supermarket.name,
       category: supermarket.category,
+      icon_category: undefined,
       group: supermarket.group,
       emoji: supermarket.emoji,
       id: supermarket.id,