33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import assert from "node:assert/strict";
|
|
import { test } from "node:test";
|
|
|
|
import { Tabs, TabsContent } from "@repo/shadcn-ui/components/tabs";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
|
|
import { ScrollableTabsList } from "./components/scrollable-tabs-list";
|
|
|
|
test("pestañas desplazables: conserva identidad, selección y etiquetas largas sin añadir focos al SSR", () => {
|
|
const items = [
|
|
{ value: "all", label: "Todo" },
|
|
{ value: "first", label: "Plantilla con nombre largo repetido" },
|
|
{ value: "second", label: "Plantilla con nombre largo repetido" },
|
|
];
|
|
|
|
for (const locale of ["es", "en"]) {
|
|
const html = renderToStaticMarkup(
|
|
<Tabs value="second">
|
|
<ScrollableTabsList items={items} label="Familias" locale={locale} value="second" />
|
|
<TabsContent value="second">Contenido seleccionado</TabsContent>
|
|
</Tabs>
|
|
);
|
|
|
|
assert.equal((html.match(/role="tab"/g) ?? []).length, 3);
|
|
assert.ok(html.includes('aria-label="Familias"'));
|
|
assert.match(html, /<button[^>]*aria-selected="true"[^>]*data-value="second"/);
|
|
assert.ok(html.includes("Contenido seleccionado"));
|
|
assert.ok(html.includes('data-slot="scrollable-tabs-viewport"'));
|
|
assert.equal(html.includes("Scroll tabs left"), false);
|
|
assert.equal(html.includes("Desplazar pestañas a la izquierda"), false);
|
|
}
|
|
});
|