feat(webui): add central selection list
This commit is contained in:
52
webui/tests/selection-list.test.tsx
Normal file
52
webui/tests/selection-list.test.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
function assert(condition: unknown, message = "assertion failed"): void {
|
||||
if (!condition) throw new Error(message);
|
||||
}
|
||||
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import SelectionList, { SelectionListItem } from "../src/components/SelectionList";
|
||||
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
|
||||
|
||||
function noop() {}
|
||||
|
||||
const markup = renderToStaticMarkup(
|
||||
<PlatformLanguageProvider>
|
||||
<SelectionList label="i18n:govoplan-core.notifications.753a22b2" className="domain-list" data-source="inbox">
|
||||
<SelectionListItem
|
||||
selected
|
||||
className="domain-row"
|
||||
draggable
|
||||
data-record-id="record-1"
|
||||
onDragStart={noop}
|
||||
onClick={noop}
|
||||
>
|
||||
<strong>Primary content</strong>
|
||||
<small>Supporting content</small>
|
||||
</SelectionListItem>
|
||||
<SelectionListItem selected={false} disabled>
|
||||
Disabled content
|
||||
</SelectionListItem>
|
||||
</SelectionList>
|
||||
</PlatformLanguageProvider>
|
||||
);
|
||||
|
||||
assert(markup.includes('role="listbox"'), "the root exposes listbox semantics");
|
||||
assert(markup.includes('class="selection-list domain-list"'), "root caller classes are preserved");
|
||||
assert(markup.includes('data-source="inbox"'), "root native properties pass through");
|
||||
assert(markup.includes('aria-label="Notifications"'), "the accessible label is translated");
|
||||
assert(markup.includes('role="option"'), "items expose option semantics");
|
||||
assert(markup.includes('aria-selected="true"'), "selected state is exposed accessibly");
|
||||
assert(markup.includes('class="selection-list-item is-selected domain-row"'), "selected and domain classes are composed");
|
||||
assert(markup.includes('draggable="true"'), "native draggable properties pass through");
|
||||
assert(markup.includes('data-record-id="record-1"'), "native data properties pass through");
|
||||
assert(markup.includes("<strong>Primary content</strong><small>Supporting content</small>"), "React node content is preserved");
|
||||
assert(markup.includes('type="button"'), "items default to non-submitting buttons");
|
||||
assert(markup.includes('aria-selected="false"'), "unselected state is exposed accessibly");
|
||||
assert(markup.includes('aria-disabled="true"'), "disabled state is exposed accessibly");
|
||||
assert(markup.includes('disabled=""'), "disabled state uses the native button contract");
|
||||
|
||||
const nativeLabelMarkup = renderToStaticMarkup(
|
||||
<SelectionList aria-label="Already translated">
|
||||
<SelectionListItem selected={false}>Content</SelectionListItem>
|
||||
</SelectionList>
|
||||
);
|
||||
assert(nativeLabelMarkup.includes('aria-label="Already translated"'), "native accessible labels pass through unchanged");
|
||||
Reference in New Issue
Block a user