pn-new-crm/tests/unit/pdf-brand-kit.test.tsx

import { describe, expect, it } from 'vitest';

import { Page, Text } from '@react-pdf/renderer';

import { renderPdf } from '@/lib/pdf/render';
import {
  Badge,
  BarChart,
  DataTable,
  DocumentShell,
  FunnelChart,
  KeyValueGrid,
  LineChart,
  PDF_TOKENS,
  PieChart,
  Section,
} from '@/lib/pdf/brand-kit';

describe('pdf brand kit', () => {
  it('exposes canonical design tokens', () => {
    expect(PDF_TOKENS.colors.headerBand).toBe('#0f172a');
    expect(PDF_TOKENS.sizes.body).toBe(10);
    expect(PDF_TOKENS.spacing.logoMaxWidth).toBe(200);
  });

  it('renders a kitchen-sink PDF without throwing', async () => {
    const tree = (
      <DocumentShell
        portName="Port Test"
        docTitle="Smoke Report"
        docMeta="2026-05-12"
        logoBuffer={null}
      >
        <Section title="Summary">
          <KeyValueGrid
            rows={[
              { label: 'Total', value: 247 },
              { label: 'Active', value: 'Yes' },
            ]}
          />
        </Section>
        <Section title="Charts">
          <BarChart
            data={[
              { label: 'Mon', value: 10 },
              { label: 'Tue', value: 20 },
            ]}
          />
          <LineChart
            data={[
              { label: 'Jan', value: 5 },
              { label: 'Feb', value: 8 },
            ]}
          />
          <PieChart
            data={[
              { label: 'A', value: 30 },
              { label: 'B', value: 70 },
            ]}
          />
          <FunnelChart
            data={[
              { label: 'Lead', value: 100 },
              { label: 'Closed', value: 25 },
            ]}
          />
        </Section>
        <Section title="Table">
          <Badge text="Active" tone="success" />
          <DataTable<{ name: string; score: number }>
            columns={[
              { header: 'Name', render: (r) => r.name },
              { header: 'Score', align: 'right', render: (r) => String(r.score) },
            ]}
            rows={[
              { name: 'Alpha', score: 1 },
              { name: 'Beta', score: 2 },
            ]}
            totals={['Total', '3']}
          />
        </Section>
      </DocumentShell>
    );
    const bytes = await renderPdf(tree);
    expect(bytes).toBeInstanceOf(Buffer);
    expect(bytes.length).toBeGreaterThan(1000);
    expect(bytes.subarray(0, 5).toString('utf8')).toBe('%PDF-');
  }, 30_000);

  it('falls back gracefully when no chart data is provided', async () => {
    const tree = (
      <DocumentShell portName="Port Empty" docTitle="Empty" logoBuffer={null}>
        <BarChart data={[]} />
        <LineChart data={[]} />
        <PieChart data={[]} />
        <FunnelChart data={[]} />
        <DataTable columns={[{ header: 'X', render: () => '' }]} rows={[]} />
      </DocumentShell>
    );
    const bytes = await renderPdf(tree);
    expect(bytes.subarray(0, 5).toString('utf8')).toBe('%PDF-');
  }, 30_000);
});

// Belt-and-suspenders: a minimal direct Page render to confirm @react-pdf/renderer
// is actually installed and produces a real PDF stream, not just our tree.
describe('react-pdf renderer wiring', () => {
  it('renders a bare <Page> to bytes', async () => {
    const { Document } = await import('@react-pdf/renderer');
    const tree = (
      <Document>
        <Page size="A4">
          <Text>hello</Text>
        </Page>
      </Document>
    );
    const bytes = await renderPdf(tree);
    expect(bytes.length).toBeGreaterThan(500);
    expect(bytes.subarray(0, 5).toString('utf8')).toBe('%PDF-');
  }, 30_000);
});