64 lines
2.8 KiB
JavaScript
64 lines
2.8 KiB
JavaScript
import assert from "node:assert/strict";
|
|
import { readFile } from "node:fs/promises";
|
|
import test from "node:test";
|
|
import { createElement } from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { SplitPane } from "../packages/ui-react/dist/index.js";
|
|
|
|
test("SplitPane exposes one controlled accessible separator", () => {
|
|
const markup = renderToStaticMarkup(createElement(SplitPane, {
|
|
primary: createElement("div", null, "Видео"),
|
|
secondary: createElement("div", null, "3D"),
|
|
primarySize: 64,
|
|
onPrimarySizeChange: () => {},
|
|
minPrimarySize: 25,
|
|
minSecondarySize: 30,
|
|
separatorLabel: "Изменить ширину представлений",
|
|
}));
|
|
|
|
assert.match(markup, /class="nodedc-split-pane"/);
|
|
assert.match(markup, /role="separator"/);
|
|
assert.match(markup, /aria-orientation="vertical"/);
|
|
assert.match(markup, /aria-valuemin="25"/);
|
|
assert.match(markup, /aria-valuemax="70"/);
|
|
assert.match(markup, /aria-valuenow="64"/);
|
|
assert.match(markup, /aria-valuetext="64% \/ 36%"/);
|
|
});
|
|
|
|
test("SplitPane can keep panel ownership stable without an inactive separator", () => {
|
|
const markup = renderToStaticMarkup(createElement(SplitPane, {
|
|
primary: createElement("div", null, "Видео"),
|
|
secondary: createElement("div", null, "3D"),
|
|
primarySize: 100,
|
|
onPrimarySizeChange: () => {},
|
|
separatorLabel: "Изменить ширину представлений",
|
|
resizable: false,
|
|
}));
|
|
assert.match(markup, /data-pane="primary"/);
|
|
assert.match(markup, /data-pane="secondary"/);
|
|
assert.doesNotMatch(markup, /role="separator"/);
|
|
});
|
|
|
|
test("SplitPane is registered, documented, cataloged and keyboard-addressable", async () => {
|
|
const [component, styles, registrySource, docs, catalog] = await Promise.all([
|
|
readFile(new URL("../packages/ui-react/src/SplitPane.tsx", import.meta.url), "utf8"),
|
|
readFile(new URL("../packages/ui-core/styles.css", import.meta.url), "utf8"),
|
|
readFile(new URL("../registry/components.json", import.meta.url), "utf8"),
|
|
readFile(new URL("../docs/COMPONENTS.md", import.meta.url), "utf8"),
|
|
readFile(new URL("../apps/catalog/src/CatalogApp.tsx", import.meta.url), "utf8"),
|
|
]);
|
|
const registry = JSON.parse(registrySource);
|
|
const entry = registry.components.find((item) => item.id === "split-pane");
|
|
|
|
assert.ok(entry?.exports.includes("SplitPane"));
|
|
assert.deepEqual(entry?.variants, ["vertical", "horizontal"]);
|
|
assert.match(component, /event\.key === "Home"/);
|
|
assert.match(component, /event\.key === "End"/);
|
|
assert.match(component, /setPointerCapture/);
|
|
assert.match(component, /activePointerIdRef\.current !== event\.pointerId/);
|
|
assert.match(component, /role="separator"/);
|
|
assert.match(styles, /\.nodedc-split-pane__separator:focus-visible::before/);
|
|
assert.match(docs, /## SplitPane/);
|
|
assert.match(catalog, /<SplitPane/);
|
|
});
|