@remit/ui 0.0.103 → 0.0.104
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/package.json
CHANGED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The rendered rows are read from the DOM, so a list body that caps, collapses
|
|
3
|
+
* or filters itself below its consumer still reports what it shows.
|
|
4
|
+
*/
|
|
5
|
+
import assert from "node:assert/strict";
|
|
6
|
+
import { after, afterEach, before, beforeEach, describe, it } from "node:test";
|
|
7
|
+
import type { JSDOM } from "jsdom";
|
|
8
|
+
import { act, createElement, useState } from "react";
|
|
9
|
+
import { createRoot, type Root } from "react-dom/client";
|
|
10
|
+
import { useRenderedRowIds } from "./use-rendered-row-ids.js";
|
|
11
|
+
|
|
12
|
+
let dom: JSDOM;
|
|
13
|
+
let container: HTMLElement;
|
|
14
|
+
let root: Root;
|
|
15
|
+
let rowIds: string[] | undefined;
|
|
16
|
+
let showRows: (ids: string[]) => void;
|
|
17
|
+
|
|
18
|
+
function Harness({ initialIds }: { initialIds: string[] }) {
|
|
19
|
+
const [ids, setIds] = useState(initialIds);
|
|
20
|
+
const [element, setElement] = useState<HTMLElement | null>(null);
|
|
21
|
+
showRows = setIds;
|
|
22
|
+
rowIds = useRenderedRowIds(element);
|
|
23
|
+
return createElement(
|
|
24
|
+
"div",
|
|
25
|
+
{ ref: setElement },
|
|
26
|
+
ids.map((id) =>
|
|
27
|
+
createElement("button", {
|
|
28
|
+
key: id,
|
|
29
|
+
type: "button",
|
|
30
|
+
"data-message-id": id,
|
|
31
|
+
}),
|
|
32
|
+
),
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const settle = async () => {
|
|
37
|
+
await act(async () => {
|
|
38
|
+
await Promise.resolve();
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
before(async () => {
|
|
43
|
+
const { JSDOM: JSDOMCtor } = await import("jsdom");
|
|
44
|
+
dom = new JSDOMCtor(
|
|
45
|
+
"<!doctype html><html><body><div id=root></div></body></html>",
|
|
46
|
+
{ url: "http://localhost/", pretendToBeVisual: true },
|
|
47
|
+
);
|
|
48
|
+
globalThis.window = dom.window as unknown as typeof globalThis.window;
|
|
49
|
+
globalThis.document = dom.window.document;
|
|
50
|
+
globalThis.HTMLElement = dom.window.HTMLElement;
|
|
51
|
+
globalThis.Element = dom.window.Element;
|
|
52
|
+
globalThis.MutationObserver = dom.window.MutationObserver;
|
|
53
|
+
(
|
|
54
|
+
globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
|
|
55
|
+
).IS_REACT_ACT_ENVIRONMENT = true;
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
after(() => dom.window.close());
|
|
59
|
+
|
|
60
|
+
beforeEach(() => {
|
|
61
|
+
container = dom.window.document.getElementById(
|
|
62
|
+
"root",
|
|
63
|
+
) as unknown as HTMLElement;
|
|
64
|
+
container.innerHTML = "";
|
|
65
|
+
root = createRoot(container);
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
afterEach(() => {
|
|
69
|
+
act(() => root.unmount());
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
const mount = (initialIds: string[]) => {
|
|
73
|
+
act(() => {
|
|
74
|
+
root.render(createElement(Harness, { initialIds }));
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
describe("useRenderedRowIds", () => {
|
|
79
|
+
it("reads the rows in document order", () => {
|
|
80
|
+
mount(["m1", "m2", "m3"]);
|
|
81
|
+
assert.deepEqual(rowIds, ["m1", "m2", "m3"]);
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
it("follows rows appearing and disappearing under it", async () => {
|
|
85
|
+
mount(["m1", "m2"]);
|
|
86
|
+
act(() => showRows(["m1", "m2", "m3", "m4"]));
|
|
87
|
+
await settle();
|
|
88
|
+
assert.deepEqual(rowIds, ["m1", "m2", "m3", "m4"]);
|
|
89
|
+
|
|
90
|
+
act(() => showRows(["m3"]));
|
|
91
|
+
await settle();
|
|
92
|
+
assert.deepEqual(rowIds, ["m3"]);
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
it("says a mounted list showing nothing shows nothing", async () => {
|
|
96
|
+
mount(["m1"]);
|
|
97
|
+
act(() => showRows([]));
|
|
98
|
+
await settle();
|
|
99
|
+
assert.deepEqual(rowIds, []);
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
it("keeps the same array while the rows are unchanged", async () => {
|
|
103
|
+
mount(["m1", "m2"]);
|
|
104
|
+
const first = rowIds;
|
|
105
|
+
act(() => showRows(["m1", "m2"]));
|
|
106
|
+
await settle();
|
|
107
|
+
assert.equal(rowIds, first);
|
|
108
|
+
});
|
|
109
|
+
});
|