99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
|
import assert from "node:assert/strict";
|
||
|
|
import test from "node:test";
|
||
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
||
|
|
|
||
|
|
import { RdxPageActions } from "./rdx-page-actions.tsx";
|
||
|
|
import { RdxPageContainer } from "./rdx-page-container.tsx";
|
||
|
|
import { RdxPageHeader } from "./rdx-page-header.tsx";
|
||
|
|
import { RdxPageStack } from "./rdx-page-stack.tsx";
|
||
|
|
|
||
|
|
test("RdxPageContainer renders children with full width by default", () => {
|
||
|
|
const html = renderToStaticMarkup(<RdxPageContainer>Content</RdxPageContainer>);
|
||
|
|
|
||
|
|
assert.match(html, /Content/);
|
||
|
|
assert.match(html, /w-full/);
|
||
|
|
assert.doesNotMatch(html, /max-w-screen-2xl/);
|
||
|
|
assert.doesNotMatch(html, /max-w-5xl/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("RdxPageContainer applies width variants and merges className", () => {
|
||
|
|
const wideHtml = renderToStaticMarkup(
|
||
|
|
<RdxPageContainer className="custom-wide" width="wide">
|
||
|
|
Wide
|
||
|
|
</RdxPageContainer>
|
||
|
|
);
|
||
|
|
const contentHtml = renderToStaticMarkup(
|
||
|
|
<RdxPageContainer width="content">Content</RdxPageContainer>
|
||
|
|
);
|
||
|
|
|
||
|
|
assert.match(wideHtml, /max-w-screen-2xl/);
|
||
|
|
assert.match(wideHtml, /custom-wide/);
|
||
|
|
assert.match(contentHtml, /max-w-5xl/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("RdxPageStack applies default spacing and className", () => {
|
||
|
|
const html = renderToStaticMarkup(
|
||
|
|
<RdxPageStack className="custom-stack">
|
||
|
|
<div>One</div>
|
||
|
|
</RdxPageStack>
|
||
|
|
);
|
||
|
|
|
||
|
|
assert.match(html, /flex/);
|
||
|
|
assert.match(html, /gap-6/);
|
||
|
|
assert.match(html, /custom-stack/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("RdxPageStack applies spacing variants", () => {
|
||
|
|
const compactHtml = renderToStaticMarkup(<RdxPageStack spacing="compact">Compact</RdxPageStack>);
|
||
|
|
const relaxedHtml = renderToStaticMarkup(<RdxPageStack spacing="relaxed">Relaxed</RdxPageStack>);
|
||
|
|
|
||
|
|
assert.match(compactHtml, /gap-4/);
|
||
|
|
assert.match(relaxedHtml, /gap-8/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("RdxPageHeader renders semantic title, description and optional regions", () => {
|
||
|
|
const html = renderToStaticMarkup(
|
||
|
|
<RdxPageHeader
|
||
|
|
actions={<span>Actions</span>}
|
||
|
|
description="Description"
|
||
|
|
leading={<span>Leading</span>}
|
||
|
|
metadata={<span>Metadata</span>}
|
||
|
|
title="Header title"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
assert.match(html, /<h1[^>]*>Header title<\/h1>/);
|
||
|
|
assert.match(html, /Description/);
|
||
|
|
assert.match(html, /Leading/);
|
||
|
|
assert.match(html, /Metadata/);
|
||
|
|
assert.match(html, /Actions/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("RdxPageHeader omits optional wrappers when content is absent", () => {
|
||
|
|
const html = renderToStaticMarkup(<RdxPageHeader title="Only title" />);
|
||
|
|
|
||
|
|
assert.match(html, /<h1[^>]*>Only title<\/h1>/);
|
||
|
|
assert.equal((html.match(/<p/g) ?? []).length, 0);
|
||
|
|
assert.doesNotMatch(html, /Actions/);
|
||
|
|
assert.doesNotMatch(html, /Metadata/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("RdxPageActions renders only populated regions in the expected order", () => {
|
||
|
|
const html = renderToStaticMarkup(
|
||
|
|
<RdxPageActions
|
||
|
|
overflow={<span>Overflow</span>}
|
||
|
|
primary={<span>Primary</span>}
|
||
|
|
secondary={<span>Secondary</span>}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
assert.ok(html.indexOf("Secondary") < html.indexOf("Primary"));
|
||
|
|
assert.ok(html.indexOf("Primary") < html.indexOf("Overflow"));
|
||
|
|
});
|
||
|
|
|
||
|
|
test("RdxPageActions returns null when all regions are empty", () => {
|
||
|
|
const html = renderToStaticMarkup(<RdxPageActions />);
|
||
|
|
|
||
|
|
assert.equal(html, "");
|
||
|
|
});
|