FactuGES_ERP/packages/rdx-ui/src/components/layout/rdx-page-foundations.test.tsx

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

import { renderToStaticMarkup } from "react-dom/server";

import { RdxPageActions } from "./rdx-page-actions.tsx";
import { RdxPageContainer } from "./rdx-page-container.tsx";
import { RdxPageFrame } from "./rdx-page-frame.tsx";
import { RdxPageHeader } from "./rdx-page-header.tsx";
import { RdxPageStack } from "./rdx-page-stack.tsx";

test("RdxPageFrame separates fixed regions from the scrollable content", () => {
  const html = renderToStaticMarkup(
    <RdxPageFrame footer={<span>Footer</span>} header={<span>Header</span>}>
      Content
    </RdxPageFrame>
  );

  assert.match(html, /overflow-hidden/);
  assert.match(html, /overflow-y-auto/);
  assert.ok(html.indexOf("Header") < html.indexOf("Content"));
  assert.ok(html.indexOf("Content") < html.indexOf("Footer"));
});

test("RdxPageContainer renders children with full width by default", () => {
  const html = renderToStaticMarkup(<RdxPageContainer>Content</RdxPageContainer>);

  assert.match(html, /Content/);
  assert.match(html, /w-full/);
  assert.match(html, /px-4/);
  assert.doesNotMatch(html, /max-w-screen-2xl/);
  assert.doesNotMatch(html, /max-w-5xl/);
});

test("RdxPageContainer applies width variants and merges className", () => {
  const wideHtml = renderToStaticMarkup(
    <RdxPageContainer className="custom-wide" width="wide">
      Wide
    </RdxPageContainer>
  );
  const contentHtml = renderToStaticMarkup(
    <RdxPageContainer width="content">Content</RdxPageContainer>
  );

  assert.match(wideHtml, /max-w-screen-2xl/);
  assert.match(wideHtml, /custom-wide/);
  assert.match(contentHtml, /max-w-5xl/);
});

test("RdxPageContainer permite eliminar el padding exterior", () => {
  const html = renderToStaticMarkup(
    <RdxPageContainer padding="none">Content without padding</RdxPageContainer>
  );

  assert.match(html, /Content without padding/);
  assert.doesNotMatch(html, /px-4/);
  assert.doesNotMatch(html, /py-4/);
});

test("RdxPageStack applies default spacing and className", () => {
  const html = renderToStaticMarkup(
    <RdxPageStack className="custom-stack">
      <div>One</div>
    </RdxPageStack>
  );

  assert.match(html, /flex/);
  assert.match(html, /gap-6/);
  assert.match(html, /custom-stack/);
});

test("RdxPageStack applies spacing variants", () => {
  const noneHtml = renderToStaticMarkup(<RdxPageStack spacing="none">None</RdxPageStack>);
  const compactHtml = renderToStaticMarkup(<RdxPageStack spacing="compact">Compact</RdxPageStack>);
  const relaxedHtml = renderToStaticMarkup(<RdxPageStack spacing="relaxed">Relaxed</RdxPageStack>);

  assert.match(noneHtml, /gap-0/);
  assert.match(compactHtml, /gap-4/);
  assert.match(relaxedHtml, /gap-8/);
});

test("RdxPageHeader renders semantic title, description and optional regions", () => {
  const html = renderToStaticMarkup(
    <RdxPageHeader
      actions={<span>Actions</span>}
      description="Description"
      leading={<span>Leading</span>}
      metadata={<span>Metadata</span>}
      title="Header title"
    />
  );

  assert.match(html, /<h1[^>]*>Header title<\/h1>/);
  assert.match(html, /Description/);
  assert.match(html, /Leading/);
  assert.match(html, /Metadata/);
  assert.match(html, /Actions/);
});

test("RdxPageHeader omits optional wrappers when content is absent", () => {
  const html = renderToStaticMarkup(<RdxPageHeader title="Only title" />);

  assert.match(html, /<h1[^>]*>Only title<\/h1>/);
  assert.equal((html.match(/<p/g) ?? []).length, 0);
  assert.doesNotMatch(html, /Actions/);
  assert.doesNotMatch(html, /Metadata/);
});

test("RdxPageHeader soporta el modo sticky de editor con navegación, estado y contenido secundario", () => {
  const html = renderToStaticMarkup(
    <RdxPageHeader
      actions={<span>Actions</span>}
      backLabel="Volver"
      onBack={() => undefined}
      showStatus
      statusLabel="Modificada"
      sticky
      title="Editar proforma"
    >
      <div>Secondary content</div>
    </RdxPageHeader>
  );

  assert.match(html, /sticky top-0/);
  assert.match(html, /aria-label="Volver"/);
  assert.match(html, /Editar proforma/);
  assert.match(html, /Modificada/);
  assert.match(html, /Actions/);
  assert.match(html, /Secondary content/);
});

test("RdxPageActions renders only populated regions in the expected order", () => {
  const html = renderToStaticMarkup(
    <RdxPageActions
      overflow={<span>Overflow</span>}
      primary={<span>Primary</span>}
      secondary={<span>Secondary</span>}
    />
  );

  assert.ok(html.indexOf("Secondary") < html.indexOf("Primary"));
  assert.ok(html.indexOf("Primary") < html.indexOf("Overflow"));
});

test("RdxPageActions returns null when all regions are empty", () => {
  const html = renderToStaticMarkup(<RdxPageActions />);

  assert.equal(html, "");
});