add support for custom regions, by detecting what is used in index.html (#3518)

read index.html to discover the regions used, make them the list checked
by app.js and check:config test

fixes #3504   supercedes #3506 

no config.js param required

tests/configs/customregions.js

@@ -0,0 +1,23 @@
+let config = {
+	modules:
+		// Using exotic content. This is why don't accept go to JSON configuration file
+		(() => {
+			let positions = ["row3_left", "top3_left1"];
+			let modules = Array();
+			for (let idx in positions) {
+				modules.push({
+					module: "helloworld",
+					position: positions[idx],
+					config: {
+						text: `Text in ${positions[idx]}`
+					}
+				});
+			}
+			return modules;
+		})()
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/e2e/custom_module_regions_spec.js

@@ -0,0 +1,30 @@
+const helpers = require("./helpers/global-setup");
+
+describe("Custom Position of modules", () => {
+	beforeAll(async () => {
+		await helpers.fixupIndex();
+		await helpers.startApplication("tests/configs/customregions.js");
+		await helpers.getDocument();
+	});
+	afterAll(async () => {
+		await helpers.stopApplication();
+		await helpers.restoreIndex();
+	});
+
+	const positions = ["row3_left", "top3_left1"];
+	let i = 0;
+	const className1 = positions[i].replace("_", ".");
+	let message1 = positions[i];
+	it(`should show text in ${message1}`, async () => {
+		const elem = await helpers.waitForElement(`.${className1}`);
+		expect(elem).not.toBeNull();
+		expect(elem.textContent).toContain(`Text in ${message1}`);
+	});
+	i = 1;
+	const className2 = positions[i].replace("_", ".");
+	let message2 = positions[i];
+	it(`should NOT show text in ${message2}`, async () => {
+		const elem = await helpers.waitForElement(`.${className2}`, "", 1500);
+		expect(elem).toBeNull();
+	}, 1510);
+});

tests/e2e/helpers/global-setup.js

@@ -1,5 +1,20 @@
+const os = require("node:os");
+const fs = require("node:fs");
 const jsdom = require("jsdom");
 
+const indexFile = `${__dirname}/../../../index.html`;
+const cssFile = `${__dirname}/../../../css/custom.css`;
+const sampleCss = [
+	".region.row3 {",
+	" top: 0;",
+	"}",
+	".region.row3.left {",
+	" top: 100%;",
+	"}"
+];
+var indexData = [];
+var cssData = [];
+
 exports.startApplication = async (configFilename, exec) => {
 	jest.resetModules();
 	if (global.app) {
@@ -45,11 +60,12 @@ exports.getDocument = () => {
 	});
 };
 
-exports.waitForElement = (selector, ignoreValue = "") => {
+exports.waitForElement = (selector, ignoreValue = "", timeout = 0) => {
 	return new Promise((resolve) => {
 		let oldVal = "dummy12345";
+		let element = null;
 		const interval = setInterval(() => {
-			const element = document.querySelector(selector);
+			element = document.querySelector(selector);
 			if (element) {
 				let newVal = element.textContent;
 				if (newVal === oldVal) {
@@ -64,6 +80,12 @@ exports.waitForElement = (selector, ignoreValue = "") => {
 				}
 			}
 		}, 100);
+		if (timeout !== 0) {
+			setTimeout(() => {
+				if (interval) clearInterval(interval);
+				resolve(null);
+			}, timeout);
+		}
 	});
 };
 
@@ -91,3 +113,34 @@ exports.testMatch = async (element, regex) => {
 	expect(elem.textContent).toMatch(regex);
 	return true;
 };
+
+exports.fixupIndex = async () => {
+	// read and save the git level index file
+	indexData = (await fs.promises.readFile(indexFile)).toString();
+	// make lines of the content
+	let 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 > 1) {
+		//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 });
+	}
+};