@object-ui/plugin-detail 3.1.0 → 3.1.2

package/src/__tests__/HeaderHighlight.test.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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();
+  });
+});

package/src/__tests__/RelatedList.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 { RelatedList } from '../RelatedList';
 
 describe('RelatedList', () => {
@@ -16,23 +16,23 @@ describe('RelatedList', () => {
     expect(screen.getByText('Contacts')).toBeInTheDocument();
   });
 
-  it('should show record count for empty list', () => {
+  it('should show record count badge for empty list', () => {
     render(<RelatedList title="Contacts" type="table" data={[]} />);
-    expect(screen.getByText('0 records')).toBeInTheDocument();
+    expect(screen.getByText('0')).toBeInTheDocument();
   });
 
-  it('should show singular record count for one item', () => {
+  it('should show record count badge for one item', () => {
     render(<RelatedList title="Contacts" type="table" data={[{ id: 1, name: 'Alice' }]} />);
-    expect(screen.getByText('1 record')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
   });
 
-  it('should show plural record count for multiple items', () => {
+  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 records')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
   });
 
   it('should show "No related records found" for empty data', () => {
@@ -63,4 +63,98 @@ describe('RelatedList', () => {
     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();
+  });
 });

package/src/__tests__/SectionGroup.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * 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 { SectionGroup } from '../SectionGroup';
+import type { SectionGroup as SectionGroupType } from '@object-ui/types';
+
+describe('SectionGroup', () => {
+  const baseGroup: SectionGroupType = {
+    title: 'Address Information',
+    sections: [
+      {
+        title: 'Billing',
+        fields: [
+          { name: 'billingStreet', label: 'Street' },
+          { name: 'billingCity', label: 'City' },
+        ],
+      },
+      {
+        title: 'Shipping',
+        fields: [
+          { name: 'shippingStreet', label: 'Street' },
+          { name: 'shippingCity', label: 'City' },
+        ],
+      },
+    ],
+  };
+
+  const data = {
+    billingStreet: '123 Main St',
+    billingCity: 'Springfield',
+    shippingStreet: '456 Oak Ave',
+    shippingCity: 'Shelbyville',
+  };
+
+  it('should render group title', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    expect(screen.getByText('Address Information')).toBeInTheDocument();
+  });
+
+  it('should render child section titles', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    expect(screen.getByText('Billing')).toBeInTheDocument();
+    expect(screen.getByText('Shipping')).toBeInTheDocument();
+  });
+
+  it('should render field values in child sections', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    expect(screen.getByText('123 Main St')).toBeInTheDocument();
+    expect(screen.getByText('Springfield')).toBeInTheDocument();
+  });
+
+  it('should be collapsible by default', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    // The group should render a collapsible trigger
+    const trigger = screen.getByText('Address Information');
+    expect(trigger.closest('[data-state]') || trigger.closest('div')).toBeTruthy();
+  });
+
+  it('should start collapsed when defaultCollapsed is true', () => {
+    const collapsedGroup = { ...baseGroup, defaultCollapsed: true };
+    render(<SectionGroup group={collapsedGroup} data={data} />);
+    // Title should still be visible
+    expect(screen.getByText('Address Information')).toBeInTheDocument();
+    // Child section content should be hidden (in collapsed state)
+    expect(screen.queryByText('123 Main St')).not.toBeInTheDocument();
+  });
+
+  it('should expand when clicked while collapsed', () => {
+    const collapsedGroup = { ...baseGroup, defaultCollapsed: true };
+    render(<SectionGroup group={collapsedGroup} data={data} />);
+    
+    // Click the trigger to expand
+    fireEvent.click(screen.getByText('Address Information'));
+    
+    // Content should now be visible
+    expect(screen.getByText('123 Main St')).toBeInTheDocument();
+  });
+
+  it('should render description when provided', () => {
+    const groupWithDesc = { ...baseGroup, description: 'Billing and shipping addresses', collapsible: false };
+    render(<SectionGroup group={groupWithDesc} data={data} />);
+    expect(screen.getByText('Billing and shipping addresses')).toBeInTheDocument();
+  });
+
+  it('should not be collapsible when collapsible is false', () => {
+    const nonCollapsible = { ...baseGroup, collapsible: false };
+    const { container } = render(<SectionGroup group={nonCollapsible} data={data} />);
+    // The top-level group heading should not have a cursor-pointer collapsible trigger
+    const heading = screen.getByText('Address Information');
+    const parentDiv = heading.closest('div');
+    // Non-collapsible group renders a static border-b div, not a CollapsibleTrigger
+    expect(parentDiv?.className).not.toContain('cursor-pointer');
+  });
+});