metis-desk/modules/companies/src/web/mail-configurations/shared/mail.test.tsx

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

import { inventoryKeys } from "@metis/assets/client";
import {
  catalogKeys as resourceCatalogKeys,
  inventoryKeys as resourceKeys,
  resourcesEnglish,
  resourcesSpanish,
} 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 { accessKeys } from "../../access/shared/queries";
import { MailboxForm, MailboxRelations } from "../../mailboxes";
import { mailboxKeys } from "../../mailboxes/shared/queries";
import { companiesEnglish, companiesSpanish } from "../../shared";
import { profileKeys } from "../../work-profiles/shared/api";
import { MailConfigurationsPage } from "../list";

import { mailKeys } from "./api";
import { MailConfigurationForm } 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, resources: resourcesSpanish },
      en: { companies: companiesEnglish, resources: resourcesEnglish },
    },
  });
  const client = new QueryClient({
    defaultOptions: { queries: { retry: false, staleTime: Number.POSITIVE_INFINITY } },
  });
  const addressId = "0199b200-0000-7000-8000-000000000002";
  const contextId = "0199b200-0000-7000-8000-000000000003";
  const templateId = "0199b200-0000-7000-8000-000000000004";

  client.setQueryData(resourceKeys.company(company.id), { resources: [], references: [] });
  client.setQueryData(resourceCatalogKeys.scope(company.id), {
    items: [
      {
        id: addressId,
        builtinKey: "field:email",
        effectiveActive: true,
        values: { kind: "field", name: "Dirección de correo", type: "text", unit: "", choices: [] },
      },
      {
        id: contextId,
        builtinKey: "field:context",
        effectiveActive: true,
        values: { kind: "field", name: "Contexto", type: "text", unit: "", choices: [] },
      },
      {
        id: templateId,
        builtinKey: "template:mailbox",
        effectiveActive: true,
        values: {
          kind: "template",
          name: "Buzón de correo",
          fields: [
            { fieldId: addressId, required: false },
            { fieldId: contextId, required: false },
          ],
        },
      },
    ],
  });
  client.setQueryData(mailKeys.company(company.id), { configurations: [] });
  client.setQueryData(profileKeys.company(company.id), { profiles: [] });
  client.setQueryData(mailboxKeys.company(company.id), { mailboxes: [], uses: [] });
  client.setQueryData(accessKeys.scope(company.id), { items: [], reviews: [], coverage: [] });
  client.setQueryData(inventoryKeys.company(company.id), {
    assets: [],
    relationships: [],
    workstations: [],
  });
  try {
    return renderToStaticMarkup(
      <I18nextProvider i18n={i18n}>
        <QueryClientProvider client={client}>{node}</QueryClientProvider>
      </I18nextProvider>
    );
  } finally {
    client.clear();
  }
}

test("correo: listado traducido, alta en cabecera y formularios ocultos", async () => {
  for (const language of ["es", "en"]) {
    const html = await render(language, <MailConfigurationsPage company={company} />);

    assert.equal(html.includes("<form"), false);
    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(language === "es" ? "Configurar correo" : "Configure email"));
    assert.ok(
      html.includes(language === "es" ? "Todavía no hay correos" : "No email configurations")
    );
  }
});
test("correo: selectores reutilizables con altas y ayuda inmediatamente antes de guardar", async () => {
  const html = await render(
    "es",
    <MailConfigurationForm company={company} onSaved={() => undefined} />
  );

  for (const label of ["Nuevo perfil", "Nuevo buzón"]) {
    assert.ok(html.includes(`aria-label="${label}"`));
  }
  assert.ok(html.includes('role="combobox"'));
  assert.ok(html.includes("Buzón"));
  assert.equal(html.includes("Cuenta informática"), false);
  assert.ok(html.includes("IMAP"));
  assert.ok(html.indexOf("¿Para qué sirve esta configuración?") < html.indexOf("Guardar"));
  assert.ok(html.includes("varios buzones por persona"));
  assert.equal(html.includes('type="password"'), false);
});

test("Buzones: alta en modal, cuenta opcional y ayuda al final", async () => {
  for (const language of ["es", "en"]) {
    const page = await render(
      language,
      <MailboxRelations company={company} mailboxId="0199b200-0000-7000-8000-000000000005" />
    );

    assert.equal(page.includes("<form"), false);
    assert.ok(page.includes(language === "es" ? "Vincular persona" : "Link person"));
  }
  const form = await render("es", <MailboxForm company={company} onSaved={() => undefined} />);

  assert.ok(form.includes("Cuenta relacionada"));
  assert.ok(form.indexOf("¿Qué es y para qué sirve?") < form.indexOf("Guardar"));
  assert.equal(form.includes('type="password"'), false);
});