JavaScript.utils/tests/HtmlElementCreator.test.js

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"
			}
		);
		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"
			}
		);
	});
});

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()"}),
						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>content</div></div></div>'
			}
		];
		for (const cel_entry of cel_list) {
			expect(hec.phfo(
				cel_entry.in
			)).toEqual(cel_entry.out);
		}
	});
});

// __END__