mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-12-01 18:42:02 +00:00
### 1. Replace `XMLHttpRequest` with the modern `fetch` API for loading translation files #### Changes - **translator.js**: Use `fetch` with `async/await` instead of XHR callbacks - **loader.js**: Align URL handling and add error handling (follow-up to fetch migration) - **Tests**: Update infrastructure for `fetch` compatibility #### Benefits - Modern standard API - Cleaner, more readable code - Better error handling and fallback mechanisms ### 2. Migrate e2e tests to Playwright This wasn't originally planned for this PR, but is related. While investigating suspicious log entries which surfaced after the fetch migration I kept running into JSDOM’s limitations. That pushed me to migrate the E2E suite to Playwright instead. #### Changes - switch e2e harness to Playwright (`tests/e2e/helpers/global-setup.js`) - rewrite specs to use Playwright locators + shared `expectTextContent` - install Chromium via `npx playwright install --with-deps` in CI #### Benefits - much closer to real browser behaviour - and no more fighting JSDOM’s quirks
179 lines
4.4 KiB
JavaScript
179 lines
4.4 KiB
JavaScript
const path = require("node:path");
|
|
const os = require("node:os");
|
|
const fs = require("node:fs");
|
|
const { chromium } = require("playwright");
|
|
|
|
// global absolute root path
|
|
global.root_path = path.resolve(`${__dirname}/../../../`);
|
|
|
|
const indexFile = `${global.root_path}/index.html`;
|
|
const cssFile = `${global.root_path}/css/custom.css`;
|
|
const sampleCss = [
|
|
".region.row3 {",
|
|
" top: 0;",
|
|
"}",
|
|
".region.row3.left {",
|
|
" top: 100%;",
|
|
"}"
|
|
];
|
|
let indexData = "";
|
|
let cssData = "";
|
|
|
|
let browser;
|
|
let context;
|
|
let page;
|
|
|
|
/**
|
|
* Ensure Playwright browser and context are available.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async function ensureContext () {
|
|
if (!browser) {
|
|
browser = await chromium.launch({ headless: true });
|
|
}
|
|
if (!context) {
|
|
context = await browser.newContext();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Open a fresh page pointing to the provided url.
|
|
* @param {string} url target url
|
|
* @returns {Promise<import('playwright').Page>} initialized page instance
|
|
*/
|
|
async function openPage (url) {
|
|
await ensureContext();
|
|
if (page) {
|
|
await page.close();
|
|
}
|
|
page = await context.newPage();
|
|
await page.goto(url, { waitUntil: "load" });
|
|
return page;
|
|
}
|
|
|
|
/**
|
|
* Close page, context and browser if they exist.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async function closeBrowser () {
|
|
if (page) {
|
|
await page.close();
|
|
page = null;
|
|
}
|
|
if (context) {
|
|
await context.close();
|
|
context = null;
|
|
}
|
|
if (browser) {
|
|
await browser.close();
|
|
browser = null;
|
|
}
|
|
}
|
|
|
|
exports.getPage = () => {
|
|
if (!page) {
|
|
throw new Error("Playwright page is not initialized. Call getDocument() first.");
|
|
}
|
|
return page;
|
|
};
|
|
|
|
|
|
exports.startApplication = async (configFilename, exec) => {
|
|
vi.resetModules();
|
|
|
|
// Clear Node's require cache for config and app files to prevent stale configs and middlewares
|
|
Object.keys(require.cache).forEach((key) => {
|
|
if (
|
|
key.includes("/tests/configs/")
|
|
|| key.includes("/config/config")
|
|
|| key.includes("/js/app.js")
|
|
|| key.includes("/js/server.js")
|
|
) {
|
|
delete require.cache[key];
|
|
}
|
|
});
|
|
|
|
if (global.app) {
|
|
await exports.stopApplication();
|
|
}
|
|
|
|
// Use fixed port 8080 (tests run sequentially, no conflicts)
|
|
const port = 8080;
|
|
global.testPort = port;
|
|
|
|
// Set config sample for use in test
|
|
let configPath;
|
|
if (configFilename === "") {
|
|
configPath = "config/config.js";
|
|
} else {
|
|
configPath = configFilename;
|
|
}
|
|
|
|
process.env.MM_CONFIG_FILE = configPath;
|
|
|
|
// Override port in config - MUST be set before app loads
|
|
process.env.MM_PORT = port.toString();
|
|
|
|
process.env.mmTestMode = "true";
|
|
process.setMaxListeners(0);
|
|
if (exec) exec;
|
|
global.app = require(`${global.root_path}/js/app`);
|
|
|
|
return global.app.start();
|
|
};
|
|
|
|
exports.stopApplication = async (waitTime = 100) => {
|
|
await closeBrowser();
|
|
|
|
if (!global.app) {
|
|
delete global.testPort;
|
|
return Promise.resolve();
|
|
}
|
|
|
|
await global.app.stop();
|
|
delete global.app;
|
|
delete global.testPort;
|
|
|
|
// Wait for any pending async operations to complete before closing DOM
|
|
await new Promise((resolve) => setTimeout(resolve, waitTime));
|
|
};
|
|
|
|
exports.getDocument = async () => {
|
|
const port = global.testPort || config.port || 8080;
|
|
const address = config.address === "0.0.0.0" ? "localhost" : config.address || "localhost";
|
|
const url = `http://${address}:${port}`;
|
|
|
|
await openPage(url);
|
|
};
|
|
|
|
exports.fixupIndex = async () => {
|
|
// read and save the git level index file
|
|
indexData = (await fs.promises.readFile(indexFile)).toString();
|
|
// make lines of the content
|
|
const workIndexLines = indexData.split(os.EOL);
|
|
// loop thru the lines to find place to insert new region
|
|
for (let l in workIndexLines) {
|
|
if (workIndexLines[l].includes("region top right")) {
|
|
// insert a new line with new region definition
|
|
workIndexLines.splice(l, 0, " <div class=\"region row3 left\"><div class=\"container\"></div></div>");
|
|
break;
|
|
}
|
|
}
|
|
// write out the new index.html file, not append
|
|
await fs.promises.writeFile(indexFile, workIndexLines.join(os.EOL), { flush: true });
|
|
// read in the current custom.css
|
|
cssData = (await fs.promises.readFile(cssFile)).toString();
|
|
// write out the custom.css for this testcase, matching the new region name
|
|
await fs.promises.writeFile(cssFile, sampleCss.join(os.EOL), { flush: true });
|
|
};
|
|
|
|
exports.restoreIndex = async () => {
|
|
// if we read in data
|
|
if (indexData.length > 0) {
|
|
//write out saved index.html
|
|
await fs.promises.writeFile(indexFile, indexData, { flush: true });
|
|
// write out saved custom.css
|
|
await fs.promises.writeFile(cssFile, cssData, { flush: true });
|
|
}
|
|
};
|