@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/__tests__/ActivityTimeline.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * 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 '@testing-library/jest-dom';
+import { ActivityTimeline } from '../ActivityTimeline';
+import type { ActivityEntry } from '@object-ui/types';
+
+const mockActivities: ActivityEntry[] = [
+  {
+    id: '1',
+    type: 'create',
+    user: 'Alice',
+    timestamp: '2026-02-15T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'field_change',
+    field: 'status',
+    oldValue: 'open',
+    newValue: 'in_progress',
+    user: 'Bob',
+    timestamp: '2026-02-16T08:30:00Z',
+  },
+  {
+    id: '3',
+    type: 'status_change',
+    field: 'stage',
+    newValue: 'Completed',
+    user: 'Charlie',
+    timestamp: '2026-02-16T09:00:00Z',
+    description: 'Moved to Completed stage',
+  },
+  {
+    id: '4',
+    type: 'comment',
+    user: 'Alice',
+    timestamp: '2026-02-16T09:30:00Z',
+    description: 'Added a comment',
+  },
+];
+
+describe('ActivityTimeline', () => {
+  it('should render activity heading with count', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.getByText('Activity')).toBeInTheDocument();
+    expect(screen.getByText('(4)')).toBeInTheDocument();
+  });
+
+  it('should render user names', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.getAllByText('Alice')).toHaveLength(2);
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('should show "No activity recorded" when empty', () => {
+    render(<ActivityTimeline activities={[]} />);
+    expect(screen.getByText('No activity recorded')).toBeInTheDocument();
+  });
+
+  it('should render field change description for field_change type', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: '1',
+            type: 'field_change',
+            field: 'priority',
+            oldValue: 'low',
+            newValue: 'high',
+            user: 'Eve',
+            timestamp: '2026-02-16T10:00:00Z',
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText(/Changed Priority from "low" to "high"/)).toBeInTheDocument();
+  });
+
+  it('should use description if provided', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: '1',
+            type: 'comment',
+            user: 'Alice',
+            timestamp: '2026-02-16T09:30:00Z',
+            description: 'Added a comment',
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Added a comment')).toBeInTheDocument();
+  });
+
+  it('should render create type with default description', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: '1',
+            type: 'create',
+            user: 'Eve',
+            timestamp: '2026-02-16T10:00:00Z',
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Created this record')).toBeInTheDocument();
+  });
+});

package/src/__tests__/ActivityTimelineFiltering.test.tsx

@@ -0,0 +1,143 @@
+/**
+ * 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, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ActivityTimeline } from '../ActivityTimeline';
+import type { ActivityEntry } from '@object-ui/types';
+
+const mockActivities: ActivityEntry[] = [
+  {
+    id: '1',
+    type: 'create',
+    user: 'Alice',
+    timestamp: '2026-02-15T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'field_change',
+    field: 'status',
+    oldValue: 'open',
+    newValue: 'in_progress',
+    user: 'Bob',
+    timestamp: '2026-02-16T08:30:00Z',
+  },
+  {
+    id: '3',
+    type: 'comment',
+    user: 'Charlie',
+    timestamp: '2026-02-16T09:00:00Z',
+    description: 'Added a comment on the record',
+  },
+  {
+    id: '4',
+    type: 'delete',
+    user: 'Diana',
+    timestamp: '2026-02-16T09:30:00Z',
+  },
+  {
+    id: '5',
+    type: 'comment',
+    user: 'Eve',
+    timestamp: '2026-02-16T10:00:00Z',
+    description: 'Another comment here',
+  },
+];
+
+describe('ActivityTimeline - Filtering', () => {
+  it('does not render filter controls when filterable is false/not provided', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.queryByRole('group', { name: 'Activity type filter' })).not.toBeInTheDocument();
+  });
+
+  it('renders filter controls when filterable is true', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+    const filterGroup = screen.getByRole('group', { name: 'Activity type filter' });
+    expect(filterGroup).toBeInTheDocument();
+
+    // Should have "All", "Field Changes", "Creates", "Deletes", "Comments", "Status Changes"
+    expect(screen.getByText('All')).toBeInTheDocument();
+    expect(screen.getByText('Comments')).toBeInTheDocument();
+    expect(screen.getByText('Field Changes')).toBeInTheDocument();
+    expect(screen.getByText('Creates')).toBeInTheDocument();
+    expect(screen.getByText('Deletes')).toBeInTheDocument();
+  });
+
+  it('shows all activities by default', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+    // Count should be (5)
+    expect(screen.getByText('(5)')).toBeInTheDocument();
+  });
+
+  it('filters to only comments when Comments filter is selected', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+
+    const commentsFilter = screen.getByText('Comments');
+    fireEvent.click(commentsFilter);
+
+    // Only 2 comment activities
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+    expect(screen.getByText('Added a comment on the record')).toBeInTheDocument();
+    expect(screen.getByText('Another comment here')).toBeInTheDocument();
+  });
+
+  it('filters to only field changes when Field Changes filter is selected', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+
+    const fieldChangesFilter = screen.getByText('Field Changes');
+    fireEvent.click(fieldChangesFilter);
+
+    // Only 1 field_change activity
+    expect(screen.getByText('(1)')).toBeInTheDocument();
+  });
+
+  it('shows all activities when All filter is re-selected', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+
+    // First filter to comments only
+    fireEvent.click(screen.getByText('Comments'));
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+
+    // Then go back to All
+    fireEvent.click(screen.getByText('All'));
+    expect(screen.getByText('(5)')).toBeInTheDocument();
+  });
+
+  it('respects defaultFilter prop', () => {
+    render(
+      <ActivityTimeline
+        activities={mockActivities}
+        filterable
+        defaultFilter="comment"
+      />,
+    );
+
+    // Should start filtered to comments
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+  });
+
+  it('shows "No activity recorded" when filter has no results', () => {
+    render(
+      <ActivityTimeline
+        activities={mockActivities}
+        filterable
+        defaultFilter="status_change"
+      />,
+    );
+
+    expect(screen.getByText('No activity recorded')).toBeInTheDocument();
+  });
+
+  it('renders all activities without filter when filterable is not set', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.getByText('(5)')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+});

package/src/__tests__/CommentInput.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { CommentInput } from '../CommentInput';
+
+describe('CommentInput', () => {
+  it('should render placeholder text', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    expect(screen.getByPlaceholderText('Leave a comment…')).toBeInTheDocument();
+  });
+
+  it('should render custom placeholder', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} placeholder="Type here…" />);
+    expect(screen.getByPlaceholderText('Type here…')).toBeInTheDocument();
+  });
+
+  it('should disable submit when textarea is empty', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    expect(screen.getByLabelText('Submit comment')).toBeDisabled();
+  });
+
+  it('should enable submit when text is entered', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    fireEvent.change(screen.getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'Hello' },
+    });
+    expect(screen.getByLabelText('Submit comment')).not.toBeDisabled();
+  });
+
+  it('should call onSubmit with text when clicked', () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    render(<CommentInput onSubmit={onSubmit} />);
+    fireEvent.change(screen.getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'Hello world' },
+    });
+    fireEvent.click(screen.getByLabelText('Submit comment'));
+    expect(onSubmit).toHaveBeenCalledWith('Hello world');
+  });
+
+  it('should disable input when disabled prop is true', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} disabled />);
+    expect(screen.getByPlaceholderText('Leave a comment…')).toBeDisabled();
+  });
+});

package/src/__tests__/DetailSection.test.tsx

@@ -0,0 +1,320 @@
+/**
+ * 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 } 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();
+  });
+});