[core] refactor: replace XMLHttpRequest with fetch

Author: KristjanESPERANTO

CHANGELOG.md

@@ -25,6 +25,7 @@ planned for 2026-01-01
 - [tests] migrate from `jest` to `vitest` (#3940, #3941)
 - [ci] Add concurrency to automated tests workflow to cancel outdated runs (#3943)
 - [tests] replace `node-libgpiod` with `serialport` in electron-rebuild workflow (#3945)
+- [core] refactor: replace `XMLHttpRequest` with `fetch` in `translator.js`
 
 ### Fixed
 

js/loader.js

@@ -10,13 +10,36 @@ const Loader = (function () {
 
 	/* Private Methods */
 
+	/**
+	 * Get environment variables from config.
+	 * @returns {object} Env vars with modulesDir and customCss paths from config.
+	 */
+	const getEnvVarsFromConfig = function () {
+		return {
+			modulesDir: config.foreignModulesDir || "modules",
+			customCss: config.customCss || "css/custom.css"
+		};
+	};
+
 	/**
 	 * Retrieve object of env variables.
 	 * @returns {object} with key: values as assembled in js/server_functions.js
 	 */
 	const getEnvVars = async function () {
-		const res = await fetch(`${location.protocol}//${location.host}${config.basePath}env`);
-		return JSON.parse(await res.text());
+		// In test mode, skip server fetch and use config values directly
+		if (typeof process !== "undefined" && process.env && process.env.mmTestMode === "true") {
+			return getEnvVarsFromConfig();
+		}
+
+		// In production, fetch env vars from server
+		try {
+			const res = await fetch(`${config.basePath}env`);
+			return JSON.parse(await res.text());
+		} catch (error) {
+			// Fallback to config values if server fetch fails
+			Log.error("Unable to retrieve env configuration", error);
+			return getEnvVarsFromConfig();
+		}
 	};
 
 	/**

js/translator.js

@@ -3,30 +3,24 @@
 const Translator = (function () {
 
 	/**
-	 * Load a JSON file via XHR.
+	 * Load a JSON file via fetch.
 	 * @param {string} file Path of the file we want to load.
 	 * @returns {Promise<object>} the translations in the specified file
 	 */
 	async function loadJSON (file) {
-		const xhr = new XMLHttpRequest();
-		return new Promise(function (resolve) {
-			xhr.overrideMimeType("application/json");
-			xhr.open("GET", file, true);
-			xhr.onreadystatechange = function () {
-				if (xhr.readyState === 4 && xhr.status === 200) {
-					// needs error handler try/catch at least
-					let fileInfo = null;
-					try {
-						fileInfo = JSON.parse(xhr.responseText);
-					} catch (exception) {
-						// nothing here, but don't die
-						Log.error(`[translator] loading json file =${file} failed`);
-					}
-					resolve(fileInfo);
-				}
-			};
-			xhr.send(null);
-		});
+		const baseHref = document.baseURI;
+		const url = new URL(file, baseHref);
+
+		try {
+			const response = await fetch(url);
+			if (!response.ok) {
+				throw new Error(`Unexpected response status: ${response.status}`);
+			}
+			return await response.json();
+		} catch (exception) {
+			Log.error(`Loading json file =${file} failed`);
+			return null;
+		}
 	}
 
 	return {

tests/e2e/helpers/global-setup.js

@@ -64,40 +64,48 @@ exports.startApplication = async (configFilename, exec) => {
 };
 
 exports.stopApplication = async (waitTime = 100) => {
-	if (global.window) {
-		// no closing causes test errors and memory leaks
-		global.window.close();
-		delete global.window;
-	}
-
 	if (!global.app) {
+		if (global.window) {
+			global.window.close();
+			delete global.window;
+		}
 		delete global.testPort;
 		return Promise.resolve();
 	}
 
+	// Stop server first
 	await global.app.stop();
 	delete global.app;
 	delete global.testPort;
 
-	// Small delay to ensure clean shutdown
+	// Wait for any pending async operations to complete before closing DOM
 	await new Promise((resolve) => setTimeout(resolve, waitTime));
+
+	if (global.window) {
+		// Close window after async operations have settled
+		global.window.close();
+		delete global.window;
+		delete global.document;
+	}
 };
 
 exports.getDocument = () => {
 	return new Promise((resolve) => {
 		const port = global.testPort || config.port || 8080;
-		const url = `http://${config.address || "localhost"}:${port}`;
+		// JSDOM requires localhost instead of 0.0.0.0 for URL resolution
+		const address = config.address === "0.0.0.0" ? "localhost" : config.address || "localhost";
+		const url = `http://${address}:${port}`;
 		jsdom.JSDOM.fromURL(url, { resources: "usable", runScripts: "dangerously" }).then((dom) => {
 			dom.window.name = "jsdom";
 			global.window = dom.window;
+			global.document = dom.window.document;
 			// Following fixes `navigator is not defined` errors in e2e tests, found here
 			// https://www.appsloveworld.com/reactjs/100/37/mocha-react-navigator-is-not-defined
 			global.navigator = {
 				useragent: "node.js"
 			};
 			dom.window.fetch = fetch;
 			dom.window.onload = () => {
-				global.document = dom.window.document;
 				resolve();
 			};
 		});

tests/e2e/translations_spec.js

@@ -16,6 +16,7 @@ function createTranslationTestEnvironment () {
 
 	dom.window.Log = { log: vi.fn(), error: vi.fn() };
 	dom.window.translations = translations;
+	dom.window.fetch = fetch;
 	dom.window.eval(translatorJs);
 
 	const window = dom.window;

tests/unit/classes/translator_spec.js

@@ -13,6 +13,7 @@ function createTranslationTestEnvironment () {
 	const dom = new JSDOM("", { url: "http://localhost:3001", runScripts: "outside-only" });
 
 	dom.window.Log = { log: vi.fn(), error: vi.fn() };
+	dom.window.fetch = fetch;
 	dom.window.eval(translatorJs);
 
 	return { window: dom.window, Translator: dom.window.Translator };