@panoramax/web-viewer/config/jest/mocks.js

Panoramax web viewer for geolocated pictures

/*
 * Common Jest mocks for complex libraries
 */

jest.mock("lit", () => {
	class MockLitElement {
		static properties = {};
		static styles = [];

		constructor() {
			this.shadowRoot = {
				innerHTML: "",
				appendChild: jest.fn(),
			};
			this.requestUpdate = jest.fn();
			this.updateComplete = Promise.resolve();
			this.style = {};
			this._handlers = {};
			this._handlesOnce = {};
			this.renderRoot = {
				querySelectorAll: jest.fn(),
			};
		}

		connectedCallback() {}
		disconnectedCallback() {}
		attributeChangedCallback() {}
		adoptedCallback() {}
		firstUpdated() {}
		updated() {}
		render() {
			return "";
		}
		getAttribute() {}
		addEventListener(type, handler, options) {
			if(options?.once) {
				if(!this._handlersOnce) { this._handlersOnce = {}; }
				if(!this._handlersOnce?.[type]) { this._handlersOnce[type] = []; }
				this._handlersOnce[type].push(handler);
			}
			else {
				if(!this._handlers[type]) { this._handlers[type] = []; }
				this._handlers[type].push(handler);
			}
		}
		dispatchEvent(event, opts) {
			this._handlers[event.type]?.forEach(f => f(opts));
			this._handlersOnce?.[event.type]?.forEach(f => f(opts));
			if(this._handlersOnce?.[event.type]) {
				this._handlersOnce[event.type] = [];
			}
		}
	}

	return {
		LitElement: MockLitElement,
		css: jest.fn((styles) => styles),
		html: jest.fn((strings, ...values) => strings.reduce((acc, str, i) => acc + str + (values[i] || ""), "")),
		nothing: Symbol("lit-nothing"),
		unsafeCSS: jest.fn((styles) => styles),
	};
});


jest.mock("lit/directives/class-map.js", () => ({
	classMap: jest.fn(),
}));


jest.mock("lit/directives/map.js", () => ({
	map: jest.fn(),
}));


jest.mock("maplibre-gl", () => ({
	addProtocol: jest.fn(),
	AttributionControl: jest.fn(),
	NavigationControl: jest.fn(),
	GeolocateControl: class {
		onAdd() {;}
	},
	Marker: class {
		setDraggable() {;}
	},
	Popup: function() {
		return {
			on: jest.fn(),
		};
	},
	Map: class {
		constructor(opts) {
			this._mapOpts = opts;
			this._handlers = {};
			this._handlersOnce = {};
		}
		getContainer() {
			return this._mapOpts.container;
		}
		addControl() {;}
		addSource() {;}
		addLayer() {;}
		getLayer(l) { return {id: l}; }
		setLayoutProperty() {;}
		setPaintProperty() {;}
		loaded() { return true; }
		getStyle() {
			return {
				layers: [],
				sources: {},
				metadata: {},
			};
		}
		resize() {;}
		on(type, handler) {
			if(!this._handlers[type]) { this._handlers[type] = []; }
			this._handlers[type].push(handler);
		}
		once(type, handler) {
			if(!this._handlersOnce[type]) { this._handlersOnce[type] = []; }
			this._handlersOnce[type].push(handler);
		}
		fire(type, opts) {
			this._handlers[type]?.forEach(f => f(opts));
			this._handlersOnce?.[type]?.forEach(f => f(opts));
			if(this._handlersOnce?.[type]) {
				this._handlersOnce[type] = [];
			}
		}
	},
	LngLat: function() {
		return { lng: -1.7, lat: 47.8 };
	},
	LngLatBounds: function() {
		return { sw: { lng: -1.7, lat: 47.8 }, ne: { lng: -1.7, lat: 47.8 } };
	},
}));


jest.mock("@photo-sphere-viewer/core", () => ({
	Viewer: class {
		constructor(opts) {
			this._psvOpts = opts;
			this.loader = {
				canvas: { setAttribute: jest.fn() },
				__updateContent: jest.fn(),
				show: jest.fn(),
			};
			this.renderer = {
				renderer: {
					toneMapping: null,
					toneMappingExposure: null,
				}
			};
			this.receivedEvents = [];
			this.container = {
				classList: {
					add: jest.fn(),
					remove: jest.fn(),
				},
				querySelector: jest.fn(),
			};
		}
		addEventListener(t, h) {
			this.receivedEvents.push([t, h]);
			if(t == "ready") { h(); }
		}
		dispatchEvent(e) {
			this.receivedEvents
				.filter(([t,h]) => e.type === t)
				.forEach(([t,h]) => h(e?.detail));
		}
		getPlugin() {
			return {
				addEventListener: jest.fn(),
				datasource: {
					nodeResolver: jest.fn(),
				},
				arrowsRenderer: {
					clear: jest.fn(),
				},
				state: {
					currentNode: null,
					datasource: { nodes: {} },
				},
				config: {
					transitionOptions: jest.fn(),
				},
				getCurrentNode: jest.fn(),
				__onEnterObject: jest.fn(),
				__onLeaveObject: jest.fn(),
			};
		}
	},
	SYSTEM: {},
	DEFAULTS: {},
}));


jest.mock("@photo-sphere-viewer/equirectangular-tiles-adapter", () => ({
	EquirectangularTilesAdapter: jest.fn(),
}));


jest.mock("@photo-sphere-viewer/virtual-tour-plugin", () => ({
	VirtualTourPlugin: jest.fn(),
}));


jest.mock("@photo-sphere-viewer/markers-plugin", () => ({
	MarkersPlugin: jest.fn(),
}));


jest.mock("query-selector-shadow-dom", () => ({
	querySelectorDeep: jest.fn(),
}));