Action box update with change from keyInObject to objectKeyExists

Also fix old parseQueryString and alias it to getQueryStringParam

.github/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: JavaScriptUtilsVitest
+run-name: ${{ github.actor}} runs vitest checks
+
+# on:
+#   push:
+#     branches:
+#       - main
+#   pull_request:
+#     branches:
+#       - main
+#       - staging
+#       - development
+
+on: [push]
+
+jobs:
+  ci-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 23
+      - name: Run `npm install`
+        run: |
+          npm install
+      - name: Run vitest and report issues
+        run: npm run test:run

.gitignore

@@ -1 +1,2 @@
 node_modules/
+coverage/*

ReadMe.md

@@ -141,6 +141,18 @@ vitest is used for all usage tests
 npx vitest
 ```
 
+for one stop tests
+
+```sh
+npm run test:run
+```
+
+To show the full coverate (of all files)
+
+```sh
+npm run test:coverage
+```
+
 Currently covered:
 
 - FormatBytes

build/test.html

@@ -52,6 +52,11 @@ document.addEventListener('DOMContentLoaded', function() {
 	console.log('AELX OUT: %o', aelx_out);
 	build_test.innerHTML += aelx_out;
 
+	// console.log("TEST URL: %o", parseQueryString("http://foor.org/?key=value"));
+	console.log("TEST URL: %o", getQueryStringParam('', "http://foor.org/?param=foo&param=other", true));
+	console.log("TEST URL: %o", parseQueryString("http://foor.org/?param=foo&param=other", ''));
+	// console.log("TEST URL: %o", getQueryStringParam('', "http://foor.org/?key=value&key=other&key=value&bar="));
+
 	// console.log('TR: %s', l10n.__('Original'));
 	// console.log('TR: %s', l10n.__('Not exists'));
 });

package.json

@@ -4,7 +4,8 @@
 	"main": "",
 	"scripts": {
 		"test": "vitest",
-		"coverage": "vitest run --coverage",
+		"test:run": "vitest run",
+		"test:coverage": "vitest run --coverage",
 		"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",
@@ -17,9 +18,11 @@
 	"devDependencies": {
 		"@eslint/js": "^9.20.0",
 		"@types/jquery": "^3.5.32",
+		"@vitest/coverage-v8": "^3.0.8",
 		"esbuild": "^0.25.0",
 		"eslint": "^9.20.1",
 		"globals": "^15.15.0",
+		"jsdom": "^26.0.0",
 		"vitest": "^3.0.8"
 	}
 }

src/utils/ActionBox.mjs

@@ -5,7 +5,7 @@ Creator:     Clemens Schwaighofer
 */
 
 export { ActionBox };
-import { keyInObject, getObjectCount } from './JavaScriptHelpers.mjs';
+import { objectKeyExists, getObjectCount } from './JavaScriptHelpers.mjs';
 import { exists } from './DomHelpers.mjs';
 import { setCenter, getWindowSize } from './ResizingAndMove.mjs';
 
@@ -155,7 +155,7 @@ class ActionBox {
 		}
 		// adjust zIndex so its above all other and set action box zindex +1
 		$('#overlayBox').show();
-		if (!keyInObject(target_id, this.zIndex.boxes)) {
+		if (!objectKeyExists(this.zIndex.boxes, target_id)) {
 			this.zIndex.boxes[target_id] = this.zIndex.max;
 			// increase by ten
 			this.zIndex.max += 10;
@@ -197,7 +197,7 @@ class ActionBox {
 		}
 		// clear storage object
 		if (
-			keyInObject(target_id, this.action_box_storage) && clean === true
+			objectKeyExists(this.action_box_storage, target_id) && clean === true
 		) {
 			this.action_box_storage[target_id] = {};
 		}
@@ -249,18 +249,18 @@ class ActionBox {
 		settings = {},
 		show_close = true
 	) {
-		if (!keyInObject(target_id, this.action_box_storage)) {
+		if (!objectKeyExists(this.action_box_storage, target_id)) {
 			this.action_box_storage[target_id] = {};
 		}
 		// settings can have the following
 		// : header_css:[]
 		// : action_box_css:[]
 		let header_css = [];
-		if (keyInObject('header_css', settings)) {
+		if (objectKeyExists(settings, 'header_css')) {
 			header_css = settings.header_css;
 		}
 		let action_box_css = [];
-		if (keyInObject('action_box_css', settings)) {
+		if (objectKeyExists(settings, 'action_box_css')) {
 			action_box_css = settings.action_box_css;
 		}
 		let elements = [];
@@ -288,7 +288,7 @@ class ActionBox {
 		// if we have header content, add that here
 		if (getObjectCount(headers) > 0) {
 			// if the element has an entry called "raw_string" then this does not need to be converted
-			if (keyInObject('raw_string', headers)) {
+			if (objectKeyExists(headers, 'raw_string')) {
 				elements.push(headers.raw_string);
 			} else {
 				elements.push(this.hec.phfo(headers));
@@ -297,7 +297,7 @@ class ActionBox {
 		// main content part (this should NOT be empty), if empty, add empty _content block
 		if (getObjectCount(contents) > 0) {
 			// if the element has an entry called "raw_string" then this does not need to be converted
-			if (keyInObject('raw_string', contents)) {
+			if (objectKeyExists(contents, 'raw_string')) {
 				elements.push(contents.raw_string);
 			} else {
 				elements.push(this.hec.phfo(contents));

src/utils/FormatBytes.mjs

@@ -19,6 +19,9 @@ function formatBytes(bytes)
 	if (typeof bytes === "bigint") {
 		bytes = Number(bytes);
 	}
+	if (isNaN(bytes)) {
+		return bytes.toString();
+	}
 	do {
 		bytes = bytes / 1024;
 		i++;

src/utils/JavaScriptHelpers.mjs

@@ -5,7 +5,8 @@ Creator:     Clemens Schwaighofer
 */
 
 export {
-	errorCatch, isFunction, executeFunctionByName,
+	errorCatch, isFunction,
+	executeFunctionByName, runFunction, runFunctionArgsArray,
 	isObject, getObjectCount,
 	keyInObject, objectKeyExists,
 	getKeyByValue, valueInObject, objectValueExists,
@@ -77,6 +78,35 @@ function executeFunctionByName(functionName, context /*, args */)
 	return context[func].apply(context, args);
 }
 
+/**
+ * call a function by string
+ * call runFunctionArgArray
+ * @param {string} name Function name to call
+ * @param {Array} arguments all next function arguments are passed on as argument to the function
+ * @returns void
+ */
+function runFunction(name)
+{
+	var args = Array.prototype.slice.call(arguments, 1);
+	runFunctionArgsArray(name, args);
+}
+
+/**
+ * call a function with a string, argumens as array
+ * @param {string} name Function name to call
+ * @param {array} args function arguments as arry
+ * @returns void
+ */
+function runFunctionArgsArray(name, args)
+{
+	var fn = window[name];
+	if(typeof fn !== 'function') {
+		return;
+	}
+
+	fn.apply(window, args);
+}
+
 /**
  * checks if a variable is an object
  * @param  {any}     val possible object

src/utils/UrlParser.mjs

@@ -5,9 +5,10 @@ Creator:     Clemens Schwaighofer
 */
 
 export { parseQueryString, getQueryStringParam };
-import { keyInObject } from './JavaScriptHelpers.mjs';
 
 /**
+ * NOTE: this original code was wrong, now using URL and parsing through
+ * getQueryStringParam
  * parses a query string from window.location.search.substring(1)
  * ALTERNATIVE CODE
  * var url = new URL(window.location.href);
@@ -16,44 +17,13 @@ import { keyInObject } from './JavaScriptHelpers.mjs';
  *                                         if not set will auto fill
  * @param  {String}        [return_key=''] if set only returns this key entry
  *                                         or empty for none
+ * @param  {Boolean}       [single=false]  if set to true then only the first found
+ *                                         will be returned
  * @return {Object|String}                 parameter entry list
  */
-function parseQueryString(query = '', return_key = '')
+function parseQueryString(query = '', return_key = '', single = false)
 {
-	if (!query) {
-		query = window.location.search.substring(1);
-	}
-	var vars = query.split('&');
-	var query_string = {};
-	for (var i = 0; i < vars.length; i++) {
-		var pair = vars[i].split('=');
-		var key = decodeURIComponent(pair[0]);
-		var value = decodeURIComponent(pair[1]);
-		// skip over run if there is nothing
-		if (!key || value === 'undefined') {
-			continue;
-		}
-		// If first entry with this name
-		if (typeof query_string[key] === 'undefined') {
-			query_string[key] = decodeURIComponent(value);
-			// If second entry with this name
-		} else if (typeof query_string[key] === 'string') {
-			var arr = [query_string[key], decodeURIComponent(value)];
-			query_string[key] = arr;
-			// If third or later entry with this name
-		} else {
-			query_string[key].push(decodeURIComponent(value));
-		}
-	}
-	if (return_key) {
-		if (keyInObject(return_key, query_string)) {
-			return query_string[return_key];
-		} else {
-			return '';
-		}
-	} else {
-		return query_string;
-	}
+	return getQueryStringParam(return_key, query, single);
 }
 
 /**

tests/FormatBytes.test.js

@@ -7,6 +7,11 @@ import {
 } from '../src/utils/FormatBytes.mjs';
 
 let bytes_map = [
+	{
+		"in": "120MB",
+		"out": "120MB",
+		"out_l": "120MB",
+	},
 	{
 		"in": -123123123,
 		"out": "-120237.42kB",
@@ -57,6 +62,7 @@ describe("formatBytes", () => {
 	it('convert bytes to human readable, round up to next set', () => {
 		// expect(formatBytes(1021152)).toBe('0.97MB');
 		for (const bytes of bytes_map) {
+			// @ts-ignore
 			expect(formatBytes(bytes.in)).toBe(bytes.out);
 		}
 	});
@@ -66,6 +72,7 @@ describe("formatBytesLong", () => {
 	it('convert bytes to human readable, keep on current set', () => {
 		expect(formatBytesLong(1021152)).toBe('997.22 KB');
 		for (const bytes of bytes_map) {
+			// @ts-ignore
 			expect(formatBytesLong(bytes.in)).toBe(bytes.out_l);
 		}
 	});

tests/HtmlElementCreator.test.js

@@ -257,6 +257,41 @@ describe("ael", () => {
 				"tag": "div"
 			}
 		);
+		let test_cel = hec.ael(
+			hec.cel('div', 'block-id'),
+			hec.cel('div', 'sub-id'),
+		);
+		expect(hec.ael(test_cel, hec.cel('div', 'new-block'), 'sub-id')).toEqual(
+			{
+				"content": "",
+				"css": [],
+				"id": "block-id",
+				"name": undefined,
+				"options": {},
+				"sub": [
+					{
+						"content": "",
+						"css": [],
+						"id": "sub-id",
+						"name": undefined,
+						"options": {},
+						"sub": [
+							{
+								"content": "",
+								"css": [],
+								"id": "new-block",
+								"name": undefined,
+								"options": {},
+								"sub": [],
+								"tag": "div"
+							}
+						],
+						"tag": "div"
+					}
+				],
+				"tag": "div"
+			}
+		);
 	});
 });
 
@@ -640,11 +675,11 @@ describe("phfo", () => {
 				"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()"})
-
+						hec.cel('input', 'some-id', '', ['abc'], {"type": "button", "onclick": "send()"}),
+						hec.cel('div', '', 'content')
 					)
 				),
-				"out": '<div id="outer-id"><div id="inner-id"><input id="some-id" name="some-id" class="abc" type="button" onclick="send()"></div></div>'
+				"out": '<div id="outer-id"><div id="inner-id"><input id="some-id" name="some-id" class="abc" type="button" onclick="send()"><div>content</div></div></div>'
 			}
 		];
 		for (const cel_entry of cel_list) {

tests/MathHelpers.test.js

@@ -24,6 +24,8 @@ describe("roundPrecision", () => {
 	it('should round numbers to a given precision', () => {
 		let val = roundPrecision(10.1234, 2);
 		expect(val).toBe(10.12);
+		// @ts-ignore
+		expect(roundPrecision("abc", 2)).toBe("abc");
 	});
 });
 

tests/UrlParser.test.js

@@ -5,17 +5,99 @@ import {
 	getQueryStringParam,
 } from '../src/utils/UrlParser.mjs';
 
-describe("parseQueryString", () => {
-	it('Should parse query string for key', () => {
-		let kv = parseQueryString("http://foor.org?key=value");
-		expect(kv).toEqual({"http://foor.org?key": "value"});
-	});
-});
-
+let url_list = [
+	{
+		"id": "no params",
+		"in": {
+			"query": "http://foor.org",
+			"search": "",
+			"single": false
+		},
+		"out": {}
+	},
+	{
+		"id": "no params",
+		"in": {
+			"query": "http://foor.org/?param",
+			"search": "",
+			"single": false
+		},
+		"out": {"param": ""}
+	},
+	{
+		"id": "one params",
+		"in": {
+			"query": "http://foor.org/?param=foo",
+			"search": "",
+			"single": false
+		},
+		"out": {"param": "foo"}
+	},
+	{
+		"id": "two params",
+		"in": {
+			"query": "http://foor.org/?param=foo&bar=other",
+			"search": "",
+			"single": false
+		},
+		"out": {"param": "foo", "bar": "other"}
+	},
+	{
+		"id": "two params, select",
+		"in": {
+			"query": "http://foor.org/?param=foo&bar=other",
+			"search": "bar",
+			"single": false
+		},
+		"out": "other"
+	},
+	{
+		"id": "two params, same",
+		"in": {
+			"query": "http://foor.org/?param=foo&param=other",
+			"search": "",
+			"single": false
+		},
+		"out": {"param": ["foo", "other"]}
+	},
+	{
+		"id": "two params, same, single but no search",
+		"in": {
+			"query": "http://foor.org/?param=foo&param=other",
+			"search": "",
+			"single": true
+		},
+		// "out": {"param": ["foo", "other"]}
+		"out": {"param": "foo"}
+	},
+	{
+		"id": "three params, same, search",
+		"in": {
+			"query": "http://foor.org/?param=foo&param=other&different=1",
+			"search": "param",
+			"single": false
+		},
+		"out": ["foo", "other"]
+	},
+];
 describe("getQueryStringParam", () => {
 	it('Should parse query string for key', () => {
-		let kv = getQueryStringParam("key", "http://foor.org?key=value");
-		expect(kv).toEqual("value");
+		for (const url of url_list) {
+			expect(
+				getQueryStringParam(url.in.search, url.in.query, url.in.single)
+			).toEqual(url.out);
+		}
+	});
+});
+describe("parseQueryString", () => {
+	it('Should parse query string for key', () => {
+		// let kv = getQueryStringParam("key", "http://foor.org?key=value");
+		// expect(kv).toEqual("value");
+		for (const url of url_list) {
+			expect(
+				parseQueryString(url.in.query, url.in.search, url.in.single)
+			).toEqual(url.out);
+		}
 	});
 });
 

vitest.config.js

@@ -0,0 +1,20 @@
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	test: {
+		environment: 'jsdom',
+		include: [
+			'tests/**/*.{test,spec}.?(c|m)[jt]s?(x)'
+		],
+		// exclude: [],
+		coverage: {
+			include: [
+				'src/',
+			],
+			exclude: [
+				'src/utils.mjs',
+			]
+		}
+	},
+});