@skirbi/sugar 0.0.15 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Changes +11 -0
- package/lib/fakedom.mjs +88 -0
- package/lib/index.mjs +1 -1
- package/lib/testing.mjs +2 -84
- package/package.json +2 -1
package/Changes
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
Revision history for @skirbi/sugar
|
|
2
2
|
|
|
3
|
+
0.0.17 2026-04-20 02:34:38Z
|
|
4
|
+
|
|
5
|
+
* Fakedom, not fakedomE
|
|
6
|
+
|
|
7
|
+
0.0.16 2026-04-20 02:29:48Z
|
|
8
|
+
|
|
9
|
+
* Introduce fakedom.mjs, can be imported as @skirbi/sugar/fakedom
|
|
10
|
+
It's used by testing.mjs and soon also in @skirbi/bolbe so it doesn't need
|
|
11
|
+
tap. Testing.mjs still exports the same API, so no breakage is expected
|
|
12
|
+
(well, the testsuite confirmed it, soo, pretty sure actually).
|
|
13
|
+
|
|
3
14
|
|
|
4
15
|
0.0.15 2026-04-18 18:38:19Z
|
|
5
16
|
|
package/lib/fakedom.mjs
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
// SPDX-FileCopyrightText: 2025, 2026 Wesley Schwengle <wesleys@opperschaap.net>
|
|
2
|
+
//
|
|
3
|
+
// SPDX-License-Identifier: MIT
|
|
4
|
+
|
|
5
|
+
import { JSDOM } from 'jsdom';
|
|
6
|
+
import { fileURLToPath, pathToFileURL } from 'url';
|
|
7
|
+
import path from 'path';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Initialize a jsdom-based DOM environment for component testing.
|
|
11
|
+
*
|
|
12
|
+
* This function:
|
|
13
|
+
* - Creates a new JSDOM instance
|
|
14
|
+
* - Exposes common DOM globals on `global`
|
|
15
|
+
* - Optionally imports one or more modules after the DOM is ready
|
|
16
|
+
*
|
|
17
|
+
* It is intended for use in test files before mounting custom elements.
|
|
18
|
+
*
|
|
19
|
+
* @param {string} [html='<!doctype html><html><body></body></html>']
|
|
20
|
+
* Initial HTML document to load into jsdom.
|
|
21
|
+
*
|
|
22
|
+
* @param {...string} modulePaths
|
|
23
|
+
* Relative paths (from project root) to modules that should be imported
|
|
24
|
+
* after the DOM environment is initialized.
|
|
25
|
+
*
|
|
26
|
+
* @returns {Promise<void>}
|
|
27
|
+
*/
|
|
28
|
+
export async function setupDomForTesting(
|
|
29
|
+
html = '<!doctype html><html><body></body></html>',
|
|
30
|
+
...modulePaths
|
|
31
|
+
) {
|
|
32
|
+
const dom = new JSDOM(html);
|
|
33
|
+
|
|
34
|
+
// Expose minimal DOM globals required for custom elements.
|
|
35
|
+
global.DocumentFragment = dom.window.DocumentFragment;
|
|
36
|
+
global.HTMLElement = dom.window.HTMLElement;
|
|
37
|
+
global.HTMLTemplateElement = dom.window.HTMLTemplateElement;
|
|
38
|
+
global.Node = dom.window.Node;
|
|
39
|
+
global.customElements = dom.window.customElements;
|
|
40
|
+
global.document = dom.window.document;
|
|
41
|
+
global.window = dom.window;
|
|
42
|
+
global.MutationObserver = dom.window.MutationObserver;
|
|
43
|
+
|
|
44
|
+
const projectRoot = process.cwd();
|
|
45
|
+
|
|
46
|
+
// Import modules after DOM is ready.
|
|
47
|
+
for (const relPath of modulePaths) {
|
|
48
|
+
const absURL = pathToFileURL(path.resolve(projectRoot, relPath));
|
|
49
|
+
await import(absURL.href);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Wait for the DOM lifecycle to settle.
|
|
55
|
+
*
|
|
56
|
+
* Resolves after one microtask and one macrotask tick.
|
|
57
|
+
*
|
|
58
|
+
* Useful in tests to ensure:
|
|
59
|
+
* - customElements upgrades have completed
|
|
60
|
+
* - connectedCallback has run
|
|
61
|
+
* - DOM mutations triggered by innerHTML have flushed
|
|
62
|
+
*
|
|
63
|
+
* @param {number} [times=1] - Number of ticks to wait.
|
|
64
|
+
* @returns {Promise<void>}
|
|
65
|
+
*/
|
|
66
|
+
export async function tick(times = 1) {
|
|
67
|
+
for (let i = 0; i < times; i++) {
|
|
68
|
+
await Promise.resolve(); // microtask
|
|
69
|
+
await new Promise(r => setTimeout(r, 0)); // macrotask
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Simulate a morph-style DOM replacement (e.g. Livewire / morphdom).
|
|
75
|
+
*
|
|
76
|
+
* Replaces the element's innerHTML and waits for lifecycle hooks
|
|
77
|
+
* and custom element upgrades to complete.
|
|
78
|
+
*
|
|
79
|
+
* Intended for testing idempotent connectedCallback behavior.
|
|
80
|
+
*
|
|
81
|
+
* @param {Element} el - The container element to replace content in.
|
|
82
|
+
* @param {string} html - The HTML string to inject.
|
|
83
|
+
* @returns {Promise<void>}
|
|
84
|
+
*/
|
|
85
|
+
export async function morphReplace(el, html) {
|
|
86
|
+
el.innerHTML = html;
|
|
87
|
+
await tick();
|
|
88
|
+
}
|
package/lib/index.mjs
CHANGED
package/lib/testing.mjs
CHANGED
|
@@ -2,54 +2,9 @@
|
|
|
2
2
|
//
|
|
3
3
|
// SPDX-License-Identifier: MIT
|
|
4
4
|
|
|
5
|
-
import { JSDOM } from 'jsdom';
|
|
6
|
-
import { fileURLToPath, pathToFileURL } from 'url';
|
|
7
|
-
import t from 'tap';
|
|
8
|
-
import path from 'path';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Initialize a jsdom-based DOM environment for component testing.
|
|
12
|
-
*
|
|
13
|
-
* This function:
|
|
14
|
-
* - Creates a new JSDOM instance
|
|
15
|
-
* - Exposes common DOM globals on `global`
|
|
16
|
-
* - Optionally imports one or more modules after the DOM is ready
|
|
17
|
-
*
|
|
18
|
-
* It is intended for use in test files before mounting custom elements.
|
|
19
|
-
*
|
|
20
|
-
* @param {string} [html='<!doctype html><html><body></body></html>']
|
|
21
|
-
* Initial HTML document to load into jsdom.
|
|
22
|
-
*
|
|
23
|
-
* @param {...string} modulePaths
|
|
24
|
-
* Relative paths (from project root) to modules that should be imported
|
|
25
|
-
* after the DOM environment is initialized.
|
|
26
|
-
*
|
|
27
|
-
* @returns {Promise<void>}
|
|
28
|
-
*/
|
|
29
|
-
export async function setupDomForTesting(
|
|
30
|
-
html = '<!doctype html><html><body></body></html>',
|
|
31
|
-
...modulePaths
|
|
32
|
-
) {
|
|
33
|
-
const dom = new JSDOM(html);
|
|
34
|
-
|
|
35
|
-
// Expose minimal DOM globals required for custom elements.
|
|
36
|
-
global.DocumentFragment = dom.window.DocumentFragment;
|
|
37
|
-
global.HTMLElement = dom.window.HTMLElement;
|
|
38
|
-
global.HTMLTemplateElement = dom.window.HTMLTemplateElement;
|
|
39
|
-
global.Node = dom.window.Node;
|
|
40
|
-
global.customElements = dom.window.customElements;
|
|
41
|
-
global.document = dom.window.document;
|
|
42
|
-
global.window = dom.window;
|
|
43
|
-
global.MutationObserver = dom.window.MutationObserver;
|
|
44
|
-
|
|
45
|
-
const projectRoot = process.cwd();
|
|
46
5
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const absURL = pathToFileURL(path.resolve(projectRoot, relPath));
|
|
50
|
-
await import(absURL.href);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
6
|
+
export { tick, morphReplace, setupDomForTesting, } from './fakedom.mjs';
|
|
7
|
+
import t from 'tap';
|
|
53
8
|
|
|
54
9
|
/**
|
|
55
10
|
* Test a component's example contract.
|
|
@@ -153,40 +108,3 @@ function stripWhitespaceTextNodes(node) {
|
|
|
153
108
|
}
|
|
154
109
|
return node;
|
|
155
110
|
}
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
* Wait for the DOM lifecycle to settle.
|
|
159
|
-
*
|
|
160
|
-
* Resolves after one microtask and one macrotask tick.
|
|
161
|
-
*
|
|
162
|
-
* Useful in tests to ensure:
|
|
163
|
-
* - customElements upgrades have completed
|
|
164
|
-
* - connectedCallback has run
|
|
165
|
-
* - DOM mutations triggered by innerHTML have flushed
|
|
166
|
-
*
|
|
167
|
-
* @param {number} [times=1] - Number of ticks to wait.
|
|
168
|
-
* @returns {Promise<void>}
|
|
169
|
-
*/
|
|
170
|
-
export async function tick(times = 1) {
|
|
171
|
-
for (let i = 0; i < times; i++) {
|
|
172
|
-
await Promise.resolve(); // microtask
|
|
173
|
-
await new Promise(r => setTimeout(r, 0)); // macrotask
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
/**
|
|
178
|
-
* Simulate a morph-style DOM replacement (e.g. Livewire / morphdom).
|
|
179
|
-
*
|
|
180
|
-
* Replaces the element's innerHTML and waits for lifecycle hooks
|
|
181
|
-
* and custom element upgrades to complete.
|
|
182
|
-
*
|
|
183
|
-
* Intended for testing idempotent connectedCallback behavior.
|
|
184
|
-
*
|
|
185
|
-
* @param {Element} el - The container element to replace content in.
|
|
186
|
-
* @param {string} html - The HTML string to inject.
|
|
187
|
-
* @returns {Promise<void>}
|
|
188
|
-
*/
|
|
189
|
-
export async function morphReplace(el, html) {
|
|
190
|
-
el.innerHTML = html;
|
|
191
|
-
await tick();
|
|
192
|
-
}
|
package/package.json
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"./aliases": "./lib/aliases.mjs",
|
|
21
21
|
"./aliases-register": "./lib/aliases-register.mjs",
|
|
22
22
|
"./boolean": "./lib/boolean.mjs",
|
|
23
|
+
"./fakedom": "./lib/fakedom.mjs",
|
|
23
24
|
"./htmlelement": "./lib/htmlelement.mjs",
|
|
24
25
|
"./htmlelement-input": "./lib/htmlelement-input.mjs",
|
|
25
26
|
"./htmlelement-select": "./lib/htmlelement-select.mjs",
|
|
@@ -50,5 +51,5 @@
|
|
|
50
51
|
},
|
|
51
52
|
"sideEffects": false,
|
|
52
53
|
"type": "module",
|
|
53
|
-
"version": "0.0.
|
|
54
|
+
"version": "0.0.17"
|
|
54
55
|
}
|