@object-ui/plugin-detail 3.0.2 → 3.1.0

package/src/__tests__/DetailView.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { DetailView } from '../DetailView';
 import type { DetailViewSchema } from '@object-ui/types';
 
@@ -246,4 +246,418 @@ describe('DetailView', () => {
     const skeletons = container.querySelectorAll('.animate-pulse');
     expect(skeletons.length).toBeGreaterThan(0);
   });
+
+  it('should render prev/next navigation when recordNavigation is provided', () => {
+    const onNavigate = vi.fn();
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: false,
+      recordNavigation: {
+        recordIds: ['id1', 'id2', 'id3'],
+        currentIndex: 1,
+        onNavigate,
+      },
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    // Should show position indicator
+    expect(screen.getByText('2 of 3')).toBeInTheDocument();
+  });
+
+  it('should call onNavigate with previous record id', () => {
+    const onNavigate = vi.fn();
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: false,
+      recordNavigation: {
+        recordIds: ['id1', 'id2', 'id3'],
+        currentIndex: 1,
+        onNavigate,
+      },
+    };
+
+    const { container } = render(<DetailView schema={schema} />);
+    
+    // Find the prev button (first in the navigation group)
+    const navButtons = container.querySelectorAll('button');
+    // The prev button is the one that contains a chevron-left icon and is not disabled
+    const prevButton = Array.from(navButtons).find(btn =>
+      btn.querySelector('.lucide-chevron-left')
+    );
+    expect(prevButton).toBeTruthy();
+    fireEvent.click(prevButton!);
+    expect(onNavigate).toHaveBeenCalledWith('id1');
+  });
+
+  it('should call onNavigate with next record id', () => {
+    const onNavigate = vi.fn();
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: false,
+      recordNavigation: {
+        recordIds: ['id1', 'id2', 'id3'],
+        currentIndex: 1,
+        onNavigate,
+      },
+    };
+
+    const { container } = render(<DetailView schema={schema} />);
+    
+    const nextButton = Array.from(container.querySelectorAll('button')).find(btn =>
+      btn.querySelector('.lucide-chevron-right')
+    );
+    expect(nextButton).toBeTruthy();
+    fireEvent.click(nextButton!);
+    expect(onNavigate).toHaveBeenCalledWith('id3');
+  });
+
+  it('should disable prev button at first record', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: false,
+      recordNavigation: {
+        recordIds: ['id1', 'id2'],
+        currentIndex: 0,
+        onNavigate: vi.fn(),
+      },
+    };
+
+    const { container } = render(<DetailView schema={schema} />);
+    
+    const prevButton = Array.from(container.querySelectorAll('button')).find(btn =>
+      btn.querySelector('.lucide-chevron-left')
+    );
+    expect(prevButton).toBeTruthy();
+    expect(prevButton!).toBeDisabled();
+  });
+
+  it('should disable next button at last record', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: false,
+      recordNavigation: {
+        recordIds: ['id1', 'id2'],
+        currentIndex: 1,
+        onNavigate: vi.fn(),
+      },
+    };
+
+    const { container } = render(<DetailView schema={schema} />);
+    
+    const nextButton = Array.from(container.querySelectorAll('button')).find(btn =>
+      btn.querySelector('.lucide-chevron-right')
+    );
+    expect(nextButton).toBeTruthy();
+    expect(nextButton!).toBeDisabled();
+  });
+
+  it('should render comments section when comments are provided', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      comments: [
+        {
+          id: '1',
+          text: 'Great contact!',
+          author: 'Alice',
+          createdAt: '2026-02-16T08:00:00Z',
+        },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    expect(screen.getByText('Comments')).toBeInTheDocument();
+    expect(screen.getByText('Great contact!')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+
+  it('should render activity timeline when activities are provided', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      activities: [
+        {
+          id: '1',
+          type: 'create',
+          user: 'Bob',
+          timestamp: '2026-02-15T10:00:00Z',
+        },
+        {
+          id: '2',
+          type: 'field_change',
+          field: 'email',
+          oldValue: 'old@test.com',
+          newValue: 'new@test.com',
+          user: 'Alice',
+          timestamp: '2026-02-16T09:00:00Z',
+        },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    expect(screen.getByText('Activity')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+
+  it('should render primaryField value as header title', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact',
+      primaryField: 'name',
+      data: { name: 'John Doe', email: 'john@example.com' },
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'email', label: 'Email' },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    // The h1 heading should show the primary field value
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading.textContent).toBe('John Doe');
+  });
+
+  it('should fall back to title when primaryField value is empty', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact',
+      primaryField: 'name',
+      data: { email: 'john@example.com' },
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'email', label: 'Email' },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading.textContent).toBe('Contact');
+  });
+
+  it('should render summaryFields as badges', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact',
+      primaryField: 'name',
+      summaryFields: ['status', 'department'],
+      data: { name: 'Jane Doe', status: 'Active', department: 'Engineering' },
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'status', label: 'Status' },
+        { name: 'department', label: 'Department' },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading.textContent).toBe('Jane Doe');
+    // Summary badges should be present (they appear both as badges and as field values)
+    const activeElements = screen.getAllByText('Active');
+    expect(activeElements.length).toBeGreaterThanOrEqual(1);
+    const engElements = screen.getAllByText('Engineering');
+    expect(engElements.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('should not render summary badge for empty values', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact',
+      summaryFields: ['status', 'department'],
+      data: { name: 'Jane Doe', status: 'Active', department: null },
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'status', label: 'Status' },
+      ],
+    };
+
+    const { container } = render(<DetailView schema={schema} />);
+    // The header area should have a badge for 'Active' but not 'department'
+    // Find badges within the header
+    const headerBadges = container.querySelectorAll('.border-b .rounded-full');
+    const badgeTexts = Array.from(headerBadges).map(b => b.textContent);
+    expect(badgeTexts).toContain('Active');
+  });
+
+  it('should show "Record not found" when data is null after loading', async () => {
+    const mockDataSource = {
+      findOne: vi.fn().mockResolvedValue(null),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'nonexistent-id',
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} />);
+    expect(await findByText('Record not found')).toBeInTheDocument();
+    expect(await findByText(/does not exist or may have been deleted/)).toBeInTheDocument();
+  });
+
+  it('should show "Go back" button in "Record not found" state when showBack is true', async () => {
+    const mockDataSource = {
+      findOne: vi.fn().mockResolvedValue(null),
+    } as any;
+    const onBack = vi.fn();
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'nonexistent-id',
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: true,
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} onBack={onBack} />);
+    const goBackBtn = await findByText('Go back');
+    fireEvent.click(goBackBtn);
+    expect(onBack).toHaveBeenCalled();
+  });
+
+  it('should call findOne with $expand when objectSchema has lookup fields', async () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn().mockResolvedValue({
+        fields: {
+          name: { type: 'text' },
+          customer: { type: 'lookup', reference_to: 'contact' },
+          account: { type: 'master_detail', reference_to: 'account' },
+        },
+      }),
+      findOne: vi.fn().mockResolvedValue({ name: 'Order 1', customer: { name: 'Alice' }, account: { name: 'Acme' } }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Order Details',
+      objectName: 'order',
+      resourceId: 'order-1',
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'customer', label: 'Customer' },
+        { name: 'account', label: 'Account' },
+      ],
+    };
+
+    render(<DetailView schema={schema} dataSource={mockDataSource} />);
+
+    await waitFor(() => {
+      expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('order');
+      expect(mockDataSource.findOne).toHaveBeenCalledWith(
+        'order',
+        'order-1',
+        expect.objectContaining({ $expand: expect.arrayContaining(['customer', 'account']) }),
+      );
+    });
+  });
+
+  it('should call findOne without $expand when objectSchema has no lookup fields', async () => {
+    const mockDataSource = {
+      getObjectSchema: vi.fn().mockResolvedValue({
+        fields: {
+          name: { type: 'text' },
+          email: { type: 'text' },
+        },
+      }),
+      findOne: vi.fn().mockResolvedValue({ name: 'Alice', email: 'alice@example.com' }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'c1',
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'email', label: 'Email' },
+      ],
+    };
+
+    render(<DetailView schema={schema} dataSource={mockDataSource} />);
+
+    await waitFor(() => {
+      // When no lookup fields exist, findOne should be called without $expand params
+      expect(mockDataSource.findOne).toHaveBeenCalledWith('contact', 'c1');
+    });
+  });
+
+  it('should still work when getObjectSchema is not available on dataSource', async () => {
+    const mockDataSource = {
+      findOne: vi.fn().mockResolvedValue({ name: 'Bob' }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'c1',
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} />);
+    expect(await findByText('Bob')).toBeInTheDocument();
+  });
+
+  it('should use i18n fallback for "Record not found" text', async () => {
+    const mockDataSource = {
+      findOne: vi.fn().mockResolvedValue(null),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'nonexistent-id',
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} />);
+    // These use the default English translations from useDetailTranslation fallback
+    expect(await findByText('Record not found')).toBeInTheDocument();
+    expect(await findByText('Go back')).toBeInTheDocument();
+  });
+
+  it('should use i18n fallback for related section heading', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Account Details',
+      data: { name: 'Acme Corp' },
+      fields: [{ name: 'name', label: 'Name' }],
+      related: [
+        {
+          title: 'Contacts',
+          type: 'table',
+          data: [],
+        },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    // The "Related" heading uses t('detail.related')
+    expect(screen.getByText('Related')).toBeInTheDocument();
+  });
 });

package/src/__tests__/FieldChangeItem.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 { FieldChangeItem } from '../FieldChangeItem';
+import type { FieldChangeEntry } from '@object-ui/types';
+
+describe('FieldChangeItem', () => {
+  it('should render field label with old and new display values', () => {
+    const change: FieldChangeEntry = {
+      field: 'status',
+      fieldLabel: 'Status',
+      oldDisplayValue: 'Open',
+      newDisplayValue: 'Closed',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('Status')).toBeInTheDocument();
+    expect(screen.getByText('Open')).toBeInTheDocument();
+    expect(screen.getByText('Closed')).toBeInTheDocument();
+  });
+
+  it('should derive field label from field name when fieldLabel is not set', () => {
+    const change: FieldChangeEntry = {
+      field: 'first_name',
+      oldValue: 'John',
+      newValue: 'Jane',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('First name')).toBeInTheDocument();
+  });
+
+  it('should use raw values when display values are not set', () => {
+    const change: FieldChangeEntry = {
+      field: 'priority',
+      fieldLabel: 'Priority',
+      oldValue: 'low',
+      newValue: 'high',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('low')).toBeInTheDocument();
+    expect(screen.getByText('high')).toBeInTheDocument();
+  });
+
+  it('should show (empty) when value is null/undefined', () => {
+    const change: FieldChangeEntry = {
+      field: 'notes',
+      fieldLabel: 'Notes',
+      newValue: 'Some text',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('(empty)')).toBeInTheDocument();
+    expect(screen.getByText('Some text')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const change: FieldChangeEntry = {
+      field: 'name',
+      fieldLabel: 'Name',
+      oldValue: 'A',
+      newValue: 'B',
+    };
+    const { container } = render(<FieldChangeItem change={change} className="custom-class" />);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('should render arrow icon between old and new values', () => {
+    const change: FieldChangeEntry = {
+      field: 'status',
+      fieldLabel: 'Status',
+      oldValue: 'Open',
+      newValue: 'Closed',
+    };
+    const { container } = render(<FieldChangeItem change={change} />);
+    // ArrowRight renders as an SVG with lucide classes
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('should render old value with line-through style', () => {
+    const change: FieldChangeEntry = {
+      field: 'status',
+      fieldLabel: 'Status',
+      oldDisplayValue: 'Open',
+      newDisplayValue: 'Closed',
+    };
+    render(<FieldChangeItem change={change} />);
+    const oldEl = screen.getByText('Open');
+    expect(oldEl).toHaveClass('line-through');
+  });
+
+  it('should use fieldLabel priority over auto-generated label', () => {
+    const change: FieldChangeEntry = {
+      field: 'first_name',
+      fieldLabel: 'Custom Label',
+      oldValue: 'A',
+      newValue: 'B',
+    };
+    render(<FieldChangeItem change={change} />);
+    expect(screen.getByText('Custom Label')).toBeInTheDocument();
+    expect(screen.queryByText('First name')).not.toBeInTheDocument();
+  });
+
+  it('should show (empty) for both null old and new values', () => {
+    const change: FieldChangeEntry = {
+      field: 'notes',
+      fieldLabel: 'Notes',
+    };
+    render(<FieldChangeItem change={change} />);
+    const emptyTexts = screen.getAllByText('(empty)');
+    expect(emptyTexts).toHaveLength(2);
+  });
+});

package/src/__tests__/MentionAutocomplete.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * 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 { MentionAutocomplete, createMentionFromSuggestion } from '../MentionAutocomplete';
+import type { MentionSuggestionItem } from '../MentionAutocomplete';
+
+const mockSuggestions: MentionSuggestionItem[] = [
+  { id: 'u1', name: 'Alice Smith', type: 'user' },
+  { id: 'u2', name: 'Bob Johnson', type: 'user', avatarUrl: 'https://example.com/bob.jpg' },
+  { id: 't1', name: 'Engineering', type: 'team' },
+];
+
+describe('MentionAutocomplete', () => {
+  it('should render suggestions when visible', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(screen.getByText('Alice Smith')).toBeInTheDocument();
+    expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
+    expect(screen.getByText('Engineering')).toBeInTheDocument();
+  });
+
+  it('should not render when not visible', () => {
+    const onSelect = vi.fn();
+    const { container } = render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible={false} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should filter suggestions by query', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="Ali" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(screen.getByText('Alice Smith')).toBeInTheDocument();
+    expect(screen.queryByText('Bob Johnson')).not.toBeInTheDocument();
+  });
+
+  it('should show type label for non-user types', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="Eng" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(screen.getByText('(team)')).toBeInTheDocument();
+  });
+
+  it('should call onSelect when a suggestion is clicked', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    fireEvent.mouseDown(screen.getByText('Alice Smith'));
+    expect(onSelect).toHaveBeenCalledWith(mockSuggestions[0]);
+  });
+
+  it('should render avatar image when avatarUrl is present', () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionAutocomplete query="" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    const img = screen.getByAltText('Bob Johnson');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', 'https://example.com/bob.jpg');
+  });
+
+  it('should not render when no matching suggestions', () => {
+    const onSelect = vi.fn();
+    const { container } = render(
+      <MentionAutocomplete query="xyz" suggestions={mockSuggestions} onSelect={onSelect} visible />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe('createMentionFromSuggestion', () => {
+  it('should create a Mention object from a suggestion item', () => {
+    const item: MentionSuggestionItem = { id: 'u1', name: 'Alice', type: 'user' };
+    const mention = createMentionFromSuggestion(item, 5, 6);
+    expect(mention).toEqual({
+      type: 'user',
+      id: 'u1',
+      name: 'Alice',
+      offset: 5,
+      length: 6,
+    });
+  });
+});