metis-desk/modules/companies/src/web/components/companies-page.test.tsx

import assert from "node:assert/strict";
import { test } from "node:test";

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 { companyKeys } from "../api/company-api";
import { companiesEnglish, companiesSpanish } from "../i18n";

import { CompaniesPage } from "./companies-page";
import { CompanyDetail } from "./company-detail";
import { SiteForm } from "./site-form";

const companyId = "e0420eb9-2aab-4368-96a0-2ce83dd23eb4";
async function renderPage(
  language: string,
  children: ReactNode,
  seed: (client: QueryClient) => void
) {
  const i18n = createInstance();
  await i18n.init({
    lng: language,
    fallbackLng: "es",
    resources: { es: { companies: companiesSpanish }, en: { companies: companiesEnglish } },
    interpolation: { escapeValue: false },
  });
  const client = new QueryClient({
    defaultOptions: { queries: { retry: false, staleTime: Number.POSITIVE_INFINITY } },
  });
  seed(client);
  try {
    return renderToStaticMarkup(
      <I18nextProvider i18n={i18n}>
        <QueryClientProvider client={client}>{children}</QueryClientProvider>
      </I18nextProvider>
    );
  } finally {
    client.clear();
  }
}
test("el listado presenta estado vacío y acceso al alta sin formularios visibles", async () => {
  for (const [language, title, empty] of [
    ["es", "Compañías", "Todavía no hay compañías"],
    ["en", "Companies", "No companies yet"],
  ] as const) {
    const markup = await renderPage(language, <CompaniesPage csrfToken="test" />, (client) =>
      client.setQueryData(companyKeys.list, { companies: [] })
    );
    assert.ok(markup.includes(title));
    assert.ok(markup.includes(empty));
    assert.ok(markup.includes(language === "es" ? "Nueva compañía" : "New company"));
    assert.equal(markup.includes("<form"), false);
    assert.equal(markup.includes('name="name"'), false);
  }
});
test("la ficha presenta datos de la compañía, contactos y acceso a sedes", async () => {
  const markup = await renderPage(
    "es",
    <CompanyDetail csrfToken="test" id={companyId} onBack={() => undefined} />,
    (client) =>
      client.setQueryData(companyKeys.detail(companyId), {
        company: {
          id: companyId,
          name: "Empresa test",
          active: true,
          contacts: [
            {
              id: companyId,
              companyId,
              name: "Ana",
              position: "Responsable IT",
              email: "ana@example.test",
              phone: "900123456",
              active: false,
            },
          ],
          sites: [],
        },
      })
  );
  assert.ok(markup.includes("Empresa test"));
  assert.ok(markup.includes("Responsable IT"));
  assert.ok(markup.includes("ana@example.test"));
  assert.ok(markup.includes("Sedes (0)"));
  assert.ok(markup.includes("Nuevo contacto"));
  assert.ok(markup.includes("Editar compañía"));
  assert.equal(markup.includes("<form"), false);
});
test("el formulario de sede ofrece dirección multilínea optativa", async () => {
  const markup = await renderPage(
    "es",
    <SiteForm companyId={companyId} csrfToken="test" />,
    () => undefined
  );
  assert.ok(markup.includes("Dirección (opcional)"));
  assert.match(markup, /<textarea[^>]*rows="6"/);
  assert.match(markup, /<textarea[^>]*name="address"/);
  const textarea = markup.match(/<textarea[^>]*>/)?.[0];
  assert.ok(textarea);
  assert.equal(textarea.includes("required"), false);
});