tony
43fe76158c
Mortar contribution checks / Mortar baseline and browser checks (push) Successful in 3m15s
64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
import test from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import React from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { AppShell, Input, DataTable, CodeBlock } from "../dist/index.js";
|
|
test("Mortar shell supplies page landmarks and labelled navigation", () => {
|
|
const html = renderToStaticMarkup(
|
|
React.createElement(
|
|
AppShell,
|
|
{
|
|
brand: "Example",
|
|
navigation: [{ label: "Overview", href: "#overview", current: true }],
|
|
},
|
|
"Content",
|
|
),
|
|
);
|
|
assert.match(html, /aria-current="page"/);
|
|
assert.match(html, /<main id="m-content"/);
|
|
assert.match(html, /Skip to content/);
|
|
});
|
|
test("Mortar fields keep unique labels and external error descriptions", () => {
|
|
const html = renderToStaticMarkup(
|
|
React.createElement(
|
|
React.Fragment,
|
|
{},
|
|
React.createElement(Input, {
|
|
label: "Email",
|
|
error: "Invalid email",
|
|
"aria-describedby": "external",
|
|
}),
|
|
React.createElement(Input, { label: "Name" }),
|
|
),
|
|
);
|
|
const ids = [...html.matchAll(/<input[^>]*\sid="([^"]+)"/g)].map((m) => m[1]);
|
|
assert.equal(ids.length, 2);
|
|
assert.notEqual(ids[0], ids[1]);
|
|
assert.ok(html.includes("external " + ids[0] + "-message"));
|
|
assert.ok(html.includes('for="' + ids[1] + '"'));
|
|
});
|
|
test("Mortar table separates loading, error and empty states and keeps row headers", () => {
|
|
const props = {
|
|
caption: "Records",
|
|
columns: [{ key: "name", label: "Name", render: (row) => row.name }],
|
|
rowLabel: (row) => row.name,
|
|
rows: [{ id: "1", name: "Example" }],
|
|
};
|
|
const render = (extra) =>
|
|
renderToStaticMarkup(
|
|
React.createElement(DataTable, { ...props, ...extra }),
|
|
);
|
|
assert.match(render({}), /scope="row"/);
|
|
assert.match(render({}), /tabindex="0"/);
|
|
assert.match(render({ rows: [] }), /No records/);
|
|
assert.match(render({ loading: true }), /role="status"/);
|
|
assert.match(render({ error: "Unavailable" }), /role="alert"/);
|
|
});
|
|
test("Mortar source inspection never executes submitted markup", () => {
|
|
const html = renderToStaticMarkup(
|
|
React.createElement(CodeBlock, { code: "<script>alert(1)</script>" }),
|
|
);
|
|
assert.ok(!html.includes("<script>"));
|
|
assert.match(html, /<script>/);
|
|
});
|