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:
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