metis-desk/modules/companies/src/web/certificate-configurations/shared/certificate.test.tsx
David 6b086e17f2 Add visual regression tests for UI components using Playwright
- Implemented a new test suite in `visual-audit-ui.test.py` to perform visual audits on the UI.
- Tests include checking row contrast, wizard geometry, focus behavior, and review headers across different screen sizes.
- Utilizes Playwright for browser automation and captures visual snapshots for comparison.
- Ensures that the tests run against a synthetic session state for accurate results.
2026-10-21 19:31:09 +02:00

102 lines
3.5 KiB
TypeScript

import assert from "node:assert/strict";
import { test } from "node:test";
import { inventoryKeys } from "@metis/assets/client";
import { catalogKeys, inventoryKeys as resourceKeys } from "@metis/resources/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createInstance } from "i18next";
import type { ReactNode } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { I18nextProvider } from "react-i18next";
import { companiesEnglish, companiesSpanish } from "../../shared";
import { profileKeys } from "../../work-profiles/shared/api";
import { CertificateConfigurationsPage } from "../list";
import { certificateKeys } from "./api";
import { CertificateConfigurationForm } from "./ui";
const company = {
id: "0199b200-0000-7000-8000-000000000001",
name: "Empresa test",
active: true,
people: [],
contacts: [],
sites: [],
departments: [],
assignments: [],
};
async function render(language: string, node: ReactNode) {
const i18n = createInstance();
await i18n.init({
lng: language,
resources: { es: { companies: companiesSpanish }, en: { companies: companiesEnglish } },
});
const client = new QueryClient({
defaultOptions: { queries: { retry: false, staleTime: Number.POSITIVE_INFINITY } },
});
client.setQueryData(profileKeys.company(company.id), { profiles: [] });
client.setQueryData(inventoryKeys.company(company.id), {
assets: [],
relationships: [],
workstations: [],
});
client.setQueryData(resourceKeys.company(company.id), { resources: [] });
client.setQueryData(catalogKeys.scope(company.id), { items: [] });
client.setQueryData(certificateKeys.company(company.id), { configurations: [] });
try {
return renderToStaticMarkup(
<I18nextProvider i18n={i18n}>
<QueryClientProvider client={client}>{node}</QueryClientProvider>
</I18nextProvider>
);
} finally {
client.clear();
}
}
test("certificados: listado sin formularios, alta en cabecera y traducciones", async () => {
for (const [language, title, action] of [
["es", "Certificados del perfil", "Configurar certificado"],
["en", "Profile certificates", "Configure certificate"],
]) {
const html = await render(
language ?? "es",
<CertificateConfigurationsPage company={company} />
);
assert.ok(html.includes(title ?? ""));
assert.ok(html.includes(action ?? ""));
assert.ok(!html.includes("<form"));
const headers = html.match(/<thead\b[^>]*>[\s\S]*?<\/thead>/)?.[0] ?? "";
assert.ok(headers.includes(language === "es" ? "Revisión" : "Review"));
assert.equal(
headers.includes(
language === "es" ? companiesSpanish.profiles.review : companiesEnglish.profiles.review
),
false
);
assert.ok(!html.includes("certificates.help"));
}
});
test("certificados: selectores con alta rápida y ayuda inferior antes de guardar", async () => {
for (const language of ["es", "en"]) {
const html = await render(
language,
<CertificateConfigurationForm company={company} onSaved={() => undefined} />
);
const text = language === "es" ? companiesSpanish : companiesEnglish;
assert.ok(html.includes(text.certificates.resource));
assert.ok(html.includes(text.certificates.location));
assert.ok(html.includes(text.certificates.newResource));
assert.ok(html.indexOf(text.certificates.help) > html.indexOf(text.certificates.location));
assert.ok(html.indexOf(text.save) > html.indexOf(text.certificates.help));
assert.ok(!html.includes("certificates.help"));
}
});