metis-desk/modules/resources/src/web/catalog.test.tsx

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

import { Maybe } from "@repo/rdx-utils";
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 { buildCatalogResponse } from "../api/application/resource-catalog-response.builder";
import { ResourceCatalog } from "../api/domain/resource-catalog.aggregate";
import { seedResourceCatalog } from "../api/domain/resource-catalog-seed";

import { catalogKeys } from "./catalog-api";
import { CatalogFieldForm } from "./catalog-form";
import { ResourceCatalogPage } from "./catalog-page";
import { CatalogTemplateForm } from "./catalog-template-form";
import { resourcesEnglish, resourcesSpanish } from "./i18n";

async function render(language: string, children: ReactNode) {
  const i18n = createInstance();
  await i18n.init({
    lng: language,
    resources: { es: { resources: resourcesSpanish }, en: { resources: resourcesEnglish } },
  });
  const client = new QueryClient();
  client.setQueryData(
    catalogKeys.scope("global"),
    buildCatalogResponse(seedResourceCatalog(ResourceCatalog.create()), Maybe.none())
  );
  try {
    return renderToStaticMarkup(
      <I18nextProvider i18n={i18n}>
        <QueryClientProvider client={client}>{children}</QueryClientProvider>
      </I18nextProvider>
    );
  } finally {
    client.clear();
  }
}
test("el catálogo muestra plantillas de serie y acción de alta sin formularios junto al listado", async () => {
  for (const [language, create, actions] of [
    ["es", "Nueva plantilla", "Acciones"],
    ["en", "New template", "Actions"],
  ]) {
    assert.ok(language && create && actions);
    const html = await render(language, <ResourceCatalogPage csrfToken="test" scope="global" />);
    assert.ok(html.includes("Buzón de correo"));
    assert.ok(html.includes(create));
    assert.ok(html.includes(actions));
    assert.equal(html.includes("<form"), false);
    assert.equal(html.includes(">Editar</button>"), false);
  }
});
test("los formularios tienen ayuda inferior y selector de campo con alta integrada", async () => {
  const field = await render(
    "es",
    <CatalogFieldForm csrfToken="test" onSaved={() => undefined} scope="global" />
  );
  assert.ok(field.indexOf('name="description"') < field.indexOf("<aside"));
  assert.ok(field.indexOf("<aside") < field.indexOf('type="submit"'));
  assert.ok(field.includes("El tipo de dato queda fijo"));
  const template = await render(
    "es",
    <CatalogTemplateForm csrfToken="test" items={[]} onSaved={() => undefined} scope="global" />
  );
  assert.ok(template.includes('aria-label="Nuevo campo"'));
  assert.ok(template.includes("Todos son opcionales inicialmente"));
  assert.ok(template.indexOf("<aside") < template.indexOf('type="submit"'));
});