FactuGES_ERP/apps/web/src/settings/settings-navigation.test.tsx

/// <reference types="node" />

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

import { i18n, registerTranslations } from "@repo/i18next";
import { renderToStaticMarkup } from "react-dom/server";
import { I18nextProvider } from "react-i18next";
import { MemoryRouter } from "react-router-dom";

import { ensureAppTranslations } from "../locales/i18n";

import type { SettingsNavigationSection } from "./build-settings-navigation";
import { SettingsNavigation } from "./settings-navigation";

const SETTINGS_TEST_MODULE = "SettingsTestModule";

const renderNavigation = async ({
  currentPath,
  sections,
}: {
  currentPath: string;
  sections: SettingsNavigationSection[];
}) => {
  ensureAppTranslations();
  registerTranslations(SETTINGS_TEST_MODULE, "es", {
    settings: {
      companyDetails: {
        title: "Datos de empresa",
      },
      verifactu: {
        title: "VeriFactu",
      },
    },
  });
  await i18n.changeLanguage("es");

  return renderToStaticMarkup(
    <I18nextProvider i18n={i18n}>
      <MemoryRouter initialEntries={[currentPath]}>
        <SettingsNavigation sections={sections} />
      </MemoryRouter>
    </I18nextProvider>
  );
};

test("renderiza secciones y entries con links correctos", async () => {
  const html = await renderNavigation({
    currentPath: "/settings/company/details",
    sections: [
      {
        id: "company",
        labelKey: "web.settings.sections.company",
        entries: [
          {
            id: "company-details",
            sectionId: "company",
            labelKey: "settings.companyDetails.title",
            path: "/settings/company/details",
            moduleName: SETTINGS_TEST_MODULE,
          },
        ],
      },
      {
        id: "billing",
        labelKey: "web.settings.sections.billing",
        entries: [
          {
            id: "verifactu",
            sectionId: "billing",
            labelKey: "settings.verifactu.title",
            path: "/settings/billing/verifactu",
            moduleName: SETTINGS_TEST_MODULE,
          },
        ],
      },
    ],
  });

  assert.match(html, /<nav[^>]*aria-label="Configuración"/);
  assert.match(html, />Empresa</);
  assert.match(html, />Facturación</);
  assert.match(html, /href="\/settings\/company\/details"/);
  assert.match(html, /href="\/settings\/billing\/verifactu"/);
  assert.match(html, />Datos de empresa</);
  assert.match(html, />VeriFactu</);
});

test("marca la entry activa con aria-current=page", async () => {
  const html = await renderNavigation({
    currentPath: "/settings/billing/verifactu",
    sections: [
      {
        id: "billing",
        labelKey: "web.settings.sections.billing",
        entries: [
          {
            id: "verifactu",
            sectionId: "billing",
            labelKey: "settings.verifactu.title",
            path: "/settings/billing/verifactu",
            moduleName: SETTINGS_TEST_MODULE,
          },
        ],
      },
    ],
  });

  assert.match(html, /aria-current="page"/);
  assert.match(html, /VeriFactu/);
});

test("muestra un estado vacío cuando no hay secciones disponibles", async () => {
  const html = await renderNavigation({
    currentPath: "/settings",
    sections: [],
  });

  assert.match(html, /No hay secciones disponibles todavía/);
  assert.doesNotMatch(html, /<ul/);
});