@object-ui/plugin-detail 3.0.2 → 3.1.0

package/src/__tests__/ThreadedReplies.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * 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 { ThreadedReplies } from '../ThreadedReplies';
+import type { FeedItem } from '@object-ui/types';
+
+const parentItem: FeedItem = {
+  id: 'p1',
+  type: 'comment',
+  actor: 'Alice',
+  body: 'Parent comment',
+  createdAt: '2026-02-20T10:00:00Z',
+  replyCount: 2,
+};
+
+const mockReplies: FeedItem[] = [
+  {
+    id: 'r1',
+    type: 'comment',
+    actor: 'Bob',
+    body: 'First reply',
+    createdAt: '2026-02-20T11:00:00Z',
+    parentId: 'p1',
+  },
+  {
+    id: 'r2',
+    type: 'comment',
+    actor: 'Charlie',
+    body: 'Second reply',
+    createdAt: '2026-02-20T12:00:00Z',
+    parentId: 'p1',
+  },
+];
+
+describe('ThreadedReplies', () => {
+  it('should render reply count toggle', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    expect(screen.getByText('2 replies')).toBeInTheDocument();
+  });
+
+  it('should use singular "reply" for one reply', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[mockReplies[0]]} />,
+    );
+    expect(screen.getByText('1 reply')).toBeInTheDocument();
+  });
+
+  it('should not render replies by default (collapsed)', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    expect(screen.queryByText('First reply')).not.toBeInTheDocument();
+  });
+
+  it('should expand replies when toggle is clicked', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('First reply')).toBeInTheDocument();
+    expect(screen.getByText('Second reply')).toBeInTheDocument();
+  });
+
+  it('should show reply authors', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('should show reply input when onAddReply and showReplyInput', () => {
+    const onAdd = vi.fn();
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    expect(screen.getByPlaceholderText('Reply…')).toBeInTheDocument();
+  });
+
+  it('should call onAddReply with parentId and text', () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…');
+    fireEvent.change(input, { target: { value: 'My reply' } });
+    fireEvent.click(screen.getByLabelText('Send reply'));
+    expect(onAdd).toHaveBeenCalledWith('p1', 'My reply');
+  });
+
+  it('should return null when no replies and no reply input', () => {
+    const { container } = render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} showReplyInput={false} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should have aria-expanded=false when collapsed', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    const toggle = screen.getByText('2 replies').closest('button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should have aria-expanded=true when expanded', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    const toggle = screen.getByText('2 replies').closest('button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('should render avatarUrl when provided on reply', () => {
+    const repliesWithAvatar: FeedItem[] = [
+      {
+        id: 'r1',
+        type: 'comment',
+        actor: 'Bob',
+        actorAvatarUrl: 'https://example.com/bob.png',
+        body: 'With avatar',
+        createdAt: '2026-02-20T11:00:00Z',
+        parentId: 'p1',
+      },
+    ];
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={repliesWithAvatar} />,
+    );
+    fireEvent.click(screen.getByText('1 reply'));
+    const img = screen.getByAltText('Bob');
+    expect(img).toHaveAttribute('src', 'https://example.com/bob.png');
+  });
+
+  it('should render first-letter avatar fallback', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    // Bob should show 'B' as fallback initial
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+
+  it('should submit reply via Ctrl+Enter', () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…');
+    fireEvent.change(input, { target: { value: 'Ctrl reply' } });
+    fireEvent.keyDown(input, { key: 'Enter', ctrlKey: true });
+    expect(onAdd).toHaveBeenCalledWith('p1', 'Ctrl reply');
+  });
+
+  it('should disable Send button when input is empty', () => {
+    const onAdd = vi.fn();
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    expect(screen.getByLabelText('Send reply')).toBeDisabled();
+  });
+
+  it('should disable input and button during reply submission', async () => {
+    let resolveReply: () => void;
+    const onAdd = vi.fn(() => new Promise<void>((r) => { resolveReply = r; }));
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'submitting reply' } });
+    fireEvent.click(screen.getByLabelText('Send reply'));
+    expect(input).toBeDisabled();
+    expect(screen.getByLabelText('Send reply')).toBeDisabled();
+    resolveReply!();
+    await vi.waitFor(() => {
+      expect(input).not.toBeDisabled();
+    });
+  });
+
+  it('should clear input after successful reply submission', async () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'reply text' } });
+    fireEvent.click(screen.getByLabelText('Send reply'));
+    await vi.waitFor(() => {
+      expect(input.value).toBe('');
+    });
+  });
+
+  it('should render reply body and timestamp when expanded', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('First reply')).toBeInTheDocument();
+    expect(screen.getByText('Second reply')).toBeInTheDocument();
+  });
+});

package/src/__tests__/autoLayout.test.ts

@@ -0,0 +1,184 @@
+/**
+ * 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 {
+  inferDetailColumns,
+  isWideFieldType,
+  applyAutoSpan,
+  applyDetailAutoLayout,
+} from '../autoLayout';
+
+describe('Detail Auto-Layout', () => {
+  describe('inferDetailColumns', () => {
+    it('should return 1 column for 0 fields', () => {
+      expect(inferDetailColumns(0)).toBe(1);
+    });
+
+    it('should return 1 column for 1-3 fields', () => {
+      expect(inferDetailColumns(1)).toBe(1);
+      expect(inferDetailColumns(2)).toBe(1);
+      expect(inferDetailColumns(3)).toBe(1);
+    });
+
+    it('should return 2 columns for 4-10 fields', () => {
+      expect(inferDetailColumns(4)).toBe(2);
+      expect(inferDetailColumns(7)).toBe(2);
+      expect(inferDetailColumns(10)).toBe(2);
+    });
+
+    it('should return 3 columns for 11+ fields', () => {
+      expect(inferDetailColumns(11)).toBe(3);
+      expect(inferDetailColumns(15)).toBe(3);
+      expect(inferDetailColumns(50)).toBe(3);
+    });
+  });
+
+  describe('isWideFieldType', () => {
+    it('should identify textarea as wide', () => {
+      expect(isWideFieldType('textarea')).toBe(true);
+      expect(isWideFieldType('field:textarea')).toBe(true);
+    });
+
+    it('should identify markdown as wide', () => {
+      expect(isWideFieldType('markdown')).toBe(true);
+      expect(isWideFieldType('field:markdown')).toBe(true);
+    });
+
+    it('should identify html as wide', () => {
+      expect(isWideFieldType('html')).toBe(true);
+      expect(isWideFieldType('field:html')).toBe(true);
+    });
+
+    it('should identify grid as wide', () => {
+      expect(isWideFieldType('grid')).toBe(true);
+      expect(isWideFieldType('field:grid')).toBe(true);
+    });
+
+    it('should identify rich-text as wide', () => {
+      expect(isWideFieldType('rich-text')).toBe(true);
+      expect(isWideFieldType('field:rich-text')).toBe(true);
+    });
+
+    it('should NOT identify regular types as wide', () => {
+      expect(isWideFieldType('text')).toBe(false);
+      expect(isWideFieldType('number')).toBe(false);
+      expect(isWideFieldType('date')).toBe(false);
+      expect(isWideFieldType('select')).toBe(false);
+    });
+  });
+
+  describe('applyAutoSpan', () => {
+    it('should return fields unchanged when columns <= 1', () => {
+      const fields = [
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const result = applyAutoSpan(fields, 1);
+      expect(result).toEqual(fields);
+    });
+
+    it('should set span on wide fields in multi-column layout', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const result = applyAutoSpan(fields, 2);
+      expect(result[0].span).toBeUndefined();
+      expect(result[1].span).toBe(2);
+    });
+
+    it('should NOT override user-defined span', () => {
+      const fields = [
+        { name: 'desc', label: 'Description', type: 'textarea', span: 1 },
+      ];
+      const result = applyAutoSpan(fields, 2);
+      expect(result[0].span).toBe(1);
+    });
+
+    it('should handle fields without type', () => {
+      const fields = [
+        { name: 'name', label: 'Name' },
+      ];
+      const result = applyAutoSpan(fields, 2);
+      expect(result[0].span).toBeUndefined();
+    });
+  });
+
+  describe('applyDetailAutoLayout', () => {
+    it('should infer 1 column for 3 fields', () => {
+      const fields = [
+        { name: 'a', label: 'A' },
+        { name: 'b', label: 'B' },
+        { name: 'c', label: 'C' },
+      ];
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(1);
+    });
+
+    it('should infer 2 columns for 5 fields', () => {
+      const fields = Array.from({ length: 5 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`,
+      }));
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(2);
+    });
+
+    it('should infer 3 columns for 15 fields', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`,
+      }));
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(3);
+    });
+
+    it('should respect explicit columns and still apply auto-span', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const result = applyDetailAutoLayout(fields, 2);
+      expect(result.columns).toBe(2);
+      // Wide field gets auto-span
+      expect(result.fields[1].span).toBe(2);
+    });
+
+    it('should not mutate original fields', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const original = fields.map(f => ({ ...f }));
+      applyDetailAutoLayout(fields, undefined);
+      expect(fields).toEqual(original);
+    });
+
+    it('should auto-span wide fields in inferred multi-column layout', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'email', label: 'Email', type: 'text' },
+        { name: 'phone', label: 'Phone', type: 'text' },
+        { name: 'addr', label: 'Address', type: 'text' },
+        { name: 'notes', label: 'Notes', type: 'textarea' },
+      ];
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(2);
+      // textarea field should span full row
+      expect(result.fields[4].span).toBe(2);
+    });
+
+    it('should infer columns correctly when schemaColumns is undefined (no regression)', () => {
+      // Ensure that removing explicit columns: 2 from RecordDetailView still gives good defaults
+      const fields = Array.from({ length: 8 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(2);
+      expect(result.fields.length).toBe(8);
+    });
+  });
+});