refactor: instance creation

Author: NiclasNorin

source/components/map/index.ts

@@ -1,4 +1,5 @@
-import MapFactory from './mapFactory';
+import MapFactory from './script/mapFactory';
+import type { MapArgs } from './script/mapInterface';
 
 export function initializeMaps() {
 	document.querySelectorAll('[data-js-map]').forEach((mapContainer) => {
@@ -29,3 +30,5 @@ export function initializeMaps() {
 		MapFactory.create(provider, args);
 	});
 }
+
+document.addEventListener('DOMContentLoaded', initializeMaps);

source/components/map/script/mapFactory.ts

@@ -1,5 +1,7 @@
+import type { MapArgs, MapProviderFactory } from './mapInterface';
+
 class MapFactory {
-	private static providers: Record<string, any> = {};
+	private static providers: Record<string, MapProviderFactory> = {};
 
 	/**
 	 * Creates a map instance for the specified provider using the provided arguments.

source/components/map/script/mapInterface.d.ts

@@ -1,4 +1,4 @@
-type MapArgs = {
+export type MapArgs = {
 	container: HTMLElement;
 	id: string;
 	lat: string;
@@ -7,3 +7,7 @@ type MapArgs = {
 	style: string | null;
 	markers: string | null;
 };
+
+export interface MapProviderFactory {
+	create(args: MapArgs): unknown;
+}

source/components/map/script/providers/openstreetmap/openstreetmapCss.d.ts

@@ -0,0 +1,4 @@
+declare module '@helsingborg-stad/openstreetmap/dist/main.css?inline' {
+	const content: string;
+	export default content;
+}

source/components/map/script/providers/openstreetmap/openstreetmapFactory.test.ts

@@ -0,0 +1,104 @@
+import Openstreetmap from './openstreetmap';
+import OpenstreetmapFactory from './openstreetmapFactory';
+
+jest.mock('./openstreetmap', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation((args) => ({
+		args,
+	})),
+}));
+
+jest.mock('@helsingborg-stad/openstreetmap/dist/main.css?inline', () => ({
+	__esModule: true,
+	default: '/* mocked css */',
+}));
+
+class FakeCSSStyleSheet {
+	public replaceSync(_content: string): void {}
+}
+
+const mockedOpenstreetmap = jest.mocked(Openstreetmap);
+
+describe('OpenstreetmapFactory', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		OpenstreetmapFactory.stylesLoaded = false;
+
+		document.body.innerHTML = '<div id="wrapper"><div id="map"></div></div>';
+		Object.defineProperty(document, 'adoptedStyleSheets', {
+			value: [],
+			writable: true,
+			configurable: true,
+		});
+		Object.defineProperty(globalThis, 'CSSStyleSheet', {
+			value: FakeCSSStyleSheet,
+			configurable: true,
+		});
+	});
+
+	it('passes normalized marker configs to the map implementation', () => {
+		// Arrange
+		const factory = new OpenstreetmapFactory();
+		const container = document.querySelector('#wrapper') as HTMLElement;
+
+		// Act
+		factory.create({
+			container,
+			id: 'map',
+			lat: '56.0465',
+			lng: '12.6945',
+			style: 'dark',
+			zoom: '12',
+			markers: JSON.stringify([
+				{ lat: '56.0465', lng: '12.6945', icon: 'pin_drop', content: 'Central square', color: '#123456' },
+				{ lat: null, lng: '12.7' },
+			]),
+		});
+
+		// Assert
+		expect(mockedOpenstreetmap).toHaveBeenCalledTimes(1);
+		expect(mockedOpenstreetmap).toHaveBeenCalledWith({
+			id: 'map',
+			lat: 56.0465,
+			lng: 12.6945,
+			zoom: 12,
+			style: 'dark',
+			markers: [
+				{
+					lat: 56.0465,
+					lng: 12.6945,
+					icon: 'pin_drop',
+					content: 'Central square',
+					color: '#123456',
+				},
+			],
+		});
+		expect(document.adoptedStyleSheets).toHaveLength(1);
+	});
+
+	it('falls back to the default zoom for invalid zoom values', () => {
+		// Arrange
+		const factory = new OpenstreetmapFactory();
+		const container = document.querySelector('#wrapper') as HTMLElement;
+
+		// Act
+		factory.create({
+			container,
+			id: 'map',
+			lat: '56.0465',
+			lng: '12.6945',
+			style: null,
+			zoom: 'not-a-number',
+			markers: null,
+		});
+
+		// Assert
+		expect(mockedOpenstreetmap).toHaveBeenCalledWith(
+			expect.objectContaining({
+				zoom: 16,
+				style: 'default',
+				markers: [],
+			}),
+		);
+	});
+});

source/components/map/script/providers/openstreetmap/openstreetmapFactory.ts

@@ -1,5 +1,6 @@
-import { LatLngObject, type MapStyle, MarkerOptions, TooltipOptions } from '@helsingborg-stad/openstreetmap';
+import type { MapStyle } from '@helsingborg-stad/openstreetmap';
 import sheet from '@helsingborg-stad/openstreetmap/dist/main.css?inline';
+import type { MapArgs } from '../../mapInterface';
 import Openstreetmap from './openstreetmap';
 import type { MarkerConfig, OpenstreetmapArgs } from './openstreetmapInterface';
 
@@ -50,7 +51,7 @@ class OpenstreetmapFactory {
 			lng: Number(args.lng),
 			zoom,
 			style,
-			markers: markers,
+			markers,
 		};
 
 		return verifiedArgs;
@@ -71,15 +72,19 @@ class OpenstreetmapFactory {
 
 		const markerConfigs: MarkerConfig[] = [];
 		for (const marker of markers) {
-			if (!marker.lat || isNaN(Number(marker.lat)) || !marker.lng || isNaN(Number(marker.lng))) {
+			const lat = Number(marker.lat);
+			const lng = Number(marker.lng);
+
+			if (marker.lat == null || Number.isNaN(lat) || marker.lng == null || Number.isNaN(lng)) {
 				continue;
 			}
 
 			markerConfigs.push({
-				lat: Number(marker.lat),
-				lng: Number(marker.lng),
+				lat,
+				lng,
 				icon: marker.icon || null,
 				content: marker.content || null,
+				color: marker.color || null,
 			});
 		}
 
@@ -111,7 +116,9 @@ class OpenstreetmapFactory {
 	 * @returns A numeric zoom level.
 	 */
 	private getZoom(zoom: string | null): number {
-		return isNaN(Number(zoom)) ? 16 : Number(zoom);
+		const parsedZoom = Number(zoom);
+
+		return Number.isNaN(parsedZoom) ? 16 : parsedZoom;
 	}
 
 	/**

source/components/map/script/providers/openstreetmap/openstreetmapInterface.d.ts

@@ -1,22 +1,22 @@
-import { LatLngObject, type MapStyle, type MarkerOptions, TooltipOptions } from '@helsingborg-stad/openstreetmap';
+import type { MapStyle } from '@helsingborg-stad/openstreetmap';
 
-type OpenstreetmapArgs = {
+export type OpenstreetmapArgs = {
 	id: string;
 	lat: number;
 	lng: number;
 	zoom: number;
 	style: MapStyle;
-	markers: Array<MarkerOptions>;
+	markers: MarkerConfig[];
 };
 
-type MarkerConfig = {
+export type MarkerConfig = {
 	lat: number;
 	lng: number;
 	icon?: string;
 	content?: string;
 	color?: string;
 };
 
-interface CreateMarker {
+export interface CreateMarker {
 	create(markerConfig: MarkerConfig): void;
 }

source/js/app.js

@@ -41,7 +41,6 @@ import { moveElements } from './helpers/moveElements';
 import { initializeIframeAcceptance } from './iframeAcceptance';
 import { initializeMegaMenus } from './megaMenu';
 import { initializeModal } from './modal';
-import { initializeOpenStreetMaps } from './openStreetMap';
 import { initializeResizeMediaQuery } from './resizeMediaQuery';
 import { SimulateClick } from './SimulateClick';
 import { initializeSegments } from './segment';
@@ -93,7 +92,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	// Functions
 	initializeResizeMediaQuery();
-	initializeOpenStreetMaps();
 	initializeDrawerAccessibility();
 	initializeForms();
 	initializeSlider();

source/js/index.ts

@@ -17,3 +17,4 @@ export * from '../components/slider/slider';
 export * from '../components/table/table.js';
 export * from '../components/testimonials/testimonials.js';
 export * from '../components/tooltip/tooltip.js';
+export * from '../components/map/index.js';