react-arborist 3.10.0 → 3.10.1
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/dist/main/components/default-container.test.js +40 -12
- package/dist/main/components/row-container.js +7 -1
- package/dist/main/interfaces/tree-api.js +2 -2
- package/dist/main/interfaces/tree-api.test.js +51 -0
- package/dist/module/components/default-container.test.js +41 -13
- package/dist/module/components/row-container.js +7 -1
- package/dist/module/interfaces/tree-api.js +2 -2
- package/dist/module/interfaces/tree-api.test.js +51 -0
- package/package.json +1 -1
- package/src/components/default-container.test.tsx +30 -11
- package/src/components/row-container.tsx +6 -0
- package/src/interfaces/tree-api.test.ts +59 -0
- package/src/interfaces/tree-api.ts +2 -2
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
2
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
12
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
13
|
const react_1 = require("@testing-library/react");
|
|
@@ -13,33 +22,52 @@ const data = [
|
|
|
13
22
|
],
|
|
14
23
|
},
|
|
15
24
|
];
|
|
25
|
+
/* Selecting a row kicks off tree.scrollTo(), whose promise resolves on a
|
|
26
|
+
microtask after fireEvent's synchronous act() scope has exited — the
|
|
27
|
+
resulting List scrollToItem() update would otherwise warn about not being
|
|
28
|
+
wrapped in act(). Awaiting an async act flushes that trailing update. */
|
|
29
|
+
function click(el, init) {
|
|
30
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
31
|
+
yield (0, react_1.act)(() => __awaiter(this, void 0, void 0, function* () {
|
|
32
|
+
react_1.fireEvent.click(el, init);
|
|
33
|
+
}));
|
|
34
|
+
});
|
|
35
|
+
}
|
|
16
36
|
/* #303: multi-select should respond to Ctrl+Click (Windows) as well as
|
|
17
37
|
Cmd/Meta+Click (macOS). */
|
|
18
|
-
test("Ctrl+Click adds a row to the selection (#303)", () => {
|
|
38
|
+
test("Ctrl+Click adds a row to the selection (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
19
39
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true }));
|
|
20
40
|
const [, a, b] = react_1.screen.getAllByRole("treeitem");
|
|
21
|
-
|
|
41
|
+
yield click(a);
|
|
22
42
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
23
|
-
|
|
43
|
+
yield click(b, { ctrlKey: true });
|
|
24
44
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
25
45
|
expect(b.getAttribute("aria-selected")).toBe("true");
|
|
26
|
-
});
|
|
27
|
-
test("Ctrl+Click toggles an already-selected row off (#303)", () => {
|
|
46
|
+
}));
|
|
47
|
+
test("Ctrl+Click toggles an already-selected row off (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
28
48
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true }));
|
|
29
49
|
const [, a, b] = react_1.screen.getAllByRole("treeitem");
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
50
|
+
yield click(a);
|
|
51
|
+
yield click(b, { ctrlKey: true });
|
|
52
|
+
yield click(b, { ctrlKey: true });
|
|
33
53
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
34
54
|
expect(b.getAttribute("aria-selected")).toBe("false");
|
|
35
|
-
});
|
|
36
|
-
test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => {
|
|
55
|
+
}));
|
|
56
|
+
test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
37
57
|
(0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true, disableMultiSelection: true }));
|
|
38
58
|
const [, a, b] = react_1.screen.getAllByRole("treeitem");
|
|
39
|
-
|
|
40
|
-
|
|
59
|
+
yield click(a);
|
|
60
|
+
yield click(b, { ctrlKey: true });
|
|
41
61
|
expect(a.getAttribute("aria-selected")).toBe("false");
|
|
42
62
|
expect(b.getAttribute("aria-selected")).toBe("true");
|
|
63
|
+
}));
|
|
64
|
+
/* #10: a row's background/selection highlight must span the full scrollable
|
|
65
|
+
width, not stop at the viewport edge, when content overflows horizontally. */
|
|
66
|
+
test("rows get min-width: max-content so the highlight spans overflow (#10)", () => {
|
|
67
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true }));
|
|
68
|
+
for (const row of react_1.screen.getAllByRole("treeitem")) {
|
|
69
|
+
expect(row.style.minWidth).toBe("max-content");
|
|
70
|
+
}
|
|
43
71
|
});
|
|
44
72
|
/* #325: forward an accessible name and multiselectable state onto the
|
|
45
73
|
role="tree" element. */
|
|
@@ -61,7 +61,13 @@ exports.RowContainer = react_1.default.memo(function RowContainer({ index, style
|
|
|
61
61
|
const nodeStyle = (0, react_1.useMemo)(() => ({ paddingLeft: indent }), [indent]);
|
|
62
62
|
const rowStyle = (0, react_1.useMemo)(() => {
|
|
63
63
|
var _a, _b;
|
|
64
|
-
return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0)
|
|
64
|
+
return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0),
|
|
65
|
+
// react-window gives the row width: 100% of the viewport. When a deeply
|
|
66
|
+
// nested (or long) node overflows horizontally, that clips the row's
|
|
67
|
+
// background/selection highlight at the viewport edge. min-width:
|
|
68
|
+
// max-content lets the row grow with its content so the highlight spans
|
|
69
|
+
// the full scrollable width (#10).
|
|
70
|
+
minWidth: "max-content" }));
|
|
65
71
|
}, [style, tree.props.padding, tree.props.paddingTop]);
|
|
66
72
|
const rowAttrs = {
|
|
67
73
|
role: "treeitem",
|
|
@@ -463,12 +463,13 @@ class TreeApi {
|
|
|
463
463
|
safeRun(this.props.onSelect, this.selectedNodes);
|
|
464
464
|
}
|
|
465
465
|
deselectAll() {
|
|
466
|
+
// setSelection fires onSelect; don't fire it again here (see #332).
|
|
466
467
|
this.setSelection({ ids: [], anchor: null, mostRecent: null });
|
|
467
|
-
safeRun(this.props.onSelect, this.selectedNodes);
|
|
468
468
|
}
|
|
469
469
|
selectAll() {
|
|
470
470
|
var _a, _b, _c;
|
|
471
471
|
const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
|
|
472
|
+
// setSelection fires onSelect; don't fire it again here (see #332).
|
|
472
473
|
this.setSelection({
|
|
473
474
|
ids: allSelectableNodes,
|
|
474
475
|
anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
|
|
@@ -477,7 +478,6 @@ class TreeApi {
|
|
|
477
478
|
this.dispatch((0, focus_slice_1.focus)((_c = this.lastNode) === null || _c === void 0 ? void 0 : _c.id));
|
|
478
479
|
if (this.focusedNode)
|
|
479
480
|
safeRun(this.props.onFocus, this.focusedNode);
|
|
480
|
-
safeRun(this.props.onSelect, this.selectedNodes);
|
|
481
481
|
}
|
|
482
482
|
filterSelectableNodes(nodes) {
|
|
483
483
|
return nodes
|
|
@@ -43,3 +43,54 @@ test("variable rowHeight function", () => {
|
|
|
43
43
|
// Out-of-range index falls back to the default height, never an invalid 0.
|
|
44
44
|
expect(api.rowHeightAt(99)).toBe(24);
|
|
45
45
|
});
|
|
46
|
+
describe("onSelect fires exactly once per selection method (#332)", () => {
|
|
47
|
+
function setupWithSpy() {
|
|
48
|
+
const onSelect = jest.fn();
|
|
49
|
+
const api = setupApi({ data: rowData, onSelect });
|
|
50
|
+
return { api, onSelect };
|
|
51
|
+
}
|
|
52
|
+
test("setSelection", () => {
|
|
53
|
+
const { api, onSelect } = setupWithSpy();
|
|
54
|
+
api.setSelection({ ids: ["a"], anchor: "a", mostRecent: "a" });
|
|
55
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
56
|
+
});
|
|
57
|
+
test("select", () => {
|
|
58
|
+
const { api, onSelect } = setupWithSpy();
|
|
59
|
+
api.select("a");
|
|
60
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
61
|
+
});
|
|
62
|
+
test("selectMulti", () => {
|
|
63
|
+
const { api, onSelect } = setupWithSpy();
|
|
64
|
+
api.selectMulti("a");
|
|
65
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
66
|
+
});
|
|
67
|
+
test("selectContiguous", () => {
|
|
68
|
+
const { api, onSelect } = setupWithSpy();
|
|
69
|
+
api.select("a");
|
|
70
|
+
onSelect.mockClear();
|
|
71
|
+
api.selectContiguous("c");
|
|
72
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
73
|
+
});
|
|
74
|
+
test("selectAll", () => {
|
|
75
|
+
const { api, onSelect } = setupWithSpy();
|
|
76
|
+
api.selectAll();
|
|
77
|
+
expect(api.selectedIds.size).toBe(3);
|
|
78
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
79
|
+
});
|
|
80
|
+
test("deselectAll", () => {
|
|
81
|
+
const { api, onSelect } = setupWithSpy();
|
|
82
|
+
api.selectAll();
|
|
83
|
+
onSelect.mockClear();
|
|
84
|
+
api.deselectAll();
|
|
85
|
+
expect(api.selectedIds.size).toBe(0);
|
|
86
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
87
|
+
});
|
|
88
|
+
test("deselect", () => {
|
|
89
|
+
const { api, onSelect } = setupWithSpy();
|
|
90
|
+
api.selectMulti("a");
|
|
91
|
+
api.selectMulti("b");
|
|
92
|
+
onSelect.mockClear();
|
|
93
|
+
api.deselect("a");
|
|
94
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
95
|
+
});
|
|
96
|
+
});
|
|
@@ -1,5 +1,14 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
1
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { fireEvent, render, screen } from "@testing-library/react";
|
|
11
|
+
import { act, fireEvent, render, screen } from "@testing-library/react";
|
|
3
12
|
import { Tree } from "./tree";
|
|
4
13
|
const data = [
|
|
5
14
|
{
|
|
@@ -11,33 +20,52 @@ const data = [
|
|
|
11
20
|
],
|
|
12
21
|
},
|
|
13
22
|
];
|
|
23
|
+
/* Selecting a row kicks off tree.scrollTo(), whose promise resolves on a
|
|
24
|
+
microtask after fireEvent's synchronous act() scope has exited — the
|
|
25
|
+
resulting List scrollToItem() update would otherwise warn about not being
|
|
26
|
+
wrapped in act(). Awaiting an async act flushes that trailing update. */
|
|
27
|
+
function click(el, init) {
|
|
28
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
29
|
+
yield act(() => __awaiter(this, void 0, void 0, function* () {
|
|
30
|
+
fireEvent.click(el, init);
|
|
31
|
+
}));
|
|
32
|
+
});
|
|
33
|
+
}
|
|
14
34
|
/* #303: multi-select should respond to Ctrl+Click (Windows) as well as
|
|
15
35
|
Cmd/Meta+Click (macOS). */
|
|
16
|
-
test("Ctrl+Click adds a row to the selection (#303)", () => {
|
|
36
|
+
test("Ctrl+Click adds a row to the selection (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
17
37
|
render(_jsx(Tree, { data: data, openByDefault: true }));
|
|
18
38
|
const [, a, b] = screen.getAllByRole("treeitem");
|
|
19
|
-
|
|
39
|
+
yield click(a);
|
|
20
40
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
21
|
-
|
|
41
|
+
yield click(b, { ctrlKey: true });
|
|
22
42
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
23
43
|
expect(b.getAttribute("aria-selected")).toBe("true");
|
|
24
|
-
});
|
|
25
|
-
test("Ctrl+Click toggles an already-selected row off (#303)", () => {
|
|
44
|
+
}));
|
|
45
|
+
test("Ctrl+Click toggles an already-selected row off (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
26
46
|
render(_jsx(Tree, { data: data, openByDefault: true }));
|
|
27
47
|
const [, a, b] = screen.getAllByRole("treeitem");
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
48
|
+
yield click(a);
|
|
49
|
+
yield click(b, { ctrlKey: true });
|
|
50
|
+
yield click(b, { ctrlKey: true });
|
|
31
51
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
32
52
|
expect(b.getAttribute("aria-selected")).toBe("false");
|
|
33
|
-
});
|
|
34
|
-
test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => {
|
|
53
|
+
}));
|
|
54
|
+
test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
35
55
|
render(_jsx(Tree, { data: data, openByDefault: true, disableMultiSelection: true }));
|
|
36
56
|
const [, a, b] = screen.getAllByRole("treeitem");
|
|
37
|
-
|
|
38
|
-
|
|
57
|
+
yield click(a);
|
|
58
|
+
yield click(b, { ctrlKey: true });
|
|
39
59
|
expect(a.getAttribute("aria-selected")).toBe("false");
|
|
40
60
|
expect(b.getAttribute("aria-selected")).toBe("true");
|
|
61
|
+
}));
|
|
62
|
+
/* #10: a row's background/selection highlight must span the full scrollable
|
|
63
|
+
width, not stop at the viewport edge, when content overflows horizontally. */
|
|
64
|
+
test("rows get min-width: max-content so the highlight spans overflow (#10)", () => {
|
|
65
|
+
render(_jsx(Tree, { data: data, openByDefault: true }));
|
|
66
|
+
for (const row of screen.getAllByRole("treeitem")) {
|
|
67
|
+
expect(row.style.minWidth).toBe("max-content");
|
|
68
|
+
}
|
|
41
69
|
});
|
|
42
70
|
/* #325: forward an accessible name and multiselectable state onto the
|
|
43
71
|
role="tree" element. */
|
|
@@ -35,7 +35,13 @@ export const RowContainer = React.memo(function RowContainer({ index, style }) {
|
|
|
35
35
|
const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
|
|
36
36
|
const rowStyle = useMemo(() => {
|
|
37
37
|
var _a, _b;
|
|
38
|
-
return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0)
|
|
38
|
+
return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0),
|
|
39
|
+
// react-window gives the row width: 100% of the viewport. When a deeply
|
|
40
|
+
// nested (or long) node overflows horizontally, that clips the row's
|
|
41
|
+
// background/selection highlight at the viewport edge. min-width:
|
|
42
|
+
// max-content lets the row grow with its content so the highlight spans
|
|
43
|
+
// the full scrollable width (#10).
|
|
44
|
+
minWidth: "max-content" }));
|
|
39
45
|
}, [style, tree.props.padding, tree.props.paddingTop]);
|
|
40
46
|
const rowAttrs = {
|
|
41
47
|
role: "treeitem",
|
|
@@ -437,12 +437,13 @@ export class TreeApi {
|
|
|
437
437
|
safeRun(this.props.onSelect, this.selectedNodes);
|
|
438
438
|
}
|
|
439
439
|
deselectAll() {
|
|
440
|
+
// setSelection fires onSelect; don't fire it again here (see #332).
|
|
440
441
|
this.setSelection({ ids: [], anchor: null, mostRecent: null });
|
|
441
|
-
safeRun(this.props.onSelect, this.selectedNodes);
|
|
442
442
|
}
|
|
443
443
|
selectAll() {
|
|
444
444
|
var _a, _b, _c;
|
|
445
445
|
const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
|
|
446
|
+
// setSelection fires onSelect; don't fire it again here (see #332).
|
|
446
447
|
this.setSelection({
|
|
447
448
|
ids: allSelectableNodes,
|
|
448
449
|
anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
|
|
@@ -451,7 +452,6 @@ export class TreeApi {
|
|
|
451
452
|
this.dispatch(focus((_c = this.lastNode) === null || _c === void 0 ? void 0 : _c.id));
|
|
452
453
|
if (this.focusedNode)
|
|
453
454
|
safeRun(this.props.onFocus, this.focusedNode);
|
|
454
|
-
safeRun(this.props.onSelect, this.selectedNodes);
|
|
455
455
|
}
|
|
456
456
|
filterSelectableNodes(nodes) {
|
|
457
457
|
return nodes
|
|
@@ -41,3 +41,54 @@ test("variable rowHeight function", () => {
|
|
|
41
41
|
// Out-of-range index falls back to the default height, never an invalid 0.
|
|
42
42
|
expect(api.rowHeightAt(99)).toBe(24);
|
|
43
43
|
});
|
|
44
|
+
describe("onSelect fires exactly once per selection method (#332)", () => {
|
|
45
|
+
function setupWithSpy() {
|
|
46
|
+
const onSelect = jest.fn();
|
|
47
|
+
const api = setupApi({ data: rowData, onSelect });
|
|
48
|
+
return { api, onSelect };
|
|
49
|
+
}
|
|
50
|
+
test("setSelection", () => {
|
|
51
|
+
const { api, onSelect } = setupWithSpy();
|
|
52
|
+
api.setSelection({ ids: ["a"], anchor: "a", mostRecent: "a" });
|
|
53
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
54
|
+
});
|
|
55
|
+
test("select", () => {
|
|
56
|
+
const { api, onSelect } = setupWithSpy();
|
|
57
|
+
api.select("a");
|
|
58
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
59
|
+
});
|
|
60
|
+
test("selectMulti", () => {
|
|
61
|
+
const { api, onSelect } = setupWithSpy();
|
|
62
|
+
api.selectMulti("a");
|
|
63
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
64
|
+
});
|
|
65
|
+
test("selectContiguous", () => {
|
|
66
|
+
const { api, onSelect } = setupWithSpy();
|
|
67
|
+
api.select("a");
|
|
68
|
+
onSelect.mockClear();
|
|
69
|
+
api.selectContiguous("c");
|
|
70
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
71
|
+
});
|
|
72
|
+
test("selectAll", () => {
|
|
73
|
+
const { api, onSelect } = setupWithSpy();
|
|
74
|
+
api.selectAll();
|
|
75
|
+
expect(api.selectedIds.size).toBe(3);
|
|
76
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
77
|
+
});
|
|
78
|
+
test("deselectAll", () => {
|
|
79
|
+
const { api, onSelect } = setupWithSpy();
|
|
80
|
+
api.selectAll();
|
|
81
|
+
onSelect.mockClear();
|
|
82
|
+
api.deselectAll();
|
|
83
|
+
expect(api.selectedIds.size).toBe(0);
|
|
84
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
85
|
+
});
|
|
86
|
+
test("deselect", () => {
|
|
87
|
+
const { api, onSelect } = setupWithSpy();
|
|
88
|
+
api.selectMulti("a");
|
|
89
|
+
api.selectMulti("b");
|
|
90
|
+
onSelect.mockClear();
|
|
91
|
+
api.deselect("a");
|
|
92
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
93
|
+
});
|
|
94
|
+
});
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { fireEvent, render, screen } from "@testing-library/react";
|
|
1
|
+
import { act, fireEvent, render, screen } from "@testing-library/react";
|
|
2
2
|
import { Tree } from "./tree";
|
|
3
3
|
|
|
4
4
|
type Datum = { id: string; name: string; children?: Datum[] };
|
|
@@ -14,43 +14,62 @@ const data: Datum[] = [
|
|
|
14
14
|
},
|
|
15
15
|
];
|
|
16
16
|
|
|
17
|
+
/* Selecting a row kicks off tree.scrollTo(), whose promise resolves on a
|
|
18
|
+
microtask after fireEvent's synchronous act() scope has exited — the
|
|
19
|
+
resulting List scrollToItem() update would otherwise warn about not being
|
|
20
|
+
wrapped in act(). Awaiting an async act flushes that trailing update. */
|
|
21
|
+
async function click(el: Element, init?: MouseEventInit) {
|
|
22
|
+
await act(async () => {
|
|
23
|
+
fireEvent.click(el, init);
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
|
|
17
27
|
/* #303: multi-select should respond to Ctrl+Click (Windows) as well as
|
|
18
28
|
Cmd/Meta+Click (macOS). */
|
|
19
|
-
test("Ctrl+Click adds a row to the selection (#303)", () => {
|
|
29
|
+
test("Ctrl+Click adds a row to the selection (#303)", async () => {
|
|
20
30
|
render(<Tree<Datum> data={data} openByDefault />);
|
|
21
31
|
const [, a, b] = screen.getAllByRole("treeitem");
|
|
22
32
|
|
|
23
|
-
|
|
33
|
+
await click(a);
|
|
24
34
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
25
35
|
|
|
26
|
-
|
|
36
|
+
await click(b, { ctrlKey: true });
|
|
27
37
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
28
38
|
expect(b.getAttribute("aria-selected")).toBe("true");
|
|
29
39
|
});
|
|
30
40
|
|
|
31
|
-
test("Ctrl+Click toggles an already-selected row off (#303)", () => {
|
|
41
|
+
test("Ctrl+Click toggles an already-selected row off (#303)", async () => {
|
|
32
42
|
render(<Tree<Datum> data={data} openByDefault />);
|
|
33
43
|
const [, a, b] = screen.getAllByRole("treeitem");
|
|
34
44
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
45
|
+
await click(a);
|
|
46
|
+
await click(b, { ctrlKey: true });
|
|
47
|
+
await click(b, { ctrlKey: true });
|
|
38
48
|
|
|
39
49
|
expect(a.getAttribute("aria-selected")).toBe("true");
|
|
40
50
|
expect(b.getAttribute("aria-selected")).toBe("false");
|
|
41
51
|
});
|
|
42
52
|
|
|
43
|
-
test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => {
|
|
53
|
+
test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", async () => {
|
|
44
54
|
render(<Tree<Datum> data={data} openByDefault disableMultiSelection />);
|
|
45
55
|
const [, a, b] = screen.getAllByRole("treeitem");
|
|
46
56
|
|
|
47
|
-
|
|
48
|
-
|
|
57
|
+
await click(a);
|
|
58
|
+
await click(b, { ctrlKey: true });
|
|
49
59
|
|
|
50
60
|
expect(a.getAttribute("aria-selected")).toBe("false");
|
|
51
61
|
expect(b.getAttribute("aria-selected")).toBe("true");
|
|
52
62
|
});
|
|
53
63
|
|
|
64
|
+
/* #10: a row's background/selection highlight must span the full scrollable
|
|
65
|
+
width, not stop at the viewport edge, when content overflows horizontally. */
|
|
66
|
+
test("rows get min-width: max-content so the highlight spans overflow (#10)", () => {
|
|
67
|
+
render(<Tree<Datum> data={data} openByDefault />);
|
|
68
|
+
for (const row of screen.getAllByRole("treeitem")) {
|
|
69
|
+
expect((row as HTMLElement).style.minWidth).toBe("max-content");
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
|
|
54
73
|
/* #325: forward an accessible name and multiselectable state onto the
|
|
55
74
|
role="tree" element. */
|
|
56
75
|
test("forwards aria-label to the role=tree element (#325)", () => {
|
|
@@ -48,6 +48,12 @@ export const RowContainer = React.memo(function RowContainer<T>({ index, style }
|
|
|
48
48
|
() => ({
|
|
49
49
|
...style,
|
|
50
50
|
top: parseFloat(style.top as string) + (tree.props.padding ?? tree.props.paddingTop ?? 0),
|
|
51
|
+
// react-window gives the row width: 100% of the viewport. When a deeply
|
|
52
|
+
// nested (or long) node overflows horizontally, that clips the row's
|
|
53
|
+
// background/selection highlight at the viewport edge. min-width:
|
|
54
|
+
// max-content lets the row grow with its content so the highlight spans
|
|
55
|
+
// the full scrollable width (#10).
|
|
56
|
+
minWidth: "max-content",
|
|
51
57
|
}),
|
|
52
58
|
[style, tree.props.padding, tree.props.paddingTop],
|
|
53
59
|
);
|
|
@@ -48,3 +48,62 @@ test("variable rowHeight function", () => {
|
|
|
48
48
|
// Out-of-range index falls back to the default height, never an invalid 0.
|
|
49
49
|
expect(api.rowHeightAt(99)).toBe(24);
|
|
50
50
|
});
|
|
51
|
+
|
|
52
|
+
describe("onSelect fires exactly once per selection method (#332)", () => {
|
|
53
|
+
function setupWithSpy() {
|
|
54
|
+
const onSelect = jest.fn();
|
|
55
|
+
const api = setupApi({ data: rowData, onSelect });
|
|
56
|
+
return { api, onSelect };
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
test("setSelection", () => {
|
|
60
|
+
const { api, onSelect } = setupWithSpy();
|
|
61
|
+
api.setSelection({ ids: ["a"], anchor: "a", mostRecent: "a" });
|
|
62
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
test("select", () => {
|
|
66
|
+
const { api, onSelect } = setupWithSpy();
|
|
67
|
+
api.select("a");
|
|
68
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
test("selectMulti", () => {
|
|
72
|
+
const { api, onSelect } = setupWithSpy();
|
|
73
|
+
api.selectMulti("a");
|
|
74
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
test("selectContiguous", () => {
|
|
78
|
+
const { api, onSelect } = setupWithSpy();
|
|
79
|
+
api.select("a");
|
|
80
|
+
onSelect.mockClear();
|
|
81
|
+
api.selectContiguous("c");
|
|
82
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
test("selectAll", () => {
|
|
86
|
+
const { api, onSelect } = setupWithSpy();
|
|
87
|
+
api.selectAll();
|
|
88
|
+
expect(api.selectedIds.size).toBe(3);
|
|
89
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
test("deselectAll", () => {
|
|
93
|
+
const { api, onSelect } = setupWithSpy();
|
|
94
|
+
api.selectAll();
|
|
95
|
+
onSelect.mockClear();
|
|
96
|
+
api.deselectAll();
|
|
97
|
+
expect(api.selectedIds.size).toBe(0);
|
|
98
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
test("deselect", () => {
|
|
102
|
+
const { api, onSelect } = setupWithSpy();
|
|
103
|
+
api.selectMulti("a");
|
|
104
|
+
api.selectMulti("b");
|
|
105
|
+
onSelect.mockClear();
|
|
106
|
+
api.deselect("a");
|
|
107
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
108
|
+
});
|
|
109
|
+
});
|
|
@@ -455,12 +455,13 @@ export class TreeApi<T> {
|
|
|
455
455
|
}
|
|
456
456
|
|
|
457
457
|
deselectAll() {
|
|
458
|
+
// setSelection fires onSelect; don't fire it again here (see #332).
|
|
458
459
|
this.setSelection({ ids: [], anchor: null, mostRecent: null });
|
|
459
|
-
safeRun(this.props.onSelect, this.selectedNodes);
|
|
460
460
|
}
|
|
461
461
|
|
|
462
462
|
selectAll() {
|
|
463
463
|
const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
|
|
464
|
+
// setSelection fires onSelect; don't fire it again here (see #332).
|
|
464
465
|
this.setSelection({
|
|
465
466
|
ids: allSelectableNodes,
|
|
466
467
|
anchor: allSelectableNodes[0] ?? null,
|
|
@@ -468,7 +469,6 @@ export class TreeApi<T> {
|
|
|
468
469
|
});
|
|
469
470
|
this.dispatch(focus(this.lastNode?.id));
|
|
470
471
|
if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
|
|
471
|
-
safeRun(this.props.onSelect, this.selectedNodes);
|
|
472
472
|
}
|
|
473
473
|
|
|
474
474
|
private filterSelectableNodes(nodes: (IdObj | string)[]) {
|