@object-ui/plugin-detail 3.3.0 → 3.3.1

package/src/__tests__/FieldChangeItem.test.tsx

@@ -1,119 +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 '@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__/HeaderHighlight.test.tsx

@@ -1,213 +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 { HeaderHighlight } from '../HeaderHighlight';
-import type { HighlightField } from '@object-ui/types';
-
-describe('HeaderHighlight', () => {
-  const fields: HighlightField[] = [
-    { name: 'revenue', label: 'Annual Revenue' },
-    { name: 'employees', label: 'Employees' },
-    { name: 'industry', label: 'Industry' },
-  ];
-
-  const data = {
-    revenue: '$5M',
-    employees: 150,
-    industry: 'Technology',
-  };
-
-  it('should render highlight fields with labels and values', () => {
-    render(<HeaderHighlight fields={fields} data={data} />);
-    expect(screen.getByText('Annual Revenue')).toBeInTheDocument();
-    expect(screen.getByText('$5M')).toBeInTheDocument();
-    expect(screen.getByText('Employees')).toBeInTheDocument();
-    expect(screen.getByText('150')).toBeInTheDocument();
-    expect(screen.getByText('Industry')).toBeInTheDocument();
-    expect(screen.getByText('Technology')).toBeInTheDocument();
-  });
-
-  it('should not render when no data is provided', () => {
-    const { container } = render(<HeaderHighlight fields={fields} />);
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('should not render when fields array is empty', () => {
-    const { container } = render(<HeaderHighlight fields={[]} data={data} />);
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('should hide fields with null or empty values', () => {
-    const sparseData = { revenue: '$5M', employees: null, industry: '' };
-    render(<HeaderHighlight fields={fields} data={sparseData} />);
-    expect(screen.getByText('$5M')).toBeInTheDocument();
-    expect(screen.queryByText('Employees')).not.toBeInTheDocument();
-    expect(screen.queryByText('Industry')).not.toBeInTheDocument();
-  });
-
-  it('should not render when all field values are empty', () => {
-    const emptyData = { revenue: null, employees: undefined, industry: '' };
-    const { container } = render(<HeaderHighlight fields={fields} data={emptyData} />);
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('should render icon when provided', () => {
-    const fieldsWithIcon: HighlightField[] = [
-      { name: 'revenue', label: 'Revenue', icon: '💰' },
-    ];
-    render(<HeaderHighlight fields={fieldsWithIcon} data={{ revenue: '$5M' }} />);
-    expect(screen.getByText('💰')).toBeInTheDocument();
-  });
-
-  it('should render currency fields with formatted value via CellRenderer', () => {
-    const currencyFields: HighlightField[] = [
-      { name: 'amount', label: 'Amount', type: 'currency' },
-    ];
-    render(<HeaderHighlight fields={currencyFields} data={{ amount: 250000 }} />);
-    // CurrencyCellRenderer should format — should NOT show raw "250000"
-    expect(screen.queryByText('250000')).not.toBeInTheDocument();
-    expect(screen.getByText(/250,000/)).toBeInTheDocument();
-  });
-
-  it('should render select fields as badge via CellRenderer', () => {
-    const selectFields: HighlightField[] = [
-      { name: 'stage', label: 'Stage', type: 'select' },
-    ];
-    render(
-      <HeaderHighlight
-        fields={selectFields}
-        data={{ stage: 'prospecting' }}
-        objectSchema={{
-          fields: {
-            stage: {
-              type: 'select',
-              options: [
-                { value: 'prospecting', label: 'Prospecting', color: 'blue' },
-              ],
-            },
-          },
-        }}
-      />
-    );
-    expect(screen.getByText('Prospecting')).toBeInTheDocument();
-  });
-
-  it('should enrich field type from objectSchema when field.type is not set', () => {
-    const fieldsNoType: HighlightField[] = [
-      { name: 'amount', label: 'Amount' },
-    ];
-    render(
-      <HeaderHighlight
-        fields={fieldsNoType}
-        data={{ amount: 5000 }}
-        objectSchema={{
-          fields: {
-            amount: { type: 'currency', currency: 'USD' },
-          },
-        }}
-      />
-    );
-    // CurrencyCellRenderer should format, not raw String()
-    expect(screen.queryByText('5000')).not.toBeInTheDocument();
-    expect(screen.getByText(/5,000/)).toBeInTheDocument();
-  });
-
-  it('should fall back to text when no type info is available', () => {
-    const fieldsNoType: HighlightField[] = [
-      { name: 'custom', label: 'Custom' },
-    ];
-    render(<HeaderHighlight fields={fieldsNoType} data={{ custom: 'raw-value' }} />);
-    expect(screen.getByText('raw-value')).toBeInTheDocument();
-  });
-
-  it('should safely render object values without crashing (React error #310 guard)', () => {
-    // Simulates MongoDB Decimal128 or expanded reference objects
-    const fieldsWithNumber: HighlightField[] = [
-      { name: 'amount', label: 'Amount' },
-      { name: 'account', label: 'Account' },
-    ];
-    const objectData = {
-      amount: { $numberDecimal: '250000' },
-      account: { id: 'abc', name: 'Acme Corp' },
-    };
-    const objectSchema = {
-      fields: {
-        amount: { type: 'number' },
-        account: { type: 'text' },
-      },
-    };
-    // Should NOT crash — cell renderers coerce values via coerceToSafeValue
-    const { container } = render(
-      <HeaderHighlight
-        fields={fieldsWithNumber}
-        data={objectData}
-        objectSchema={objectSchema}
-      />
-    );
-    expect(container.innerHTML).not.toBe('');
-    // NumberCellRenderer coerces $numberDecimal to number
-    expect(screen.getByText('250,000')).toBeInTheDocument();
-    // TextCellRenderer extracts name from object
-    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
-  });
-
-  it('should safely render lookup object values via LookupCellRenderer', () => {
-    const lookupFields: HighlightField[] = [
-      { name: 'owner', label: 'Owner' },
-    ];
-    const lookupData = {
-      owner: { id: 'u1', name: 'Jane Doe' },
-    };
-    const objectSchema = {
-      fields: {
-        owner: { type: 'lookup' },
-      },
-    };
-    // LookupCellRenderer handles object values natively
-    render(
-      <HeaderHighlight
-        fields={lookupFields}
-        data={lookupData}
-        objectSchema={objectSchema}
-      />
-    );
-    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
-  });
-
-  it('should safely render array values via TextCellRenderer', () => {
-    const arrayFields: HighlightField[] = [
-      { name: 'tags', label: 'Tags' },
-    ];
-    const arrayData = {
-      tags: ['urgent', 'follow-up'],
-    };
-    const { container } = render(
-      <HeaderHighlight fields={arrayFields} data={arrayData} />
-    );
-    expect(container.innerHTML).not.toBe('');
-    // TextCellRenderer coerces arrays to comma-separated string
-    expect(screen.getByText('urgent, follow-up')).toBeInTheDocument();
-  });
-
-  it('should safely render array of objects via TextCellRenderer', () => {
-    const arrayFields: HighlightField[] = [
-      { name: 'contacts', label: 'Contacts' },
-    ];
-    const arrayData = {
-      contacts: [{ name: 'Alice' }, { name: 'Bob' }],
-    };
-    const { container } = render(
-      <HeaderHighlight fields={arrayFields} data={arrayData} />
-    );
-    expect(container.innerHTML).not.toBe('');
-    // TextCellRenderer coerces array of objects to "Alice, Bob"
-    expect(screen.getByText('Alice, Bob')).toBeInTheDocument();
-  });
-});

package/src/__tests__/MentionAutocomplete.test.tsx

@@ -1,97 +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, 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,
-    });
-  });
-});

package/src/__tests__/ReactionPicker.test.tsx

@@ -1,113 +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, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ReactionPicker } from '../ReactionPicker';
-import type { Reaction } from '@object-ui/types';
-
-const mockReactions: Reaction[] = [
-  { emoji: '👍', count: 3, reacted: true },
-  { emoji: '❤️', count: 1, reacted: false },
-];
-
-describe('ReactionPicker', () => {
-  it('should render existing reactions with counts', () => {
-    render(<ReactionPicker reactions={mockReactions} />);
-    expect(screen.getByText('👍')).toBeInTheDocument();
-    expect(screen.getByText('3')).toBeInTheDocument();
-    expect(screen.getByText('❤️')).toBeInTheDocument();
-    expect(screen.getByText('1')).toBeInTheDocument();
-  });
-
-  it('should highlight reacted emoji', () => {
-    render(<ReactionPicker reactions={mockReactions} />);
-    const thumbs = screen.getByLabelText(/👍 3/);
-    expect(thumbs).toHaveClass('bg-primary/10');
-  });
-
-  it('should show add reaction button when onToggleReaction provided', () => {
-    const onToggle = vi.fn();
-    render(<ReactionPicker reactions={[]} onToggleReaction={onToggle} />);
-    expect(screen.getByLabelText('Add reaction')).toBeInTheDocument();
-  });
-
-  it('should not show add button when no onToggleReaction', () => {
-    render(<ReactionPicker reactions={[]} />);
-    expect(screen.queryByLabelText('Add reaction')).not.toBeInTheDocument();
-  });
-
-  it('should call onToggleReaction when clicking existing reaction', () => {
-    const onToggle = vi.fn();
-    render(<ReactionPicker reactions={mockReactions} onToggleReaction={onToggle} />);
-    fireEvent.click(screen.getByLabelText(/👍 3/));
-    expect(onToggle).toHaveBeenCalledWith('👍');
-  });
-
-  it('should show emoji picker when add button is clicked', () => {
-    const onToggle = vi.fn();
-    render(<ReactionPicker reactions={[]} onToggleReaction={onToggle} />);
-    fireEvent.click(screen.getByLabelText('Add reaction'));
-    expect(screen.getByRole('listbox', { name: 'Emoji picker' })).toBeInTheDocument();
-  });
-
-  it('should call onToggleReaction when emoji is selected from picker', () => {
-    const onToggle = vi.fn();
-    render(<ReactionPicker reactions={[]} onToggleReaction={onToggle} />);
-    fireEvent.click(screen.getByLabelText('Add reaction'));
-    // Select first emoji option (👍)
-    const options = screen.getAllByRole('option');
-    fireEvent.click(options[0]);
-    expect(onToggle).toHaveBeenCalledWith('👍');
-  });
-
-  it('should disable reaction buttons when no onToggleReaction', () => {
-    render(<ReactionPicker reactions={mockReactions} />);
-    const thumbsBtn = screen.getByLabelText(/👍 3/);
-    expect(thumbsBtn).toBeDisabled();
-    const heartBtn = screen.getByLabelText(/❤️ 1/);
-    expect(heartBtn).toBeDisabled();
-  });
-
-  it('should render custom emojiOptions', () => {
-    const onToggle = vi.fn();
-    const customEmoji = ['🚀', '🔥', '✅'];
-    render(
-      <ReactionPicker reactions={[]} onToggleReaction={onToggle} emojiOptions={customEmoji} />,
-    );
-    fireEvent.click(screen.getByLabelText('Add reaction'));
-    const options = screen.getAllByRole('option');
-    expect(options).toHaveLength(3);
-    expect(options[0]).toHaveTextContent('🚀');
-    expect(options[1]).toHaveTextContent('🔥');
-    expect(options[2]).toHaveTextContent('✅');
-  });
-
-  it('should include emoji and count in aria-label', () => {
-    render(<ReactionPicker reactions={mockReactions} />);
-    expect(screen.getByLabelText('👍 3 reactions')).toBeInTheDocument();
-    expect(screen.getByLabelText('❤️ 1 reaction')).toBeInTheDocument();
-  });
-
-  it('should show non-reacted emoji with bg-muted style', () => {
-    render(<ReactionPicker reactions={mockReactions} />);
-    const heart = screen.getByLabelText(/❤️ 1/);
-    expect(heart).toHaveClass('bg-muted');
-  });
-
-  it('should close picker after selecting emoji', () => {
-    const onToggle = vi.fn();
-    render(<ReactionPicker reactions={[]} onToggleReaction={onToggle} />);
-    fireEvent.click(screen.getByLabelText('Add reaction'));
-    expect(screen.getByRole('listbox', { name: 'Emoji picker' })).toBeInTheDocument();
-    const options = screen.getAllByRole('option');
-    fireEvent.click(options[0]);
-    expect(screen.queryByRole('listbox', { name: 'Emoji picker' })).not.toBeInTheDocument();
-  });
-});