- 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.
102 lines
3.5 KiB
TypeScript
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"));
|
|
}
|
|
});
|