andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

LGTM

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-09 09:26:40 +01:00
parent 701c17a703
commit f114ada255
44 changed files with 5264 additions and 1674 deletions
Download patch file Download diff file Expand all files Collapse all files

61
frontend/src/hooks/usePoiLayers.test.ts
View file

@ -51,6 +51,9 @@ function layerById(layers: readonly unknown[], id: string) {
return layer as { props: Record<string, unknown> };
}
type PoiIconDef = { url: string; width: number; height: number };
type PoiColor = [number, number, number, number];
describe('usePoiLayers', () => {
it('returns the expected layer stack', () => {
const { result } = renderHook(() =>
@ -71,9 +74,15 @@ describe('usePoiLayers', () => {
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 };
const getIcon = iconLayer.props.getIcon as (poi: POI) => PoiIconDef;
const getSize = iconLayer.props.getSize as (poi: POI) => number;
expect(getIcon(waitrose).url).toBe('/assets/poi-icons/brands/waitrose_24px.svg');
expect(getIcon(waitrose)).toMatchObject({
url: '/assets/poi-icons/logos/waitrose.svg',
width: 96,
height: 48,
});
expect(getSize(waitrose)).toBe(24);
});
it('prefers POI fascia icon categories for map marker icons', () => {
@ -81,11 +90,53 @@ describe('usePoiLayers', () => {
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 };
const getIcon = iconLayer.props.getIcon as (poi: POI) => PoiIconDef;
const getSize = iconLayer.props.getSize as (poi: POI) => number;
expect(getIcon(foodWarehouse).url).toBe(
'/assets/poi-icons/brands/iceland_food_warehouse_24px.svg'
expect(getIcon(foodWarehouse)).toMatchObject({
url: '/assets/poi-icons/logos/the_food_warehouse.png',
width: 96,
height: 48,
});
expect(getSize(foodWarehouse)).toBe(24);
});
it('keeps generic emoji POIs at the compact marker size', () => {
const { result } = renderHook(() =>
usePoiLayers({ pois: [supermarket], zoom: 15, isDark: false })
);
const iconLayer = layerById(result.current.poiLayers, 'poi-icons');
const getIcon = iconLayer.props.getIcon as (poi: POI) => PoiIconDef;
const getSize = iconLayer.props.getSize as (poi: POI) => number;
expect(getIcon(supermarket)).toMatchObject({
url: '/assets/twemoji/1f6d2.png',
width: 72,
height: 72,
});
expect(getSize(supermarket)).toBe(18);
});
it('hides the circular marker badge behind bundled logo icons', () => {
const { result } = renderHook(() =>
usePoiLayers({ pois: [waitrose, supermarket], zoom: 15, isDark: false })
);
const shadowLayer = layerById(result.current.poiLayers, 'poi-shadow');
const backgroundLayer = layerById(result.current.poiLayers, 'poi-background');
const getShadowRadius = shadowLayer.props.getRadius as (poi: POI) => number;
const getBackgroundRadius = backgroundLayer.props.getRadius as (poi: POI) => number;
const getFillColor = backgroundLayer.props.getFillColor as (poi: POI) => PoiColor;
const getLineColor = backgroundLayer.props.getLineColor as (poi: POI) => PoiColor;
expect(getShadowRadius(waitrose)).toBe(0);
expect(getBackgroundRadius(waitrose)).toBe(24);
expect(getFillColor(waitrose)).toEqual([0, 0, 0, 0]);
expect(getLineColor(waitrose)).toEqual([0, 0, 0, 0]);
expect(getShadowRadius(supermarket)).toBe(16);
expect(getBackgroundRadius(supermarket)).toBe(14);
expect(getFillColor(supermarket)).toEqual([255, 255, 255, 255]);
expect(getLineColor(supermarket)).toEqual([34, 197, 94, 255]);
});
it('hides minor POI categories until the configured zoom threshold', () => {