From 2f9333da54a928b0d2c669877f21da576f00dbf5 Mon Sep 17 00:00:00 2001
From: Clemens Schwaighofer <clemens.schwaighofer@egplusww.com>
Date: Mon, 10 Mar 2025 17:02:17 +0900
Subject: [PATCH] Add testing for HtmlElementCreator and fix ...args calls

All args passthrough class where missing the leading "..."

Added Testing to HtmlElementCreator
---
 build/test.html                  |  22 ++
 package.json                     |   3 +-
 src/utils.mjs                    |   4 +-
 src/utils/HtmlElementCreator.mjs |   8 +-
 tests/HtmlElementCreator.test.js | 658 +++++++++++++++++++++++++++++++
 5 files changed, 687 insertions(+), 8 deletions(-)
 create mode 100644 tests/HtmlElementCreator.test.js
diff --git a/build/test.html b/build/test.html
index 7c3d739..8f9b65e 100644
--- a/build/test.html
+++ b/build/test.html
@@ -4,12 +4,17 @@
 	<script type="text/javascript" src="js/general/jquery.min.js"></script>
 	<!-- <script type="text/javascript" src="js/general/translateTest-ja_JP.UTF-8.js"></script> -->
 	<script type="text/javascript" src="js/output/utils.min.js"></script>
+	<!-- <script type="text/javascript" src="js/output/utils.js"></script> -->
 </head>
 <body>
 <div>
 	<h1>JavaScript Utils Test</h1>
 	<div id="test-div">
 	</div>
+	<div><hr></div>
+	<div id="build-test">
+	</div>
+	<div><hr></div>
 </div>
 </body>
 <script languagae="JavaScript">
@@ -17,6 +22,7 @@
 document.addEventListener('DOMContentLoaded', function() {
 	console.log('JavaScript Utils Test');
 	let el = document.getElementById('test-div');
+	let build_test = document.getElementById('build-test');
 	if (el === null) {
 		throw new Error("element test-div not found");
 	}
@@ -30,6 +36,22 @@ document.addEventListener('DOMContentLoaded', function() {
 	el.innerHTML += '<div>formatBytes: ' + formatBytes(bytes) + '</div>';
 	el.innerHTML += '<div>formatBytesLong: ' + formatBytesLong(bytes) + '</div>';
 
+	let cel_test = cel('div', 'sample-id', 'Some text', ['css-sample']);
+	el.innerHTML += '<div>cel: ' + JSON.stringify(cel_test) + '</div>';
+	let cel_out = phfo(cel_test);
+	console.log('CEL OUT: %o', cel_out);
+	build_test.innerHTML = cel_out;
+	//
+	let aelx_test = aelx(
+		cel('div', 'container-id', '', ['container-css']),
+		cel('div', 'entry-a-id', 'Entry block: A'),
+		cel('div', 'entry-b-id', 'Entry block: B')
+	);
+	el.innerHTML += '<div>aelx: ' + JSON.stringify(aelx_test) + '</div>';
+	let aelx_out = phfo(aelx_test);
+	console.log('AELX OUT: %o', aelx_out);
+	build_test.innerHTML += aelx_out;
+
 	// console.log('TR: %s', l10n.__('Original'));
 	// console.log('TR: %s', l10n.__('Not exists'));
 });
diff --git a/package.json b/package.json
index 1df2cf7..a936d4b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
 		"utils-min-build": "node_modules/esbuild/bin/esbuild utils.min=src/utils.mjs --outdir=build/js/output/ --format=esm --bundle --charset=utf8 --tree-shaking=false --minify-whitespace --minify-syntax --sourcemap",
 		"utils-build": "node_modules/esbuild/bin/esbuild utils=src/utils.mjs --outdir=build/js/output/ --format=esm --bundle --charset=utf8 --tree-shaking=false",
 		"utils-build-all": "npm run utils-min-build && npm run utils-build",
-		"utils-develop": "node_modules/esbuild/bin/esbuild utils=src/utils.mjs --outdir=build/js/output/ --format=esm --bundle --charset=utf8 --tree-shaking=false --watch"
+		"utils-develop": "node_modules/esbuild/bin/esbuild utils=src/utils.mjs --outdir=build/js/output/ --format=esm --bundle --charset=utf8 --tree-shaking=false --watch",
+		"utils-min-develop": "node_modules/esbuild/bin/esbuild utils.min=src/utils.mjs --outdir=build/js/output/ --format=esm --bundle --charset=utf8 --tree-shaking=false  --minify-whitespace --minify-syntax --sourcemap --watch"
 	},
 	"author": "Clemens Schwaighofer",
 	"license": "",
diff --git a/src/utils.mjs b/src/utils.mjs
index 95a2f60..5aa89d4 100644
--- a/src/utils.mjs
+++ b/src/utils.mjs
@@ -197,7 +197,7 @@ function roundPrecision(number, prec) // eslint-disable-line no-unused-vars
 // @ts-ignore
 function formatString(string, ...args) // eslint-disable-line no-unused-vars
 {
-	return _formatString(string, args);
+	return _formatString(string, ...args);
 }
 
 /**
@@ -775,7 +775,7 @@ function ael(base, attach, id = '') // eslint-disable-line no-unused-vars
 // @ts-ignore
 function aelx(base, ...attach) // eslint-disable-line no-unused-vars
 {
-	return hec.aelx(base, attach);
+	return hec.aelx(base, ...attach);
 }
 
 /**
diff --git a/src/utils/HtmlElementCreator.mjs b/src/utils/HtmlElementCreator.mjs
index f7eed51..934cb50 100644
--- a/src/utils/HtmlElementCreator.mjs
+++ b/src/utils/HtmlElementCreator.mjs
@@ -26,7 +26,8 @@ class HtmlElementCreator {
 		return {
 			tag: tag,
 			id: id,
-			name: options.name, // override name if set [name gets ignored in tree build anyway]
+			// override name if set, else id is used. Only for input/button
+			name: options.name,
 			content: content,
 			css: css,
 			options: options,
@@ -46,7 +47,6 @@ class HtmlElementCreator {
 		if (id) {
 			// base id match already
 			if (base.id == id) {
-				// base.sub.push(Object.assign({}, attach));
 				base.sub.push(deepCopyFunction(attach));
 			} else {
 				// sub check
@@ -58,7 +58,6 @@ class HtmlElementCreator {
 				}
 			}
 		} else {
-			// base.sub.push(Object.assign({}, attach));
 			base.sub.push(deepCopyFunction(attach));
 		}
 		return base;
@@ -74,7 +73,6 @@ class HtmlElementCreator {
 	aelx(base, ...attach)
 	{
 		for (var i = 0; i < attach.length; i ++) {
-			// base.sub.push(Object.assign({}, attach[i]));
 			base.sub.push(deepCopyFunction(attach[i]));
 		}
 		return base;
@@ -90,7 +88,6 @@ class HtmlElementCreator {
 	aelxar(base, attach)
 	{
 		for (var i = 0; i < attach.length; i ++) {
-			// base.sub.push(Object.assign({}, attach[i]));
 			base.sub.push(deepCopyFunction(attach[i]));
 		}
 		return base;
@@ -149,6 +146,7 @@ class HtmlElementCreator {
 	{
 		this.rcssel(_element, rcss);
 		this.acssel(_element, acss);
+		return _element;
 	}
 
 	/**
diff --git a/tests/HtmlElementCreator.test.js b/tests/HtmlElementCreator.test.js
new file mode 100644
index 0000000..41e1508
--- /dev/null
+++ b/tests/HtmlElementCreator.test.js
@@ -0,0 +1,658 @@
+import { describe, it, expect } from "vitest";
+
+import {
+	HtmlElementCreator
+} from '../src/utils/HtmlElementCreator.mjs';
+
+let hec = new HtmlElementCreator();
+/*
+A cel object
+{
+	"content": "",
+	"css": [],
+	"id": "",
+	"name": undefined,
+	"options": {},
+	"sub": [],
+	"tag": ""
+};
+*/
+
+/**
+ * build cel block
+ * auto set default if undefined in the in object
+ * @param {Object} cel_in array for creating one entry
+ * @returns {Object}
+ */
+function celCreate(cel_in)
+{
+	let cel_out;
+	if (cel_in.id === undefined) {
+		cel_out = hec.cel(cel_in.tag);
+	} else if (cel_in.content === undefined) {
+		cel_out = hec.cel(
+			cel_in.tag,
+			cel_in.id,
+		);
+	} else if (cel_in.css === undefined) {
+		cel_out = cel_out = hec.cel(
+			cel_in.tag,
+			cel_in.id,
+			cel_in.content,
+		);
+	} else if (cel_in.options === undefined) {
+		cel_out = cel_out = hec.cel(
+			cel_in.tag,
+			cel_in.id,
+			cel_in.content,
+			cel_in.css,
+		);
+	} else {
+		cel_out = hec.cel(
+			cel_in.tag,
+			cel_in.id,
+			cel_in.content,
+			cel_in.css,
+			cel_in.options
+		);
+	}
+	return cel_out;
+}
+
+describe("cel", () => {
+	it('should create HTML Element block and return an Object', () => {
+		// test list for various calls
+		let cel_list = [
+			{
+				"id": "tag only",
+				"in": {
+					"tag": "div",
+				},
+				"out": {
+					"content": "",
+					"css": [],
+					"id": "",
+					"name": undefined,
+					"options": {},
+					"sub": [],
+					"tag": "div"
+				}
+			},
+			{
+				"id": "tag+id only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+				},
+				"out": {
+					"content": "",
+					"css": [],
+					"id": "div-id",
+					"name": undefined,
+					"options": {},
+					"sub": [],
+					"tag": "div"
+				}
+			},
+			{
+				"id": "tag+id+content only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+					"content": "text entry",
+				},
+				"out": {
+					"content": "text entry",
+					"css": [],
+					"id": "div-id",
+					"name": undefined,
+					"options": {},
+					"sub": [],
+					"tag": "div"
+				}
+			},
+			{
+				"id": "tag+id+content+css only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+					"content": "text entry",
+					"css": ['css-a', 'css-b'],
+				},
+				"out": {
+					"content": "text entry",
+					"css": ['css-a', 'css-b'],
+					"id": "div-id",
+					"name": undefined,
+					"options": {},
+					"sub": [],
+					"tag": "div"
+				}
+			},
+			{
+				"id": "tag+id+content+css+options only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+					"content": "text entry",
+					"css": ['css-a', 'css-b'],
+					"options": {"onclick": "doThis();"}
+				},
+				"out": {
+					"content": "text entry",
+					"css": ['css-a', 'css-b'],
+					"id": "div-id",
+					"name": undefined,
+					"options": {"onclick": "doThis();"},
+					"sub": [],
+					"tag": "div"
+				}
+			},
+			// various in random
+			{
+				"id": "only css",
+				"in": {
+					"tag": "div",
+					"id": "",
+					"content": "",
+					"css": ["abc"],
+					"options": undefined,
+				},
+				"out": {
+					"content": "",
+					"css": ['abc'],
+					"id": "",
+					"name": undefined,
+					"options": {},
+					"sub": [],
+					"tag": "div"
+				}
+			},
+			{
+				"id": "set name",
+				"in": {
+					"tag": "div",
+					"id": "foo-bar",
+					"content": "",
+					"css": [],
+					"options": {
+						"name": "baz"
+					},
+				},
+				"out": {
+					"content": "",
+					"css": [],
+					"id": "foo-bar",
+					"name": "baz",
+					"options": {"name": "baz"},
+					"sub": [],
+					"tag": "div"
+				}
+			},
+		];
+		for (const cel_entry of cel_list) {
+			expect(celCreate(cel_entry.in)).toEqual(cel_entry.out);
+		}
+	});
+});
+
+describe("ael", () => {
+	it('should attach one HTML Element block to another and return an Object', () => {
+		let ael_block = hec.ael(
+			hec.cel('div'),
+			hec.cel('div')
+		);
+		expect(ael_block).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					}
+				],
+				"tag": "div"
+			}
+		);
+		ael_block = hec.ael(
+			ael_block,
+			hec.cel('div')
+		);
+		expect(ael_block).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					}
+				],
+				"tag": "div"
+			}
+		);
+	});
+});
+
+describe("aelx", () => {
+	it('should attach one or more HTML Element block to another and return an Object', () => {
+		let ael_block = hec.aelx(
+			hec.cel('div'),
+			hec.cel('div')
+		);
+		expect(ael_block).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					}
+				],
+				"tag": "div"
+			}
+		);
+		ael_block = hec.aelx(
+			ael_block,
+			hec.cel('div'),
+			hec.cel('div'),
+			hec.cel('div')
+		);
+		expect(ael_block).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+				],
+				"tag": "div"
+			}
+		);
+	});
+});
+
+describe("aelxar", () => {
+	it('should attach one or more HTML Element block arrays to another and return an Object', () => {
+		let ael_block = hec.aelxar(
+			hec.cel('div'),
+			[hec.cel('div')]
+		);
+		expect(ael_block).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					}
+				],
+				"tag": "div"
+			}
+		);
+		ael_block = hec.aelxar(
+			ael_block,
+			[
+				hec.cel('div'),
+				hec.cel('div'),
+				hec.cel('div')
+			]
+		);
+		expect(ael_block).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					},
+				],
+				"tag": "div"
+			}
+		);
+	});
+});
+
+describe("rel", () => {
+	it('should reset the sub entry array in an element and return an Object', () => {
+		let ael_block = hec.ael(
+			hec.cel('div'),
+			hec.cel('div')
+		);
+		expect(ael_block).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "",
+						"name": undefined,
+						"options": {},
+						"sub": [],
+						"tag": "div"
+					}
+				],
+				"tag": "div"
+			}
+		);
+		let ael_removed = hec.rel(ael_block);
+		expect(ael_removed).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [],
+				"tag": "div"
+			}
+		);
+	});
+});
+
+// grouped CSS together
+describe("rcssel/acssel/scssel", () => {
+	it('should remove/add/replace css entries in an element and return an object', () => {
+		let cel_entry = hec.cel('div');
+		let css_test = hec.acssel(cel_entry, 'foo');
+		expect(css_test).toEqual(
+			{
+				"content": "",
+				"css": ['foo'],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [],
+				"tag": "div"
+			}
+		);
+		css_test = hec.rcssel(cel_entry, 'foo');
+		expect(css_test).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [],
+				"tag": "div"
+			}
+		);
+		css_test = hec.acssel(cel_entry, 'foo');
+		expect(css_test).toEqual(
+			{
+				"content": "",
+				"css": ['foo'],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [],
+				"tag": "div"
+			}
+		);
+		cel_entry = hec.scssel(cel_entry, 'foo', 'bar');
+		expect(css_test).toEqual(
+			{
+				"content": "",
+				"css": ['bar'],
+				"id": "",
+				"name": undefined,
+				"options": {},
+				"sub": [],
+				"tag": "div"
+			}
+		);
+	});
+});
+
+// render
+describe("phfo", () => {
+	it('should render an object tree out to HTML', () => {
+		let cel_list = [
+			{
+				"id": "tag only",
+				"in": {
+					"tag": "div",
+				},
+				"out": '<div></div>'
+			},
+			{
+				"id": "tag+id only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+				},
+				"out": '<div id="div-id"></div>'
+			},
+			{
+				"id": "tag+id+content only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+					"content": "text entry",
+				},
+				"out": '<div id="div-id">text entry</div>'
+			},
+			{
+				"id": "tag+id+content+css only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+					"content": "text entry",
+					"css": ['css-a', 'css-b'],
+				},
+				"out": '<div id="div-id" class="css-a css-b">text entry</div>'
+			},
+			{
+				"id": "tag+id+content+css+options only",
+				"in": {
+					"tag": "div",
+					"id": "div-id",
+					"content": "text entry",
+					"css": ['css-a', 'css-b'],
+					"options": {"onclick": "doThis();"}
+				},
+				"out": '<div id="div-id" class="css-a css-b" onclick="doThis();">text entry</div>'
+			},
+			// various in random
+			{
+				"id": "first",
+				"in": {
+					"tag": "div",
+					"id": "",
+					"content": "",
+					"css": ["abc"],
+					"options": undefined,
+				},
+				"out": '<div class="abc"></div>'
+			}
+		];
+		for (const cel_entry of cel_list) {
+			expect(hec.phfo(
+				celCreate(cel_entry.in)
+			)).toEqual(cel_entry.out);
+		}
+		// nested
+		expect(hec.phfo(
+			hec.ael(hec.cel('div', 'B1'),
+				hec.aelx(
+					hec.cel('div', 'A'),
+					hec.cel('div', 'T1'),
+					hec.cel('div', 'T2')
+				)
+			)
+		)).toEqual(
+			'<div id="B1"><div id="A"><div id="T1"></div><div id="T2"></div></div></div>'
+		);
+	});
+});
+
+describe("phfa", () => {
+	it('should render an array tree out to HTML', () => {
+		let el_list = [
+			hec.cel('div', 'A'),
+			hec.cel('div', 'B'),
+			hec.cel('div', 'C'),
+		];
+		expect(hec.phfa(el_list)).toEqual(
+			'<div id="A"></div><div id="B"></div><div id="C"></div>'
+		);
+	});
+});
+
+// build check
+describe("phfo", () => {
+	it('should render an object tree out to HTML, extended', () => {
+		let cel_list = [
+			{
+				"id": "text input",
+				"in": hec.cel("input", 'text-id', '', ['abc']),
+				"out": '<input id="text-id" name="text-id" class="abc">'
+			},
+			{
+				"id": "text input, different name",
+				"in": hec.cel("input", 'text-id', '', ['abc'], {"name": "other-name"}),
+				"out": '<input id="text-id" name="other-name" class="abc">'
+			},
+			{
+				"id": "block test",
+				"in": hec.aelx(hec.cel('div', 'outer-id'),
+					hec.aelx(hec.cel('div', 'inner-id'),
+						hec.cel('input', 'some-id', '', ['abc'], {"type": "button", "onclick": "send()"})
+
+					)
+				),
+				"out": '<div id="outer-id"><div id="inner-id"><input id="some-id" name="some-id" class="abc" type="button" onclick="send()"></div></div>'
+			}
+		];
+		for (const cel_entry of cel_list) {
+			expect(hec.phfo(
+				cel_entry.in
+			)).toEqual(cel_entry.out);
+		}
+	});
+});
+
+// __END__
