81 lines
4.3 KiB
TypeScript
81 lines
4.3 KiB
TypeScript
function assert(condition: unknown, message = "assertion failed"): void {
|
|
if (!condition) throw new Error(message);
|
|
}
|
|
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import ActionToolbar, { ToolbarGroup, ToolbarSpacer } from "../src/components/ActionToolbar";
|
|
import ContentGrid, { FormGrid, FormLayout, GridItem } from "../src/components/ContentGrid";
|
|
import Dialog from "../src/components/Dialog";
|
|
import { DialogForm, DialogSection } from "../src/components/DialogAnatomy";
|
|
import FormSection from "../src/components/FormSection";
|
|
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
|
|
|
|
const toolbarMarkup = renderToStaticMarkup(
|
|
<PlatformLanguageProvider>
|
|
<ActionToolbar label="Object actions" density="compact" surface="subtle" interfaceId="object.toolbar">
|
|
<ToolbarGroup grow>Filters</ToolbarGroup>
|
|
<ToolbarSpacer />
|
|
<ToolbarGroup align="end">Actions</ToolbarGroup>
|
|
</ActionToolbar>
|
|
</PlatformLanguageProvider>
|
|
);
|
|
|
|
assert(toolbarMarkup.includes("action-toolbar-wrap-responsive"), "toolbars use the responsive central wrapping policy by default");
|
|
assert(toolbarMarkup.includes('role="toolbar"'), "named toolbars expose toolbar semantics");
|
|
assert(toolbarMarkup.includes('aria-label="Object actions"'), "named toolbars expose their accessible name");
|
|
assert(toolbarMarkup.includes('data-help-scope="toolbar"'), "toolbar help scope is centralized");
|
|
assert(toolbarMarkup.includes("action-toolbar-group-grow"), "toolbar groups can own flexible space");
|
|
assert(toolbarMarkup.includes("action-toolbar-spacer"), "the standard action spacer is available");
|
|
|
|
const gridMarkup = renderToStaticMarkup(
|
|
<ContentGrid columns={3} gap="compact" collapseAt="wide">
|
|
<GridItem>A</GridItem>
|
|
<GridItem span="two">B</GridItem>
|
|
<GridItem span="full">C</GridItem>
|
|
</ContentGrid>
|
|
);
|
|
|
|
assert(gridMarkup.includes("content-grid-columns-3"), "content grids expose explicit column geometry");
|
|
assert(gridMarkup.includes("content-grid-collapse-wide"), "content grids expose explicit collapse ownership");
|
|
assert(gridMarkup.includes("content-grid-item-full"), "grid items can span the complete layout");
|
|
|
|
const formMarkup = renderToStaticMarkup(
|
|
<PlatformLanguageProvider>
|
|
<FormSection title="Identity" description="Stable identifying values" actions={<button type="button">Reset</button>}>
|
|
<FormGrid columns={2}><label>Name<input /></label><label>Code<input /></label></FormGrid>
|
|
</FormSection>
|
|
</PlatformLanguageProvider>
|
|
);
|
|
|
|
assert(formMarkup.includes("form-section-header"), "form sections centralize heading and action placement");
|
|
assert(formMarkup.includes("form-grid-layout"), "forms compose the central content grid");
|
|
assert(formMarkup.includes("content-grid-columns-2"), "form columns remain explicit");
|
|
|
|
const formElementMarkup = renderToStaticMarkup(<FormLayout columns={2} id="object-form"><label>Value<input /></label></FormLayout>);
|
|
assert(formElementMarkup.startsWith('<form id="object-form"'), "form layouts preserve native form semantics");
|
|
assert(formElementMarkup.includes("form-grid-layout"), "native forms share the central grid geometry");
|
|
|
|
const dialogMarkup = renderToStaticMarkup(
|
|
<PlatformLanguageProvider>
|
|
<Dialog
|
|
open
|
|
title="Edit object"
|
|
description="Review the values before saving."
|
|
notices={<div role="status">Draft</div>}
|
|
size="wide"
|
|
variant="administration"
|
|
footer={<><button type="button">Cancel</button><button type="submit">Save</button></>}
|
|
>
|
|
<DialogForm><DialogSection variant="inset">Fields</DialogSection></DialogForm>
|
|
</Dialog>
|
|
</PlatformLanguageProvider>
|
|
);
|
|
|
|
assert(dialogMarkup.includes("dialog-panel-size-wide"), "dialog size is owned by the central anatomy");
|
|
assert(dialogMarkup.includes("dialog-panel-administration"), "dialog variants are explicit");
|
|
assert(dialogMarkup.includes("dialog-description"), "dialog introductions use the central region");
|
|
assert(dialogMarkup.includes("dialog-notices"), "dialog notices use the central region");
|
|
assert(dialogMarkup.includes("dialog-actions dialog-actions-end"), "every dialog footer composes the central action layout");
|
|
assert(dialogMarkup.includes("dialog-form-layout"), "dialog forms use the central vertical flow");
|
|
assert(dialogMarkup.includes("dialog-section-inset"), "dialog sections use central grouping variants");
|