Files
NODEDC_DESIGN_GUIDELINE/scripts/control-density-contract.test.mjs

38 lines
1.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 { Button, SegmentedControl } from "../packages/ui-react/dist/index.js";
test("dense viewer controls remain a public Button and SegmentedControl contract", async () => {
const button = renderToStaticMarkup(createElement(Button, { size: "dense" }, "Source points"));
const segmented = renderToStaticMarkup(createElement(SegmentedControl, {
size: "dense",
value: "source",
items: [{ label: "Source points", value: "source" }],
label: "Viewer layer",
onChange: () => {},
}));
const [tokens, styles, registrySource, docs] = await Promise.all([
readFile(new URL("../packages/tokens/tokens.css", 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"),
]);
const registry = JSON.parse(registrySource);
const buttonEntry = registry.components.find((component) => component.id === "button");
const segmentedEntry = registry.components.find((component) => component.id === "segmented-control");
assert.match(button, /data-size="dense"/);
assert.match(segmented, /data-size="dense"/);
assert.ok(buttonEntry?.sizes.includes("dense"));
assert.ok(segmentedEntry?.sizes.includes("dense"));
assert.match(tokens, /--nodedc-control-height-dense: 1\.875rem/);
assert.match(tokens, /--nodedc-font-size-dense: 0\.45rem/);
assert.match(styles, /\.nodedc-button\[data-size="dense"\]/);
assert.match(styles, /\.nodedc-segmented\[data-size="dense"\]/);
assert.match(docs, /size="dense"/);
assert.match(docs, /viewer/);
});