David
37110d87ed
- Introduced a new optional field `registeredOn` to the asset input schema. - Updated asset values and persistence layers to handle the new field. - Enhanced tests to validate the behavior of the `registeredOn` field, including various date formats and null values. - Modified UI components to display the registration date in asset details and forms. - Added localization support for the new field in English and Spanish. - Implemented helper functions for formatting the registration date. - Created integration tests for reading and writing assets with the new field in the database.
328 lines
11 KiB
TypeScript
328 lines
11 KiB
TypeScript
import assert from "node:assert/strict";
|
|
import { test } from "node:test";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
|
|
import {
|
|
EntityAction,
|
|
EntityRowActions,
|
|
EntityStatus,
|
|
EntityTable,
|
|
} from "./components/entity-list";
|
|
import { entityListLabels, entityListPages, entityListRange } from "./lib/entity-list";
|
|
|
|
const items = Array.from({ length: 21 }, (_, index) => ({
|
|
id: String(index),
|
|
name: `Persona ${String(index + 1).padStart(2, "0")}`,
|
|
}));
|
|
const columns = [
|
|
{
|
|
id: "name",
|
|
label: "Nombre",
|
|
value: (item: (typeof items)[number]) => item.name,
|
|
render: (item: (typeof items)[number]) => item.name,
|
|
hideable: false,
|
|
},
|
|
];
|
|
|
|
test("los rangos vacíos y la última página nunca muestran índices fuera del conjunto", () => {
|
|
assert.deepEqual(entityListRange(0, 5, 10), { page: 0, pages: 1, from: 0, to: 0 });
|
|
assert.deepEqual(entityListRange(21, 2, 10), { page: 2, pages: 3, from: 21, to: 21 });
|
|
assert.deepEqual(entityListRange(9, 2, 10), { page: 0, pages: 1, from: 1, to: 9 });
|
|
assert.deepEqual(entityListPages(0, 12), [0, 1, 2, 3, 4]);
|
|
assert.deepEqual(entityListPages(11, 12), [7, 8, 9, 10, 11]);
|
|
assert.deepEqual(entityListPages(0, 1), [0]);
|
|
});
|
|
|
|
test("el listado pagina el conjunto y repite su rango conservando controles accesibles", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable columns={columns} items={items} title="Personas" />
|
|
);
|
|
|
|
assert.equal(html.split("Mostrando 1-10 de 21 personas").length - 1, 2);
|
|
assert.ok(html.includes("Persona 10"));
|
|
assert.equal(html.includes("Persona 11"), false);
|
|
assert.ok(html.includes('aria-label="Página siguiente"'));
|
|
assert.ok(html.includes('aria-current="page"'));
|
|
assert.ok(html.includes('scope="col"'));
|
|
assert.ok(html.includes("Columnas"));
|
|
assert.ok(html.includes("Ordenar por"));
|
|
});
|
|
|
|
test("la búsqueda local reduce el conjunto completo antes de paginar y permite limpiarla", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable columns={columns} items={items} search="Persona 21" title="Personas" />
|
|
);
|
|
|
|
assert.ok(html.includes("Mostrando 1-1 de 1 personas"));
|
|
assert.ok(html.includes("Persona 21"));
|
|
assert.ok(html.includes("Limpiar filtros"));
|
|
assert.equal(html.includes("Persona 01"), false);
|
|
});
|
|
|
|
test("el orden inicial ascendente se indica en la cabecera y se aplica antes de paginar", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable columns={columns} items={[...items].reverse()} title="Personas" />
|
|
);
|
|
|
|
assert.match(html, /<th[^>]*aria-sort="ascending"[^>]*>[\s\S]*?Nombre/);
|
|
assert.ok(html.indexOf("Persona 01") < html.indexOf("Persona 02"));
|
|
assert.ok(html.includes("Persona 10"));
|
|
assert.equal(html.includes("Persona 11"), false);
|
|
assert.equal(html.includes("Persona 21"), false);
|
|
});
|
|
|
|
test("una columna explícita puede establecer un orden inicial descendente", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={[
|
|
...columns,
|
|
{
|
|
id: "updated",
|
|
label: "Actualización",
|
|
defaultSort: "desc",
|
|
value: (item) => item.updated,
|
|
render: (item) => item.updated,
|
|
},
|
|
]}
|
|
items={[
|
|
{ id: "old", name: "Ana", updated: "2026-01-01T12:00:00Z" },
|
|
{ id: "new", name: "Zoe", updated: "2026-02-01T12:00:00Z" },
|
|
]}
|
|
title="Actividad"
|
|
/>
|
|
);
|
|
|
|
assert.match(html, /<th[^>]*aria-sort="descending"[^>]*>[\s\S]*?Actualización/);
|
|
assert.equal(html.includes('aria-sort="ascending"'), false);
|
|
assert.ok(html.indexOf(">Zoe<") < html.indexOf(">Ana<"));
|
|
});
|
|
|
|
test("el orden inicial ignora acciones y columnas sin valor comparable", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={[
|
|
{ id: "logo", label: "Logo", render: () => "Imagen" },
|
|
{
|
|
id: "actions",
|
|
label: "Acciones",
|
|
defaultSort: "desc",
|
|
value: (item) => item.name,
|
|
render: () => "Editar",
|
|
},
|
|
...columns,
|
|
]}
|
|
items={items.slice(0, 2).reverse()}
|
|
title="Personas"
|
|
/>
|
|
);
|
|
|
|
assert.match(html, /<th[^>]*aria-sort="ascending"[^>]*>[\s\S]*?Nombre/);
|
|
assert.equal(html.includes('aria-sort="descending"'), false);
|
|
assert.ok(html.indexOf("Persona 01") < html.indexOf("Persona 02"));
|
|
});
|
|
|
|
test("las tablas sin columnas ordenables conservan el orden recibido", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={[{ id: "name", label: "Nombre", render: (item) => item.name }]}
|
|
items={[...items].reverse()}
|
|
title="Personas"
|
|
/>
|
|
);
|
|
|
|
assert.equal(html.includes("aria-sort="), false);
|
|
assert.ok(html.indexOf("Persona 21") < html.indexOf("Persona 20"));
|
|
});
|
|
|
|
test("el orden inicial mantiene la estabilidad en empates y se indica con el listado vacío", () => {
|
|
const tied = renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={[
|
|
{
|
|
id: "name",
|
|
label: "Nombre",
|
|
value: (item) => item.name,
|
|
render: (item) => item.id,
|
|
},
|
|
]}
|
|
items={[
|
|
{ id: "second", name: "Igual" },
|
|
{ id: "first", name: "Igual" },
|
|
]}
|
|
title="Personas"
|
|
/>
|
|
);
|
|
const empty = renderToStaticMarkup(<EntityTable columns={columns} items={[]} title="Personas" />);
|
|
|
|
assert.ok(tied.indexOf(">second<") < tied.indexOf(">first<"));
|
|
assert.ok(empty.includes('aria-sort="ascending"'));
|
|
});
|
|
|
|
test("una búsqueda controlada conserva los resultados filtrados por la pantalla", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={columns}
|
|
items={items.slice(0, 1)}
|
|
onSearchChange={() => undefined}
|
|
search="criterio externo"
|
|
title="Personas"
|
|
/>
|
|
);
|
|
|
|
assert.ok(html.includes("Mostrando 1-1 de 1 personas"));
|
|
assert.ok(html.includes("Persona 01"));
|
|
});
|
|
|
|
test("carga, error y búsqueda vacía se distinguen de un listado sin registros", () => {
|
|
const render = (props: { loading?: boolean; unavailable?: boolean; search?: string }) =>
|
|
renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={columns}
|
|
emptyMessage="No hay personas."
|
|
items={[]}
|
|
title="Personas"
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
assert.ok(render({}).includes("No hay personas."));
|
|
assert.ok(render({ search: "Ana" }).includes("No hay resultados para estos criterios."));
|
|
assert.ok(render({ loading: true }).includes('aria-busy="true"'));
|
|
assert.equal(render({ loading: true }).includes("No hay personas."), false);
|
|
assert.ok(render({ unavailable: true }).includes("No se ha podido cargar el listado."));
|
|
assert.equal(render({ unavailable: true }).includes("Mostrando 0-0"), false);
|
|
});
|
|
|
|
test("el rango y la configuración también se traducen en inglés", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable columns={columns} items={[]} locale="en" title="People" />
|
|
);
|
|
|
|
assert.ok(html.includes("Showing 0-0 of 0 people"));
|
|
assert.ok(html.includes("Columns"));
|
|
assert.ok(html.includes("Items per page"));
|
|
});
|
|
|
|
test("acciones: disparador de solo icono con etiqueta accesible y menú contextual", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityRowActions label="Acciones de Ana">
|
|
<EntityAction onClick={() => undefined}>Editar</EntityAction>
|
|
</EntityRowActions>
|
|
);
|
|
|
|
assert.ok(html.includes('aria-label="Acciones de Ana"'));
|
|
assert.ok(html.includes('title="Acciones de Ana"'));
|
|
assert.ok(html.includes('aria-haspopup="menu"'));
|
|
assert.ok(html.includes("<svg"));
|
|
assert.equal(html.includes(">Acciones de Ana"), false);
|
|
});
|
|
|
|
test("el estado activo se distingue en verde del inactivo", () => {
|
|
const active = renderToStaticMarkup(<EntityStatus active>Activa</EntityStatus>);
|
|
const inactive = renderToStaticMarkup(<EntityStatus active={false}>Inactiva</EntityStatus>);
|
|
|
|
assert.ok(active.includes("bg-emerald-500"));
|
|
assert.ok(inactive.includes("bg-muted-foreground"));
|
|
});
|
|
|
|
test("acciones: siempre última, compacta y anclada a la derecha, aunque se declare primero", () => {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={[
|
|
{
|
|
id: "actions",
|
|
label: "Acciones",
|
|
hideable: true,
|
|
value: () => "Acción",
|
|
render: () => (
|
|
<EntityRowActions label="Acciones">
|
|
<EntityAction onClick={() => undefined}>Editar</EntityAction>
|
|
</EntityRowActions>
|
|
),
|
|
},
|
|
...columns,
|
|
]}
|
|
items={items.slice(0, 1)}
|
|
title="Personas"
|
|
/>
|
|
);
|
|
const header = html.match(/<thead[\s\S]*?<\/thead>/)?.[0] ?? "";
|
|
const row = html.match(/<tbody[\s\S]*?<\/tbody>/)?.[0] ?? "";
|
|
|
|
assert.ok(header.indexOf(">Nombre") < header.indexOf(">Acciones"));
|
|
assert.ok(row.indexOf("Persona 01") < row.indexOf('aria-label="Acciones"'));
|
|
assert.equal(html.split('data-pinned="right"').length - 1, 2);
|
|
assert.equal(html.split("sticky right-0").length - 1, 2);
|
|
assert.equal(header.includes('aria-label="Acciones"'), false);
|
|
assert.ok(header.includes("text-right"));
|
|
assert.ok(row.includes("text-right"));
|
|
assert.ok(row.includes("bg-card"));
|
|
});
|
|
|
|
test("los textos comunes mantienen claves, idiomas y parámetros del rango", () => {
|
|
const spanish = entityListLabels("es");
|
|
const english = entityListLabels("en-GB");
|
|
|
|
assert.deepEqual(Object.keys(spanish).sort(), Object.keys(english).sort());
|
|
assert.equal(spanish.range(1, 10, 25, "marcas"), "Mostrando 1-10 de 25 marcas");
|
|
assert.equal(english.range(0, 0, 0, "brands"), "Showing 0-0 of 0 brands");
|
|
assert.equal(entityListLabels("fr").actions, spanish.actions);
|
|
assert.equal(english.range(1, 1, 1, "$&"), "Showing 1-1 of 1 $&");
|
|
});
|
|
|
|
test("las celdas vacías muestran un guion largo en es/en y conservan cero, textos y controles", () => {
|
|
const cases: readonly { content: ReactNode; expected: string }[] = [
|
|
{ content: null, expected: "—" },
|
|
{ content: undefined, expected: "—" },
|
|
{ content: false, expected: "—" },
|
|
{ content: true, expected: "—" },
|
|
{ content: "", expected: "—" },
|
|
{ content: " \n\t ", expected: "—" },
|
|
{ content: [], expected: "—" },
|
|
{ content: [null, false, ""], expected: "—" },
|
|
{ content: <></>, expected: "—" },
|
|
{
|
|
content: (
|
|
<>
|
|
{null}
|
|
{false}{" "}
|
|
</>
|
|
),
|
|
expected: "—",
|
|
},
|
|
{
|
|
content: (
|
|
<>
|
|
<>{undefined}</>
|
|
</>
|
|
),
|
|
expected: "—",
|
|
},
|
|
{ content: 0, expected: "0" },
|
|
{ content: <>0</>, expected: "0" },
|
|
{ content: "No", expected: "No" },
|
|
{
|
|
content: <button type="button">Editar</button>,
|
|
expected: '<button type="button">Editar</button>',
|
|
},
|
|
];
|
|
|
|
for (const locale of ["es", "en"]) {
|
|
for (const { content, expected } of cases) {
|
|
const html = renderToStaticMarkup(
|
|
<EntityTable
|
|
columns={[{ id: "value", label: "Valor", render: () => content }]}
|
|
items={[{ id: "row" }]}
|
|
locale={locale}
|
|
title="Datos"
|
|
/>
|
|
);
|
|
const cell = html.match(/<td\b[^>]*>([\s\S]*?)<\/td>/)?.[1];
|
|
|
|
assert.equal(cell, expected);
|
|
}
|
|
}
|
|
});
|