@object-ui/plugin-detail 3.3.0 → 3.3.1

package/src/__tests__/DetailSection.test.tsx

@@ -1,490 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { DetailSection, getResponsiveSpanClass } from '../DetailSection';
-
-describe('DetailSection', () => {
-  it('should render text fields as plain text', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'name', label: 'Name', type: 'text' }],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ name: 'Alice' }} />);
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-  });
-
-  it('should render date fields formatted (not raw ISO)', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'order_date', label: 'Order Date', type: 'date' }],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ order_date: '2024-01-15T00:00:00.000Z' }} />);
-    // Should NOT show raw ISO string
-    expect(screen.queryByText('2024-01-15T00:00:00.000Z')).not.toBeInTheDocument();
-    // Should show formatted date (e.g. "Jan 15, 2024")
-    expect(screen.getByText(/Jan/)).toBeInTheDocument();
-    expect(screen.getByText(/2024/)).toBeInTheDocument();
-  });
-
-  it('should render currency fields formatted', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'total_amount', label: 'Total Amount', type: 'currency' }],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ total_amount: 15459.99 }} />);
-    // Should NOT show plain number
-    expect(screen.queryByText('15459.99')).not.toBeInTheDocument();
-    // Should show formatted currency (e.g. "$15,459.99")
-    expect(screen.getByText(/15,459\.99/)).toBeInTheDocument();
-  });
-
-  it('should render boolean fields with checkbox', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'active', label: 'Active', type: 'boolean' }],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ active: true }} />);
-    // BooleanCellRenderer renders a checkbox
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toBeInTheDocument();
-  });
-
-  it('should render select fields as badge', () => {
-    const section = {
-      title: 'Info',
-      fields: [
-        {
-          name: 'status',
-          label: 'Status',
-          type: 'select',
-          options: [
-            { value: 'Draft', label: 'Draft', color: 'yellow' },
-            { value: 'Active', label: 'Active', color: 'green' },
-          ],
-        },
-      ],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ status: 'Draft' }} />);
-    expect(screen.getByText('Draft')).toBeInTheDocument();
-  });
-
-  it('should render null/undefined values as dash', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'missing', label: 'Missing', type: 'text' }],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{}} />);
-    expect(screen.getByText('—')).toBeInTheDocument();
-  });
-
-  it('should render section title', () => {
-    const section = {
-      title: 'Basic Information',
-      fields: [{ name: 'name', label: 'Name' }],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ name: 'Test' }} />);
-    expect(screen.getByText('Basic Information')).toBeInTheDocument();
-  });
-
-  it('should auto-infer 2 columns when columns is not set and 5+ fields exist', () => {
-    const section = {
-      title: 'Auto Layout',
-      fields: Array.from({ length: 6 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    // The grid container should have the md:grid-cols-2 class
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.className).toContain('md:grid-cols-2');
-  });
-
-  it('should auto-infer 3 columns when columns is not set and 11+ fields exist', () => {
-    const section = {
-      title: 'Many Fields',
-      fields: Array.from({ length: 12 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.className).toContain('lg:grid-cols-3');
-  });
-
-  it('should keep 1 column when columns is not set and ≤3 fields exist', () => {
-    const section = {
-      title: 'Few Fields',
-      fields: [
-        { name: 'a', label: 'A', type: 'text' },
-        { name: 'b', label: 'B', type: 'text' },
-      ],
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.className).toContain('grid-cols-1');
-    expect(grid!.className).not.toContain('sm:grid-cols-2');
-  });
-
-  it('should respect explicit columns=1 even with many fields', () => {
-    const section = {
-      title: 'Forced Single Column',
-      fields: Array.from({ length: 15 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-      columns: 1,
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.className).toContain('grid-cols-1');
-    expect(grid!.className).not.toContain('sm:grid-cols-2');
-  });
-
-  it('should hide empty fields when hideEmpty is true', () => {
-    const section = {
-      title: 'Info',
-      hideEmpty: true,
-      fields: [
-        { name: 'name', label: 'Name', type: 'text' },
-        { name: 'email', label: 'Email', type: 'text' },
-        { name: 'phone', label: 'Phone', type: 'text' },
-      ],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ name: 'Alice', email: null, phone: '' }} />);
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-    expect(screen.queryByText('Email')).not.toBeInTheDocument();
-    expect(screen.queryByText('Phone')).not.toBeInTheDocument();
-  });
-
-  it('should hide entire section when all fields are empty and hideEmpty is true', () => {
-    const section = {
-      title: 'Empty Section',
-      hideEmpty: true,
-      fields: [
-        { name: 'a', label: 'A', type: 'text' },
-        { name: 'b', label: 'B', type: 'text' },
-      ],
-      columns: 1,
-    };
-    const { container } = render(<DetailSection section={section} data={{ a: null, b: undefined }} />);
-    // Section should be hidden entirely
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('should still show empty fields when hideEmpty is not set', () => {
-    const section = {
-      title: 'Info',
-      fields: [
-        { name: 'name', label: 'Name', type: 'text' },
-        { name: 'missing', label: 'Missing', type: 'text' },
-      ],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ name: 'Alice' }} />);
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-    expect(screen.getByText('—')).toBeInTheDocument();
-  });
-
-  it('should use md: breakpoint for 2-column layouts', () => {
-    const section = {
-      title: 'Responsive',
-      fields: Array.from({ length: 6 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.className).toContain('md:grid-cols-2');
-    expect(grid!.className).not.toContain('sm:grid-cols-2');
-  });
-
-  it('should use lg: breakpoint for 3-column layouts', () => {
-    const section = {
-      title: 'Responsive',
-      fields: Array.from({ length: 12 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.className).toContain('lg:grid-cols-3');
-    expect(grid!.className).not.toContain('md:grid-cols-3');
-  });
-
-  it('should enrich field type from objectSchema when field.type is not set', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'status', label: 'Status' }],
-      columns: 1,
-    };
-    const objectSchema = {
-      fields: {
-        status: {
-          type: 'select',
-          options: [
-            { value: 'Draft', label: 'Draft', color: 'yellow' },
-            { value: 'Active', label: 'Active', color: 'green' },
-          ],
-        },
-      },
-    };
-    render(<DetailSection section={section} data={{ status: 'Draft' }} objectSchema={objectSchema} />);
-    // Should render via SelectCellRenderer (displays label), not plain String()
-    expect(screen.getByText('Draft')).toBeInTheDocument();
-  });
-
-  it('should render percent field from objectSchema enrichment', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'discount', label: 'Discount' }],
-      columns: 1,
-    };
-    const objectSchema = {
-      fields: {
-        discount: { type: 'percent' },
-      },
-    };
-    render(<DetailSection section={section} data={{ discount: 25 }} objectSchema={objectSchema} />);
-    // PercentCellRenderer should format as "25%" 
-    expect(screen.getByText(/25/)).toBeInTheDocument();
-    expect(screen.getByText(/%/)).toBeInTheDocument();
-  });
-
-  it('should fall back to String(value) when neither field.type nor objectSchema provides a type', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'notes', label: 'Notes' }],
-      columns: 1,
-    };
-    render(<DetailSection section={section} data={{ notes: 'Hello World' }} />);
-    expect(screen.getByText('Hello World')).toBeInTheDocument();
-  });
-
-  it('should prefer explicit field.type over objectSchema type', () => {
-    const section = {
-      title: 'Info',
-      fields: [{ name: 'name', label: 'Name', type: 'text' as const }],
-      columns: 1,
-    };
-    const objectSchema = {
-      fields: {
-        name: { type: 'number' },
-      },
-    };
-    render(<DetailSection section={section} data={{ name: 'Alice' }} objectSchema={objectSchema} />);
-    // Should use 'text' renderer, not 'number'
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-  });
-
-  it('should use responsive span classes for wide fields in 3-column layout', () => {
-    const section = {
-      title: 'Wide Fields',
-      fields: Array.from({ length: 12 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: i === 5 ? 'textarea' : 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.className).toContain('lg:grid-cols-3');
-    // Wide field (textarea) should have responsive span, not bare col-span-3
-    const fields = container.querySelectorAll('[class*="col-span"]');
-    fields.forEach((field) => {
-      // No bare col-span-3 at base level — must be lg: prefixed
-      const classes = field.className.split(/\s+/);
-      const hasBareSpan3 = classes.some((c: string) => c === 'col-span-3');
-      expect(hasBareSpan3).toBe(false);
-    });
-  });
-
-  it('should use responsive span classes for wide fields in 2-column layout', () => {
-    const section = {
-      title: 'Wide Fields',
-      fields: [
-        { name: 'a', label: 'A', type: 'text' },
-        { name: 'b', label: 'B', type: 'text' },
-        { name: 'c', label: 'C', type: 'text' },
-        { name: 'd', label: 'D', type: 'text' },
-        { name: 'notes', label: 'Notes', type: 'textarea' },
-      ],
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid!.className).toContain('md:grid-cols-2');
-    // Wide field should have md:col-span-2, not bare col-span-2
-    const fields = container.querySelectorAll('[class*="col-span"]');
-    fields.forEach((field) => {
-      const classes = field.className.split(/\s+/);
-      const hasBareSpan2 = classes.some((c: string) => c === 'col-span-2');
-      expect(hasBareSpan2).toBe(false);
-    });
-  });
-
-  it('should not apply col-span at base breakpoint to prevent implicit grid columns on mobile', () => {
-    const section = {
-      title: 'Mobile Safe',
-      fields: Array.from({ length: 15 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: i === 0 ? 'textarea' : 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    // Ensure no bare col-span-N (N>1) classes without responsive prefix
-    const allElements = container.querySelectorAll('*');
-    allElements.forEach((el) => {
-      const classes = el.className?.split?.(/\s+/) || [];
-      classes.forEach((cls: string) => {
-        if (cls.match(/^col-span-[2-9]$/)) {
-          throw new Error(`Found bare "${cls}" class without responsive prefix — would break mobile single-column layout`);
-        }
-      });
-    });
-  });
-
-  it('should initially render a batch when virtualScroll is enabled with many fields', () => {
-    const section = {
-      title: 'Virtual',
-      fields: Array.from({ length: 50 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection
-        section={section}
-        data={{}}
-        virtualScroll={{ enabled: true, batchSize: 10 }}
-      />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    // Initially should render only the batch (10 fields), not all 50
-    const fieldElements = grid!.children;
-    expect(fieldElements.length).toBeLessThanOrEqual(10);
-  });
-
-  it('should render all fields when virtualScroll is disabled', () => {
-    const section = {
-      title: 'No Virtual',
-      fields: Array.from({ length: 50 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection section={section} data={{}} />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.children.length).toBe(50);
-  });
-
-  it('should render all fields when virtualScroll is enabled but field count is below batch size', () => {
-    const section = {
-      title: 'Small',
-      fields: Array.from({ length: 5 }, (_, i) => ({
-        name: `field_${i}`,
-        label: `Field ${i}`,
-        type: 'text',
-      })),
-    };
-    const { container } = render(
-      <DetailSection
-        section={section}
-        data={{}}
-        virtualScroll={{ enabled: true, batchSize: 20 }}
-      />
-    );
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeTruthy();
-    expect(grid!.children.length).toBe(5);
-  });
-});
-
-describe('getResponsiveSpanClass', () => {
-  it('should return empty string for no span', () => {
-    expect(getResponsiveSpanClass(undefined, 2)).toBe('');
-  });
-
-  it('should return empty string for span=1', () => {
-    expect(getResponsiveSpanClass(1, 3)).toBe('');
-  });
-
-  it('should return empty string for 1-column layout', () => {
-    expect(getResponsiveSpanClass(3, 1)).toBe('');
-  });
-
-  it('should return md:col-span-2 for span=2 in 2-column layout', () => {
-    expect(getResponsiveSpanClass(2, 2)).toBe('md:col-span-2');
-  });
-
-  it('should cap span to 2 in 2-column layout', () => {
-    expect(getResponsiveSpanClass(3, 2)).toBe('md:col-span-2');
-    expect(getResponsiveSpanClass(6, 2)).toBe('md:col-span-2');
-  });
-
-  it('should return md:col-span-2 for span=2 in 3-column layout', () => {
-    expect(getResponsiveSpanClass(2, 3)).toBe('md:col-span-2');
-  });
-
-  it('should return responsive classes for span=3 in 3-column layout', () => {
-    expect(getResponsiveSpanClass(3, 3)).toBe('md:col-span-2 lg:col-span-3');
-  });
-
-  it('should cap span to 3 in 3-column layout', () => {
-    expect(getResponsiveSpanClass(6, 3)).toBe('md:col-span-2 lg:col-span-3');
-  });
-});