-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.test.js
123 lines (91 loc) · 3.99 KB
/
index.test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import assert from "node:assert";
import test from "node:test";
import { JSDOM } from "jsdom";
import TemplateTemplate from "@jgarber/templatetemplate";
const html = `\
<!doctype html>
<html>
<body>
<template id="templ">
<div><a></a></div>
</template>
</body>
</html>
`;
test.before(() => {
const { window } = new JSDOM(html);
const { document, DocumentFragment, HTMLElement, HTMLTemplateElement } = window;
Object.assign(globalThis, { document, DocumentFragment, HTMLElement, HTMLTemplateElement, window });
});
test("is a function", () => {
assert.strictEqual(typeof TemplateTemplate, "function");
});
test("when `template` argument is null", () => {
assert.throws(() => TemplateTemplate(), {
message: /is not an HTMLTemplateElement$/,
name: "TypeError",
});
});
test("when `template` argument is not an HTMLTemplateElement", () => {
assert.throws(() => TemplateTemplate(document.createElement("div")), {
message: /is not an HTMLTemplateElement$/,
name: "TypeError",
});
});
test("when `template` argument references an element that does not exist", () => {
assert.throws(() => TemplateTemplate("#foo"), {
message: /is not an HTMLTemplateElement$/,
name: "TypeError",
});
});
test("when `template` argument is an HTMLElement", () => {
const renderedTemplate = TemplateTemplate(document.querySelector("#templ"));
assert.ok(renderedTemplate instanceof DocumentFragment);
assert.strictEqual(renderedTemplate.querySelector("div").innerHTML, "<a></a>");
});
test("when `template` argument is a string", () => {
const renderedTemplate = TemplateTemplate("#templ");
assert.ok(renderedTemplate instanceof DocumentFragment);
assert.strictEqual(renderedTemplate.querySelector("div").innerHTML, "<a></a>");
});
test("when `insertions` argument is not an object", () => {
const template = document.createElement("template");
const expectation = {
message: /is not an Object$/,
name: "TypeError",
};
assert.throws(() => TemplateTemplate(template, "foo"), expectation);
assert.throws(() => TemplateTemplate(template, null), expectation);
assert.throws(() => TemplateTemplate(template, []), expectation);
});
test("when `insertions` argument includes a null value", () => {
const renderedTemplate = TemplateTemplate("#templ", { div: null });
assert.strictEqual(renderedTemplate.querySelector("div").outerHTML, "<div><a></a></div>");
});
test("when `insertions` argument includes a string value", () => {
const renderedTemplate = TemplateTemplate("#templ", { a: "foo" });
assert.strictEqual(renderedTemplate.querySelector("div").innerHTML, "<a>foo</a>");
});
test("when `insertions` argument includes an array value", () => {
const insertions = { a: ["foo", { href: "https://example.com" }] };
const renderedTemplate = TemplateTemplate("#templ", insertions);
assert.strictEqual(renderedTemplate.querySelector("div").innerHTML, `<a href="https://example.com">foo</a>`);
});
test("when `insertions` argument includes an array value with null text", () => {
const insertions = { div: [null, { class: "example" }] };
const renderedTemplate = TemplateTemplate("#templ", insertions);
assert.strictEqual(renderedTemplate.querySelector("div").outerHTML, `<div class="example"><a></a></div>`);
});
test("when `insertions` argument includes an HTMLElement value", () => {
const renderedTemplate = TemplateTemplate("#templ", { a: document.createElement("span") });
assert.strictEqual(renderedTemplate.querySelector("div").innerHTML, "<a><span></span></a>");
});
test("when `insertions` argument includes a TemplateTemplate value", () => {
const template = document.createElement("template");
template.id = "templ2";
template.innerHTML = "<b></b>";
document.body.append(template);
const insertions = { a: TemplateTemplate("#templ2", { b: ["foo", { class: "bar" }] }) };
const renderedTemplate = TemplateTemplate("#templ", insertions);
assert.strictEqual(renderedTemplate.querySelector("div").innerHTML, `<a><b class="bar">foo</b></a>`);
});