Add testing for HtmlElementCreator and fix ...args calls
All args passthrough class where missing the leading "..." Added Testing to HtmlElementCreator
This commit is contained in:
@@ -4,12 +4,17 @@
|
|||||||
<script type="text/javascript" src="js/general/jquery.min.js"></script>
|
<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/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.min.js"></script>
|
||||||
|
<!-- <script type="text/javascript" src="js/output/utils.js"></script> -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
<h1>JavaScript Utils Test</h1>
|
<h1>JavaScript Utils Test</h1>
|
||||||
<div id="test-div">
|
<div id="test-div">
|
||||||
</div>
|
</div>
|
||||||
|
<div><hr></div>
|
||||||
|
<div id="build-test">
|
||||||
|
</div>
|
||||||
|
<div><hr></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<script languagae="JavaScript">
|
<script languagae="JavaScript">
|
||||||
@@ -17,6 +22,7 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
console.log('JavaScript Utils Test');
|
console.log('JavaScript Utils Test');
|
||||||
let el = document.getElementById('test-div');
|
let el = document.getElementById('test-div');
|
||||||
|
let build_test = document.getElementById('build-test');
|
||||||
if (el === null) {
|
if (el === null) {
|
||||||
throw new Error("element test-div not found");
|
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>formatBytes: ' + formatBytes(bytes) + '</div>';
|
||||||
el.innerHTML += '<div>formatBytesLong: ' + formatBytesLong(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.__('Original'));
|
||||||
// console.log('TR: %s', l10n.__('Not exists'));
|
// console.log('TR: %s', l10n.__('Not exists'));
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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-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": "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-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",
|
"author": "Clemens Schwaighofer",
|
||||||
"license": "",
|
"license": "",
|
||||||
|
|||||||
@@ -197,7 +197,7 @@ function roundPrecision(number, prec) // eslint-disable-line no-unused-vars
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
function formatString(string, ...args) // eslint-disable-line no-unused-vars
|
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
|
// @ts-ignore
|
||||||
function aelx(base, ...attach) // eslint-disable-line no-unused-vars
|
function aelx(base, ...attach) // eslint-disable-line no-unused-vars
|
||||||
{
|
{
|
||||||
return hec.aelx(base, attach);
|
return hec.aelx(base, ...attach);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -26,7 +26,8 @@ class HtmlElementCreator {
|
|||||||
return {
|
return {
|
||||||
tag: tag,
|
tag: tag,
|
||||||
id: id,
|
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,
|
content: content,
|
||||||
css: css,
|
css: css,
|
||||||
options: options,
|
options: options,
|
||||||
@@ -46,7 +47,6 @@ class HtmlElementCreator {
|
|||||||
if (id) {
|
if (id) {
|
||||||
// base id match already
|
// base id match already
|
||||||
if (base.id == id) {
|
if (base.id == id) {
|
||||||
// base.sub.push(Object.assign({}, attach));
|
|
||||||
base.sub.push(deepCopyFunction(attach));
|
base.sub.push(deepCopyFunction(attach));
|
||||||
} else {
|
} else {
|
||||||
// sub check
|
// sub check
|
||||||
@@ -58,7 +58,6 @@ class HtmlElementCreator {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// base.sub.push(Object.assign({}, attach));
|
|
||||||
base.sub.push(deepCopyFunction(attach));
|
base.sub.push(deepCopyFunction(attach));
|
||||||
}
|
}
|
||||||
return base;
|
return base;
|
||||||
@@ -74,7 +73,6 @@ class HtmlElementCreator {
|
|||||||
aelx(base, ...attach)
|
aelx(base, ...attach)
|
||||||
{
|
{
|
||||||
for (var i = 0; i < attach.length; i ++) {
|
for (var i = 0; i < attach.length; i ++) {
|
||||||
// base.sub.push(Object.assign({}, attach[i]));
|
|
||||||
base.sub.push(deepCopyFunction(attach[i]));
|
base.sub.push(deepCopyFunction(attach[i]));
|
||||||
}
|
}
|
||||||
return base;
|
return base;
|
||||||
@@ -90,7 +88,6 @@ class HtmlElementCreator {
|
|||||||
aelxar(base, attach)
|
aelxar(base, attach)
|
||||||
{
|
{
|
||||||
for (var i = 0; i < attach.length; i ++) {
|
for (var i = 0; i < attach.length; i ++) {
|
||||||
// base.sub.push(Object.assign({}, attach[i]));
|
|
||||||
base.sub.push(deepCopyFunction(attach[i]));
|
base.sub.push(deepCopyFunction(attach[i]));
|
||||||
}
|
}
|
||||||
return base;
|
return base;
|
||||||
@@ -149,6 +146,7 @@ class HtmlElementCreator {
|
|||||||
{
|
{
|
||||||
this.rcssel(_element, rcss);
|
this.rcssel(_element, rcss);
|
||||||
this.acssel(_element, acss);
|
this.acssel(_element, acss);
|
||||||
|
return _element;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
658
tests/HtmlElementCreator.test.js
Normal file
658
tests/HtmlElementCreator.test.js
Normal file
@@ -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__
|
||||||
Reference in New Issue
Block a user