@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/__tests__/RecordChatterPanel.test.tsx

@@ -0,0 +1,227 @@
+/**
+ * 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 { RecordChatterPanel } from '../RecordChatterPanel';
+import type { FeedItem } from '@object-ui/types';
+
+const mockItems: FeedItem[] = [
+  {
+    id: '1',
+    type: 'comment',
+    actor: 'Alice',
+    body: 'Hello from chatter',
+    createdAt: '2026-02-20T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'field_change',
+    actor: 'Bob',
+    createdAt: '2026-02-20T11:00:00Z',
+    fieldChanges: [
+      { field: 'priority', fieldLabel: 'Priority', oldValue: 'low', newValue: 'high' },
+    ],
+  },
+];
+
+describe('RecordChatterPanel', () => {
+  describe('sidebar mode (right)', () => {
+    it('should render Discussion header in sidebar mode', () => {
+      render(
+        <RecordChatterPanel config={{ position: 'right' }} items={mockItems} />,
+      );
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+    });
+
+    it('should render activity items', () => {
+      render(
+        <RecordChatterPanel config={{ position: 'right' }} items={mockItems} />,
+      );
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+      expect(screen.getByText('Hello from chatter')).toBeInTheDocument();
+    });
+
+    it('should collapse when close button is clicked', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true }}
+          items={mockItems}
+        />,
+      );
+      // Initially expanded (not defaultCollapsed)
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+      fireEvent.click(screen.getByLabelText('Close discussion panel'));
+      // Now collapsed — show expand button
+      expect(screen.getByLabelText('Open discussion panel')).toBeInTheDocument();
+    });
+
+    it('should start collapsed when defaultCollapsed is true', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByLabelText('Open discussion panel')).toBeInTheDocument();
+      expect(screen.queryByText('Discussion')).not.toBeInTheDocument();
+    });
+
+    it('should expand from collapsed state', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      fireEvent.click(screen.getByLabelText('Open discussion panel'));
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+    });
+  });
+
+  describe('inline mode (bottom)', () => {
+    it('should render timeline in inline mode', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: false }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByText('Activity')).toBeInTheDocument();
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+    });
+
+    it('should show/hide discussion toggle in inline collapsible mode', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
+      fireEvent.click(screen.getByLabelText('Show discussion'));
+      expect(screen.getByText('Activity')).toBeInTheDocument();
+    });
+  });
+
+  describe('default config', () => {
+    it('should default to right position', () => {
+      render(<RecordChatterPanel items={mockItems} />);
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+    });
+
+    it('should pass feed config to embedded timeline', () => {
+      render(
+        <RecordChatterPanel
+          config={{ feed: { showFilterToggle: false } }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.queryByLabelText('Filter activity')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('left sidebar mode', () => {
+    it('should render with border-r in left position', () => {
+      const { container } = render(
+        <RecordChatterPanel config={{ position: 'left' }} items={mockItems} />,
+      );
+      const panel = container.firstChild as HTMLElement;
+      expect(panel).toHaveClass('border-r');
+    });
+  });
+
+  describe('right sidebar width', () => {
+    it('should apply configured width via style', () => {
+      const { container } = render(
+        <RecordChatterPanel config={{ position: 'right', width: '400px' }} items={mockItems} />,
+      );
+      const panel = container.firstChild as HTMLElement;
+      expect(panel.style.width).toBe('400px');
+    });
+  });
+
+  describe('collapsible=false', () => {
+    it('should not show collapse button when collapsible is false', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: false }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByText('Discussion')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Close discussion panel')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('sidebar timeline styling', () => {
+    it('should pass border-0 shadow-none to embedded timeline', () => {
+      const { container } = render(
+        <RecordChatterPanel config={{ position: 'right' }} items={mockItems} />,
+      );
+      // The RecordActivityTimeline renders a Card; in sidebar mode it gets border-0 shadow-none
+      const card = container.querySelector('.border-0.shadow-none');
+      expect(card).toBeInTheDocument();
+    });
+  });
+
+  describe('callback passthrough', () => {
+    it('should forward onAddComment to embedded timeline', () => {
+      const onAddComment = vi.fn().mockResolvedValue(undefined);
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right' }}
+          items={[]}
+          onAddComment={onAddComment}
+        />,
+      );
+      expect(screen.getByPlaceholderText(/Leave a comment/)).toBeInTheDocument();
+    });
+  });
+
+  describe('inline collapsible buttons', () => {
+    it('should show "Show Discussion (N)" when collapsed inline', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByText('Show Discussion (2)')).toBeInTheDocument();
+    });
+
+    it('should show "Hide discussion" button when expanded inline', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true }}
+          items={mockItems}
+        />,
+      );
+      expect(screen.getByLabelText('Hide discussion')).toBeInTheDocument();
+    });
+
+    it('should toggle between collapsed and expanded inline', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true, defaultCollapsed: true }}
+          items={mockItems}
+        />,
+      );
+      // Collapsed
+      expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
+      fireEvent.click(screen.getByLabelText('Show discussion'));
+      // Expanded
+      expect(screen.getByText('Activity')).toBeInTheDocument();
+      // Click hide
+      fireEvent.click(screen.getByLabelText('Hide discussion'));
+      // Collapsed again
+      expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/RecordComments.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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 { RecordComments } from '../RecordComments';
+import type { CommentEntry } from '@object-ui/types';
+
+const mockComments: CommentEntry[] = [
+  {
+    id: '1',
+    text: 'This is the first comment',
+    author: 'Alice',
+    createdAt: '2026-02-16T08:00:00Z',
+  },
+  {
+    id: '2',
+    text: 'Second comment here',
+    author: 'Bob',
+    avatarUrl: 'https://example.com/bob.jpg',
+    createdAt: '2026-02-16T09:00:00Z',
+  },
+];
+
+describe('RecordComments', () => {
+  it('should render comments heading with count', () => {
+    render(<RecordComments comments={mockComments} />);
+    expect(screen.getByText('Comments')).toBeInTheDocument();
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+  });
+
+  it('should render comment authors and text', () => {
+    render(<RecordComments comments={mockComments} />);
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('This is the first comment')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Second comment here')).toBeInTheDocument();
+  });
+
+  it('should show "No comments yet" when empty', () => {
+    render(<RecordComments comments={[]} />);
+    expect(screen.getByText('No comments yet')).toBeInTheDocument();
+  });
+
+  it('should render comment input when onAddComment is provided', () => {
+    const onAdd = vi.fn();
+    render(<RecordComments comments={[]} onAddComment={onAdd} />);
+    const textarea = screen.getByPlaceholderText(/Add a comment/);
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it('should not render comment input when onAddComment is not provided', () => {
+    render(<RecordComments comments={[]} />);
+    const textarea = screen.queryByPlaceholderText(/Add a comment/);
+    expect(textarea).not.toBeInTheDocument();
+  });
+
+  it('should call onAddComment when submit button is clicked', async () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(<RecordComments comments={[]} onAddComment={onAdd} />);
+
+    const textarea = screen.getByPlaceholderText(/Add a comment/);
+    fireEvent.change(textarea, { target: { value: 'New comment' } });
+
+    const submitButton = screen.getByRole('button');
+    fireEvent.click(submitButton);
+
+    expect(onAdd).toHaveBeenCalledWith('New comment');
+  });
+
+  it('should disable submit button when textarea is empty', () => {
+    const onAdd = vi.fn();
+    render(<RecordComments comments={[]} onAddComment={onAdd} />);
+    const submitButton = screen.getByRole('button');
+    expect(submitButton).toBeDisabled();
+  });
+
+  it('should render avatar initials when no avatarUrl', () => {
+    render(<RecordComments comments={[mockComments[0]]} />);
+    // Alice's initial
+    expect(screen.getByText('A')).toBeInTheDocument();
+  });
+
+  it('should render avatar image when avatarUrl is provided', () => {
+    render(<RecordComments comments={[mockComments[1]]} />);
+    const img = screen.getByAltText('Bob');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', 'https://example.com/bob.jpg');
+  });
+});

package/src/__tests__/RecordCommentsPinSearch.test.tsx

@@ -0,0 +1,133 @@
+/**
+ * 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 { RecordComments } from '../RecordComments';
+import type { CommentEntry } from '@object-ui/types';
+
+const mockComments: CommentEntry[] = [
+  {
+    id: '1',
+    text: 'First comment about the project',
+    author: 'Alice',
+    createdAt: '2026-02-16T08:00:00Z',
+  },
+  {
+    id: '2',
+    text: 'Second comment on this record',
+    author: 'Bob',
+    avatarUrl: 'https://example.com/bob.jpg',
+    createdAt: '2026-02-16T09:00:00Z',
+    pinned: true,
+  },
+  {
+    id: '3',
+    text: 'Third comment here',
+    author: 'Charlie',
+    createdAt: '2026-02-16T10:00:00Z',
+  },
+];
+
+describe('RecordComments - Pinning', () => {
+  it('shows "Pinned" label on pinned comments', () => {
+    render(<RecordComments comments={mockComments} />);
+    expect(screen.getByText('Pinned')).toBeInTheDocument();
+  });
+
+  it('sorts pinned comments to the top', () => {
+    const { container } = render(<RecordComments comments={mockComments} />);
+    // Bob (pinned) should appear first
+    const authors = container.querySelectorAll('.text-sm.font-medium');
+    const authorTexts = Array.from(authors).map(el => el.textContent);
+    expect(authorTexts[0]).toBe('Bob');
+  });
+
+  it('renders pin/unpin button when onTogglePin is provided', () => {
+    const onTogglePin = vi.fn();
+    render(<RecordComments comments={mockComments} onTogglePin={onTogglePin} />);
+
+    // Should show "Unpin" for Bob (pinned) and "Pin" for others
+    expect(screen.getByText('Unpin')).toBeInTheDocument();
+    expect(screen.getAllByText('Pin')).toHaveLength(2);
+  });
+
+  it('does not render pin button when onTogglePin is not provided', () => {
+    render(<RecordComments comments={mockComments} />);
+    expect(screen.queryByText('Unpin')).not.toBeInTheDocument();
+    expect(screen.queryAllByText('Pin')).toHaveLength(0);
+  });
+
+  it('calls onTogglePin when pin button is clicked', () => {
+    const onTogglePin = vi.fn();
+    render(<RecordComments comments={mockComments} onTogglePin={onTogglePin} />);
+
+    const unpinBtn = screen.getByText('Unpin');
+    fireEvent.click(unpinBtn);
+
+    expect(onTogglePin).toHaveBeenCalledWith('2');
+  });
+});
+
+describe('RecordComments - Search', () => {
+  it('does not render search input when searchable is false/not provided', () => {
+    render(<RecordComments comments={mockComments} />);
+    expect(screen.queryByLabelText('Search comments')).not.toBeInTheDocument();
+  });
+
+  it('renders search input when searchable is true', () => {
+    render(<RecordComments comments={mockComments} searchable />);
+    expect(screen.getByLabelText('Search comments')).toBeInTheDocument();
+  });
+
+  it('filters comments by text when searching', () => {
+    render(<RecordComments comments={mockComments} searchable />);
+
+    const searchInput = screen.getByLabelText('Search comments');
+    fireEvent.change(searchInput, { target: { value: 'project' } });
+
+    expect(screen.getByText('First comment about the project')).toBeInTheDocument();
+    expect(screen.queryByText('Second comment on this record')).not.toBeInTheDocument();
+    expect(screen.queryByText('Third comment here')).not.toBeInTheDocument();
+  });
+
+  it('filters comments by author when searching', () => {
+    render(<RecordComments comments={mockComments} searchable />);
+
+    const searchInput = screen.getByLabelText('Search comments');
+    fireEvent.change(searchInput, { target: { value: 'Charlie' } });
+
+    expect(screen.getByText('Third comment here')).toBeInTheDocument();
+    expect(screen.queryByText('First comment about the project')).not.toBeInTheDocument();
+  });
+
+  it('shows "No matching comments" when search has no results', () => {
+    render(<RecordComments comments={mockComments} searchable />);
+
+    const searchInput = screen.getByLabelText('Search comments');
+    fireEvent.change(searchInput, { target: { value: 'zzzznonexistent' } });
+
+    expect(screen.getByText('No matching comments')).toBeInTheDocument();
+  });
+
+  it('clears search when clear button is clicked', () => {
+    render(<RecordComments comments={mockComments} searchable />);
+
+    const searchInput = screen.getByLabelText('Search comments');
+    fireEvent.change(searchInput, { target: { value: 'project' } });
+
+    const clearBtn = screen.getByLabelText('Clear search');
+    fireEvent.click(clearBtn);
+
+    // All comments should be visible again
+    expect(screen.getByText('First comment about the project')).toBeInTheDocument();
+    expect(screen.getByText('Second comment on this record')).toBeInTheDocument();
+    expect(screen.getByText('Third comment here')).toBeInTheDocument();
+  });
+});

package/src/__tests__/RelatedList.test.tsx

@@ -0,0 +1,160 @@
+/**
+ * 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, waitFor } from '@testing-library/react';
+import { RelatedList } from '../RelatedList';
+
+describe('RelatedList', () => {
+  it('should render title', () => {
+    render(<RelatedList title="Contacts" type="table" data={[]} />);
+    expect(screen.getByText('Contacts')).toBeInTheDocument();
+  });
+
+  it('should show record count badge for empty list', () => {
+    render(<RelatedList title="Contacts" type="table" data={[]} />);
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it('should show record count badge for one item', () => {
+    render(<RelatedList title="Contacts" type="table" data={[{ id: 1, name: 'Alice' }]} />);
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('should show record count badge for multiple items', () => {
+    const data = [
+      { id: 1, name: 'Alice' },
+      { id: 2, name: 'Bob' },
+    ];
+    render(<RelatedList title="Orders" type="table" data={data} />);
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('should show "No related records found" for empty data', () => {
+    render(<RelatedList title="Contacts" type="table" data={[]} />);
+    expect(screen.getByText('No related records found')).toBeInTheDocument();
+  });
+
+  it('should render New button when onNew callback is provided', () => {
+    const onNew = vi.fn();
+    render(<RelatedList title="Contacts" type="table" data={[]} onNew={onNew} />);
+    const newButton = screen.getByText('New');
+    expect(newButton).toBeInTheDocument();
+    fireEvent.click(newButton);
+    expect(onNew).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render View All button when onViewAll callback is provided', () => {
+    const onViewAll = vi.fn();
+    render(<RelatedList title="Contacts" type="table" data={[]} onViewAll={onViewAll} />);
+    const viewAllButton = screen.getByText('View All');
+    expect(viewAllButton).toBeInTheDocument();
+    fireEvent.click(viewAllButton);
+    expect(onViewAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not render New or View All buttons when callbacks are not provided', () => {
+    render(<RelatedList title="Contacts" type="table" data={[]} />);
+    expect(screen.queryByText('New')).not.toBeInTheDocument();
+    expect(screen.queryByText('View All')).not.toBeInTheDocument();
+  });
+
+  it('should auto-generate columns from object schema when api and dataSource provided but no columns', async () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn().mockResolvedValue({
+        name: 'order_item',
+        fields: {
+          product: { type: 'string', label: 'Product' },
+          quantity: { type: 'number', label: 'Quantity' },
+          _id: { type: 'string', label: 'ID' },
+        },
+      }),
+      find: vi.fn(),
+    } as any;
+
+    const data = [{ product: 'Widget', quantity: 5 }];
+    render(
+      <RelatedList
+        title="Order Items"
+        type="table"
+        api="order_item"
+        data={data}
+        dataSource={mockDataSource}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('order_item');
+    });
+
+    // Verify columns are generated from schema (excluding _id)
+    await waitFor(() => {
+      expect(screen.getByText('Product')).toBeInTheDocument();
+      expect(screen.getByText('Quantity')).toBeInTheDocument();
+    });
+    // _id should be filtered out
+    expect(screen.queryByText('ID')).not.toBeInTheDocument();
+  });
+
+  it('should not fetch object schema when explicit columns are provided', () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn(),
+      find: vi.fn(),
+    } as any;
+
+    const columns = [{ accessorKey: 'name', header: 'Name' }];
+    render(
+      <RelatedList
+        title="Contacts"
+        type="table"
+        api="contact"
+        data={[{ name: 'Alice' }]}
+        columns={columns}
+        dataSource={mockDataSource}
+      />,
+    );
+
+    expect(mockDataSource.getObjectSchema).not.toHaveBeenCalled();
+  });
+
+  it('should render collapsed state when collapsible and defaultCollapsed are true', () => {
+    const data = [{ id: 1, name: 'Alice' }];
+    render(
+      <RelatedList title="Contacts" type="table" data={data} collapsible defaultCollapsed />,
+    );
+    expect(screen.getByText('Contacts')).toBeInTheDocument();
+    // Content should be hidden when collapsed
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+  });
+
+  it('should expand collapsed card when header is clicked', () => {
+    render(
+      <RelatedList title="Contacts" type="table" data={[]} collapsible defaultCollapsed />,
+    );
+    // Initially collapsed - content should be hidden
+    expect(screen.queryByText('No related records found')).not.toBeInTheDocument();
+    // Click the header to expand
+    fireEvent.click(screen.getByText('Contacts'));
+    // Content should now be visible
+    expect(screen.getByText('No related records found')).toBeInTheDocument();
+  });
+
+  it('should show content by default when collapsible is true but defaultCollapsed is false', () => {
+    render(
+      <RelatedList title="Contacts" type="table" data={[]} collapsible />,
+    );
+    expect(screen.getByText('No related records found')).toBeInTheDocument();
+  });
+
+  it('should show content when collapsible is false (default)', () => {
+    render(
+      <RelatedList title="Contacts" type="table" data={[]} />,
+    );
+    expect(screen.getByText('No related records found')).toBeInTheDocument();
+  });
+});