@object-ui/plugin-detail 3.0.2 → 3.1.0

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,66 @@
+/**
+ * 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 { 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 for empty list', () => {
+    render(<RelatedList title="Contacts" type="table" data={[]} />);
+    expect(screen.getByText('0 records')).toBeInTheDocument();
+  });
+
+  it('should show singular record count for one item', () => {
+    render(<RelatedList title="Contacts" type="table" data={[{ id: 1, name: 'Alice' }]} />);
+    expect(screen.getByText('1 record')).toBeInTheDocument();
+  });
+
+  it('should show plural record count 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 records')).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();
+  });
+});

package/src/__tests__/SubscriptionToggle.test.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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 { SubscriptionToggle } from '../SubscriptionToggle';
+import type { RecordSubscription } from '@object-ui/types';
+
+describe('SubscriptionToggle', () => {
+  it('should render subscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} />);
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveAttribute('aria-label', 'Unsubscribe from notifications');
+  });
+
+  it('should render unsubscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} />);
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveAttribute('aria-label', 'Subscribe to notifications');
+  });
+
+  it('should call onToggle with new state when clicked', () => {
+    const onToggle = vi.fn();
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('should call onToggle with false when unsubscribing', () => {
+    const onToggle = vi.fn();
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('should be disabled when no onToggle provided', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} />);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('should show title for subscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('title', 'Subscribed — click to unsubscribe');
+  });
+
+  it('should show title for unsubscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('title', 'Subscribe to notifications');
+  });
+
+  it('should be disabled during loading after click', async () => {
+    let resolveToggle: () => void;
+    const onToggle = vi.fn(() => new Promise<void>((r) => { resolveToggle = r; }));
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button')).toBeDisabled();
+    resolveToggle!();
+    await vi.waitFor(() => {
+      expect(screen.getByRole('button')).not.toBeDisabled();
+    });
+  });
+
+  it('should update aria-label based on subscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    const { rerender } = render(<SubscriptionToggle subscription={sub} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Unsubscribe from notifications');
+    rerender(<SubscriptionToggle subscription={{ ...sub, subscribed: false }} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Subscribe to notifications');
+  });
+});