@object-ui/components 0.5.0 → 3.0.0

package/src/renderers/complex/__tests__/data-table-batch-editing.test.tsx

@@ -0,0 +1,275 @@
+/**
+ * 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, waitFor } from '@testing-library/react';
+import React from 'react';
+import type { DataTableSchema } from '@object-ui/types';
+
+// Import the component
+import '../data-table';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Data Table - Batch Editing', () => {
+  const mockData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 35 },
+  ];
+
+  const mockColumns = [
+    { header: 'ID', accessorKey: 'id', editable: false },
+    { header: 'Name', accessorKey: 'name' },
+    { header: 'Email', accessorKey: 'email' },
+    { header: 'Age', accessorKey: 'age' },
+  ];
+
+  it('should track pending changes across multiple cells', async () => {
+    const onRowSave = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false,
+      rowActions: true,
+      onRowSave,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Edit first cell in row
+    const nameCell = screen.getByText('John Doe').closest('td');
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      
+      await waitFor(() => {
+        const input = nameCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell.querySelector('input');
+      if (input) {
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+      }
+    }
+
+    // Wait for the edit to be saved to pending changes
+    await waitFor(() => {
+      const modifiedIndicator = screen.getByText(/1 row modified/i);
+      expect(modifiedIndicator).toBeInTheDocument();
+    });
+
+    // Edit second cell in same row - find by searching through all cells
+    const emailCell = Array.from(container.querySelectorAll('td')).find(el => 
+      el.textContent?.includes('john@example.com')
+    );
+    
+    expect(emailCell).toBeInTheDocument();
+    if (emailCell) {
+      fireEvent.doubleClick(emailCell);
+
+      await waitFor(() => {
+        const input = emailCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = emailCell.querySelector('input');
+      if (input) {
+        fireEvent.change(input, { target: { value: 'johnsmith@example.com' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+      }
+    }
+
+    // Row should still show as modified (still just 1 row)
+    await waitFor(() => {
+      const modifiedIndicator = screen.getByText(/1 row modified/i);
+      expect(modifiedIndicator).toBeInTheDocument();
+    });
+  });
+
+  it('should save a single row with multiple changes', async () => {
+    const onRowSave = vi.fn().mockResolvedValue(undefined);
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false,
+      rowActions: true,
+      onRowSave,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    render(<DataTableRenderer schema={schema} />);
+    
+    // Edit name
+    const nameCell = screen.getByText('John Doe').closest('td');
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      await waitFor(() => {
+        const input = nameCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell.querySelector('input');
+      if (input) {
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+      }
+    }
+
+    // Find and click save button for row
+    await waitFor(() => {
+      const saveButtons = screen.getAllByTitle('Save row');
+      expect(saveButtons.length).toBeGreaterThan(0);
+      fireEvent.click(saveButtons[0]);
+    });
+
+    // Verify callback was called with correct data
+    await waitFor(() => {
+      expect(onRowSave).toHaveBeenCalledWith(
+        0,
+        { name: 'John Smith' },
+        mockData[0]
+      );
+    });
+  });
+
+  it('should save all modified rows with batch save', async () => {
+    const onBatchSave = vi.fn().mockResolvedValue(undefined);
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false,
+      onBatchSave,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    render(<DataTableRenderer schema={schema} />);
+    
+    // Edit row 1
+    const nameCell1 = screen.getByText('John Doe').closest('td');
+    if (nameCell1) {
+      fireEvent.doubleClick(nameCell1);
+      await waitFor(() => {
+        const input = nameCell1.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell1.querySelector('input');
+      if (input) {
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+      }
+    }
+
+    // Edit row 2
+    await waitFor(() => {
+      const nameCell2 = screen.getByText('Jane Smith').closest('td');
+      expect(nameCell2).toBeInTheDocument();
+    });
+
+    const nameCell2 = screen.getByText('Jane Smith').closest('td');
+    if (nameCell2) {
+      fireEvent.doubleClick(nameCell2);
+      await waitFor(() => {
+        const input = nameCell2.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell2.querySelector('input');
+      if (input) {
+        fireEvent.change(input, { target: { value: 'Jane Doe' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+      }
+    }
+
+    // Click save all button
+    await waitFor(() => {
+      const saveAllButton = screen.getByText(/Save All \(2\)/i);
+      expect(saveAllButton).toBeInTheDocument();
+      fireEvent.click(saveAllButton);
+    });
+
+    // Verify callback was called
+    await waitFor(() => {
+      expect(onBatchSave).toHaveBeenCalledWith([
+        { rowIndex: 0, changes: { name: 'John Smith' }, row: mockData[0] },
+        { rowIndex: 1, changes: { name: 'Jane Doe' }, row: mockData[1] },
+      ]);
+    });
+  });
+
+  it('should cancel all changes', async () => {
+    const onBatchSave = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false,
+      onBatchSave,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    render(<DataTableRenderer schema={schema} />);
+    
+    // Edit a cell
+    const nameCell = screen.getByText('John Doe').closest('td');
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      await waitFor(() => {
+        const input = nameCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell.querySelector('input');
+      if (input) {
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+      }
+    }
+
+    // Click cancel all button
+    await waitFor(() => {
+      const cancelButton = screen.getByText(/Cancel All/i);
+      expect(cancelButton).toBeInTheDocument();
+      fireEvent.click(cancelButton);
+    });
+
+    // Verify changes indicator is gone
+    await waitFor(() => {
+      const modifiedIndicator = screen.queryByText(/row modified/i);
+      expect(modifiedIndicator).not.toBeInTheDocument();
+    });
+
+    // Original value should be restored
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+  });
+});

package/src/renderers/complex/__tests__/data-table-cell-renderer.test.tsx

@@ -0,0 +1,120 @@
+/**
+ * Data Table - Custom Cell Renderer Tests
+ *
+ * Tests that data-table respects col.cell() function for custom cell rendering.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { SchemaRenderer } from '@object-ui/react';
+
+// Import data-table to ensure it's registered
+import '../data-table';
+
+describe('Data Table: col.cell() custom renderer', () => {
+  it('should invoke col.cell function to render cell content', async () => {
+    const cellFn = vi.fn((value: any, _row: any) => (
+      <span data-testid="custom-cell">{`Custom: ${value}`}</span>
+    ));
+
+    const schema = {
+      type: 'data-table',
+      columns: [
+        { header: 'Name', accessorKey: 'name', cell: cellFn },
+        { header: 'Email', accessorKey: 'email' },
+      ],
+      data: [
+        { name: 'Alice', email: 'alice@test.com' },
+        { name: 'Bob', email: 'bob@test.com' },
+      ],
+      pagination: false,
+      searchable: false,
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Custom: Alice')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Custom: Bob')).toBeInTheDocument();
+    expect(cellFn).toHaveBeenCalledTimes(2);
+
+    // Non-custom cell should render value directly
+    expect(screen.getByText('alice@test.com')).toBeInTheDocument();
+  });
+
+  it('should pass both value and row to cell function', async () => {
+    const cellFn = vi.fn((value: any, row: any) => (
+      <span data-testid="combo-cell">{`${value} (${row.email})`}</span>
+    ));
+
+    const schema = {
+      type: 'data-table',
+      columns: [
+        { header: 'Name', accessorKey: 'name', cell: cellFn },
+      ],
+      data: [
+        { name: 'Alice', email: 'alice@test.com' },
+      ],
+      pagination: false,
+      searchable: false,
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Alice (alice@test.com)')).toBeInTheDocument();
+    });
+
+    expect(cellFn).toHaveBeenCalledWith('Alice', expect.objectContaining({ name: 'Alice', email: 'alice@test.com' }));
+  });
+
+  it('should render raw value when no cell function is provided', async () => {
+    const schema = {
+      type: 'data-table',
+      columns: [
+        { header: 'Name', accessorKey: 'name' },
+      ],
+      data: [
+        { name: 'Alice' },
+      ],
+      pagination: false,
+      searchable: false,
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+    });
+  });
+
+  it('should prefer editing state over cell function when in edit mode', async () => {
+    // The editing state should take precedence over custom cell renderer
+    // This test verifies the rendering priority: editing > cell > raw value
+    const cellFn = vi.fn((value: any) => (
+      <span>{`Custom: ${value}`}</span>
+    ));
+
+    const schema = {
+      type: 'data-table',
+      columns: [
+        { header: 'Name', accessorKey: 'name', cell: cellFn },
+      ],
+      data: [
+        { name: 'Alice' },
+      ],
+      pagination: false,
+      searchable: false,
+      editable: false,
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Custom: Alice')).toBeInTheDocument();
+    });
+  });
+});

package/src/renderers/complex/__tests__/data-table-editing.test.tsx

@@ -0,0 +1,221 @@
+/**
+ * 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, waitFor } from '@testing-library/react';
+import React from 'react';
+import type { DataTableSchema } from '@object-ui/types';
+
+// Import the component
+import '../data-table';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Data Table - Inline Editing', () => {
+  const mockData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 35 },
+  ];
+
+  const mockColumns = [
+    { header: 'ID', accessorKey: 'id', editable: false },
+    { header: 'Name', accessorKey: 'name' },
+    { header: 'Email', accessorKey: 'email' },
+    { header: 'Age', accessorKey: 'age' },
+  ];
+
+  it('should render table with editable cells when editable is true', () => {
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Check that cells are rendered
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('jane@example.com')).toBeInTheDocument();
+    
+    // Editable cells should have tabindex
+    const cells = container.querySelectorAll('td[tabindex="0"]');
+    expect(cells.length).toBeGreaterThan(0);
+  });
+
+  it('should call onCellChange when cell value is edited', async () => {
+    const onCellChange = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion with edit input
+      onCellChange,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Find the first editable cell (name column)
+    const nameCell = screen.getByText('John Doe').closest('td');
+    expect(nameCell).toBeInTheDocument();
+    
+    // Double-click to enter edit mode
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      
+      // Wait for input to appear inside the cell
+      await waitFor(() => {
+        const input = nameCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell.querySelector('input');
+      if (input) {
+        // Change the value
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        
+        // Press Enter to save
+        fireEvent.keyDown(input, { key: 'Enter' });
+        
+        // Verify onCellChange was called
+        await waitFor(() => {
+          expect(onCellChange).toHaveBeenCalledWith(
+            0, // row index
+            'name', // column key
+            'John Smith', // new value
+            mockData[0] // row data
+          );
+        });
+      }
+    }
+  });
+
+  it('should not allow editing when editable is false', () => {
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: false,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Find a cell
+    const nameCell = screen.getByText('John Doe').closest('td');
+    expect(nameCell).toBeInTheDocument();
+    
+    // Double-click should not trigger edit mode
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      
+      // Input should not appear in the cell
+      const input = nameCell?.querySelector('input');
+      expect(input).not.toBeInTheDocument();
+    }
+  });
+
+  it('should respect column-level editable flag', () => {
+    const onCellChange = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion
+      onCellChange,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Try to edit ID column (which has editable: false)
+    const idCell = screen.getByText('1').closest('td');
+    expect(idCell).toBeInTheDocument();
+    
+    if (idCell) {
+      fireEvent.doubleClick(idCell);
+      
+      // Input should not appear for non-editable column
+      const input = idCell.querySelector('input');
+      expect(input).not.toBeInTheDocument();
+    }
+  });
+
+  it('should cancel edit on Escape key', async () => {
+    const onCellChange = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion
+      onCellChange,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Find the first editable cell
+    const nameCell = screen.getByText('John Doe').closest('td');
+    expect(nameCell).toBeInTheDocument();
+    
+    // Double-click to enter edit mode
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      
+      // Wait for input to appear
+      await waitFor(() => {
+        const input = nameCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell.querySelector('input');
+      if (input) {
+        // Change the value
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        
+        // Press Escape to cancel
+        fireEvent.keyDown(input, { key: 'Escape' });
+        
+        // Verify onCellChange was NOT called
+        await waitFor(() => {
+          expect(onCellChange).not.toHaveBeenCalled();
+        });
+        
+        // Input should be removed
+        expect(nameCell.querySelector('input')).not.toBeInTheDocument();
+        
+        // Original value should be preserved
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+      }
+    }
+  });
+});