@object-ui/plugin-grid 3.3.0 → 3.3.2

package/src/__tests__/row-bulk-actions.test.tsx

@@ -1,413 +0,0 @@
-/**
- * RowActionMenu & BulkActionBar component tests
- */
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import React from 'react';
-
-import { RowActionMenu, formatActionLabel } from '../components/RowActionMenu';
-import { BulkActionBar } from '../components/BulkActionBar';
-import { ObjectGrid } from '../ObjectGrid';
-import { registerAllFields } from '@object-ui/fields';
-import { ActionProvider } from '@object-ui/react';
-
-registerAllFields();
-
-// ---------------------------------------------------------------------------
-// Test data
-// ---------------------------------------------------------------------------
-const testRow = { id: '1', name: 'Alice', amount: 100 };
-const testData = [
-  { id: '1', name: 'Alice', amount: 100 },
-  { id: '2', name: 'Bob', amount: 200 },
-  { id: '3', name: 'Charlie', amount: 300 },
-];
-
-// ---------------------------------------------------------------------------
-// Helper
-// ---------------------------------------------------------------------------
-function renderGrid(opts?: Record<string, any>) {
-  const schema: any = {
-    type: 'object-grid' as const,
-    objectName: 'test_object',
-    columns: [
-      { field: 'name', label: 'Name' },
-      { field: 'amount', label: 'Amount', type: 'number' },
-    ],
-    data: { provider: 'value', items: testData },
-    ...opts,
-  };
-
-  return render(
-    <ActionProvider>
-      <ObjectGrid schema={schema} />
-    </ActionProvider>
-  );
-}
-
-// =========================================================================
-// formatActionLabel
-// =========================================================================
-describe('formatActionLabel', () => {
-  it('formats single word actions', () => {
-    expect(formatActionLabel('delete')).toBe('Delete');
-  });
-
-  it('formats underscore-separated actions', () => {
-    expect(formatActionLabel('send_email')).toBe('Send Email');
-  });
-
-  it('formats multi-word actions', () => {
-    expect(formatActionLabel('bulk_archive_items')).toBe('Bulk Archive Items');
-  });
-});
-
-// =========================================================================
-// RowActionMenu component
-// =========================================================================
-describe('RowActionMenu', () => {
-  it('renders trigger button with "..." icon', () => {
-    render(<RowActionMenu row={testRow} rowActions={['archive']} />);
-    const trigger = screen.getByTestId('row-action-trigger');
-    expect(trigger).toBeInTheDocument();
-    expect(screen.getByText('Open menu')).toBeInTheDocument();
-  });
-
-  it('shows custom row actions in dropdown on click', async () => {
-    const user = userEvent.setup();
-    render(<RowActionMenu row={testRow} rowActions={['archive', 'send_email']} />);
-    
-    await user.click(screen.getByTestId('row-action-trigger'));
-    
-    await waitFor(() => {
-      expect(screen.getByTestId('row-action-archive')).toBeInTheDocument();
-      expect(screen.getByTestId('row-action-send_email')).toBeInTheDocument();
-    });
-
-    expect(screen.getByText('Archive')).toBeInTheDocument();
-    expect(screen.getByText('Send Email')).toBeInTheDocument();
-  });
-
-  it('shows edit and delete items when canEdit/canDelete are true', async () => {
-    const user = userEvent.setup();
-    const onEdit = vi.fn();
-    const onDelete = vi.fn();
-
-    render(
-      <RowActionMenu
-        row={testRow}
-        canEdit
-        canDelete
-        onEdit={onEdit}
-        onDelete={onDelete}
-      />
-    );
-
-    await user.click(screen.getByTestId('row-action-trigger'));
-    
-    await waitFor(() => {
-      expect(screen.getByText('Edit')).toBeInTheDocument();
-      expect(screen.getByText('Delete')).toBeInTheDocument();
-    });
-  });
-
-  it('calls onEdit with the row when edit is clicked', async () => {
-    const user = userEvent.setup();
-    const onEdit = vi.fn();
-    render(<RowActionMenu row={testRow} canEdit onEdit={onEdit} />);
-
-    await user.click(screen.getByTestId('row-action-trigger'));
-    await waitFor(() => {
-      expect(screen.getByText('Edit')).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByText('Edit'));
-    expect(onEdit).toHaveBeenCalledWith(testRow);
-  });
-
-  it('calls onDelete with the row when delete is clicked', async () => {
-    const user = userEvent.setup();
-    const onDelete = vi.fn();
-    render(<RowActionMenu row={testRow} canDelete onDelete={onDelete} />);
-
-    await user.click(screen.getByTestId('row-action-trigger'));
-    await waitFor(() => {
-      expect(screen.getByText('Delete')).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByText('Delete'));
-    expect(onDelete).toHaveBeenCalledWith(testRow);
-  });
-
-  it('calls onAction with action name and row', async () => {
-    const user = userEvent.setup();
-    const onAction = vi.fn();
-    render(<RowActionMenu row={testRow} rowActions={['archive']} onAction={onAction} />);
-
-    await user.click(screen.getByTestId('row-action-trigger'));
-    await waitFor(() => {
-      expect(screen.getByTestId('row-action-archive')).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByTestId('row-action-archive'));
-    expect(onAction).toHaveBeenCalledWith('archive', testRow);
-  });
-
-  it('does not show edit/delete when canEdit/canDelete are false', async () => {
-    const user = userEvent.setup();
-    render(<RowActionMenu row={testRow} rowActions={['archive']} />);
-
-    await user.click(screen.getByTestId('row-action-trigger'));
-    await waitFor(() => {
-      expect(screen.getByTestId('row-action-archive')).toBeInTheDocument();
-    });
-
-    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
-  });
-});
-
-// =========================================================================
-// BulkActionBar component
-// =========================================================================
-describe('BulkActionBar', () => {
-  it('renders nothing when no rows are selected', () => {
-    const { container } = render(
-      <BulkActionBar selectedRows={[]} actions={['delete', 'archive']} />
-    );
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('renders nothing when actions array is empty', () => {
-    const { container } = render(
-      <BulkActionBar selectedRows={testData} actions={[]} />
-    );
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('renders selected count and action buttons', () => {
-    render(
-      <BulkActionBar selectedRows={testData} actions={['delete', 'archive']} />
-    );
-
-    expect(screen.getByTestId('bulk-actions-bar')).toBeInTheDocument();
-    expect(screen.getByText('3 selected')).toBeInTheDocument();
-    expect(screen.getByTestId('bulk-action-delete')).toBeInTheDocument();
-    expect(screen.getByTestId('bulk-action-archive')).toBeInTheDocument();
-    expect(screen.getByText('Delete')).toBeInTheDocument();
-    expect(screen.getByText('Archive')).toBeInTheDocument();
-  });
-
-  it('shows Clear button', () => {
-    render(
-      <BulkActionBar selectedRows={testData} actions={['delete']} />
-    );
-    expect(screen.getByText('Clear')).toBeInTheDocument();
-  });
-
-  it('calls onAction with action and selected rows', () => {
-    const onAction = vi.fn();
-    render(
-      <BulkActionBar
-        selectedRows={testData}
-        actions={['delete', 'archive']}
-        onAction={onAction}
-      />
-    );
-
-    fireEvent.click(screen.getByTestId('bulk-action-delete'));
-    expect(onAction).toHaveBeenCalledWith('delete', testData);
-
-    fireEvent.click(screen.getByTestId('bulk-action-archive'));
-    expect(onAction).toHaveBeenCalledWith('archive', testData);
-  });
-
-  it('calls onClearSelection when Clear is clicked', () => {
-    const onClear = vi.fn();
-    render(
-      <BulkActionBar
-        selectedRows={testData}
-        actions={['delete']}
-        onClearSelection={onClear}
-      />
-    );
-
-    fireEvent.click(screen.getByText('Clear'));
-    expect(onClear).toHaveBeenCalled();
-  });
-
-  it('formats action labels correctly', () => {
-    render(
-      <BulkActionBar selectedRows={[testRow]} actions={['send_email', 'bulk_archive']} />
-    );
-
-    expect(screen.getByText('Send Email')).toBeInTheDocument();
-    expect(screen.getByText('Bulk Archive')).toBeInTheDocument();
-  });
-});
-
-// =========================================================================
-// RowActionMenu integration in ObjectGrid
-// =========================================================================
-describe('RowActionMenu in ObjectGrid', () => {
-  it('renders row action triggers when rowActions configured', async () => {
-    renderGrid({
-      rowActions: ['archive', 'send_email'],
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    // Each row should have a row action trigger
-    const triggers = screen.getAllByTestId('row-action-trigger');
-    expect(triggers.length).toBe(3); // 3 data rows
-  });
-
-  it('shows rowActions items in dropdown on click', async () => {
-    const user = userEvent.setup();
-    renderGrid({
-      rowActions: ['archive', 'send_email'],
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    const triggers = screen.getAllByTestId('row-action-trigger');
-    await user.click(triggers[0]);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('row-action-archive')).toBeInTheDocument();
-      expect(screen.getByTestId('row-action-send_email')).toBeInTheDocument();
-    });
-  });
-
-  it('renders Actions column header when rowActions configured', async () => {
-    renderGrid({
-      rowActions: ['archive'],
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('Actions')).toBeInTheDocument();
-    });
-  });
-
-  it('does not render Actions column when no rowActions and no operations', async () => {
-    renderGrid();
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    expect(screen.queryByText('Actions')).not.toBeInTheDocument();
-  });
-});
-
-// =========================================================================
-// BulkActionBar integration in ObjectGrid
-// =========================================================================
-describe('BulkActionBar in ObjectGrid', () => {
-  it('does not render bulk actions bar when no batchActions configured', async () => {
-    renderGrid();
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    expect(screen.queryByTestId('bulk-actions-bar')).not.toBeInTheDocument();
-  });
-
-  it('does not render bulk actions bar when batchActions configured but no rows selected', async () => {
-    renderGrid({
-      batchActions: ['delete', 'archive'],
-      selection: { type: 'multiple' },
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    expect(screen.queryByTestId('bulk-actions-bar')).not.toBeInTheDocument();
-  });
-
-  it('also accepts bulkActions as an alias for batchActions', async () => {
-    renderGrid({
-      bulkActions: ['export'],
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    // Without selection, bar will not appear, but schema acceptance is verified
-    expect(screen.queryByTestId('bulk-actions-bar')).not.toBeInTheDocument();
-  });
-});
-
-// =========================================================================
-// onRowSelect callback propagation
-// =========================================================================
-describe('ObjectGrid onRowSelect callback', () => {
-  it('accepts onRowSelect prop and renders with selection enabled', async () => {
-    const onRowSelect = vi.fn();
-    const schema: any = {
-      type: 'object-grid' as const,
-      objectName: 'test_object',
-      columns: [
-        { field: 'name', label: 'Name' },
-        { field: 'amount', label: 'Amount', type: 'number' },
-      ],
-      data: { provider: 'value', items: testData },
-      selection: { type: 'multiple' },
-    };
-
-    render(
-      <ActionProvider>
-        <ObjectGrid schema={schema} onRowSelect={onRowSelect} />
-      </ActionProvider>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    // Grid renders checkboxes when selection is enabled
-    const checkboxes = screen.getAllByRole('checkbox');
-    expect(checkboxes.length).toBeGreaterThan(0);
-  });
-
-  it('wires onRowSelect to internal onSelectionChange', async () => {
-    const onRowSelect = vi.fn();
-    const schema: any = {
-      type: 'object-grid' as const,
-      objectName: 'test_object',
-      columns: [
-        { field: 'name', label: 'Name' },
-      ],
-      data: { provider: 'value', items: testData },
-      selection: { type: 'multiple' },
-    };
-
-    render(
-      <ActionProvider>
-        <ObjectGrid schema={schema} onRowSelect={onRowSelect} />
-      </ActionProvider>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    // Click the "select all" header checkbox to trigger selection
-    const checkboxes = screen.getAllByRole('checkbox');
-    fireEvent.click(checkboxes[0]); // First checkbox is typically "select all"
-
-    // onRowSelect should have been invoked via onSelectionChange
-    await waitFor(() => {
-      expect(onRowSelect).toHaveBeenCalled();
-    });
-  });
-});

package/src/__tests__/row-height.test.tsx

@@ -1,160 +0,0 @@
-/**
- * ObjectGrid Row Height Tests
- *
- * Validates all 5 rowHeight enum values ('compact' | 'short' | 'medium' | 'tall' | 'extra_tall')
- * are correctly supported in state initialization, cell class mapping, cycle toggle, and icon selection.
- */
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import { ObjectGrid } from '../ObjectGrid';
-import { registerAllFields } from '@object-ui/fields';
-import { ActionProvider } from '@object-ui/react';
-
-registerAllFields();
-
-const mockData = [
-  { id: '1', name: 'Alice', role: 'Engineer' },
-  { id: '2', name: 'Bob', role: 'Designer' },
-];
-
-function renderGrid(opts?: Record<string, any>) {
-  const schema: any = {
-    type: 'object-grid' as const,
-    objectName: 'test_object',
-    columns: [
-      { field: 'name', label: 'Name' },
-      { field: 'role', label: 'Role' },
-    ],
-    data: { provider: 'value', items: mockData },
-    ...opts,
-  };
-
-  return render(
-    <ActionProvider>
-      <ObjectGrid schema={schema} />
-    </ActionProvider>
-  );
-}
-
-// =========================================================================
-// Row height toggle visibility
-// =========================================================================
-describe('Row height toggle visibility', () => {
-  it('should show row height toggle when rowHeight is set in schema', async () => {
-    renderGrid({ rowHeight: 'medium' });
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    expect(screen.getByTitle(/Row height:/)).toBeInTheDocument();
-  });
-
-  it('should not show row height toggle when rowHeight is not set', async () => {
-    renderGrid();
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    expect(screen.queryByTitle(/Row height:/)).not.toBeInTheDocument();
-  });
-});
-
-// =========================================================================
-// Row height initialization for all 5 enum values
-// =========================================================================
-describe('Row height initialization', () => {
-  const allHeights = ['compact', 'short', 'medium', 'tall', 'extra_tall'] as const;
-
-  allHeights.forEach((height) => {
-    it(`should initialize with rowHeight="${height}"`, async () => {
-      renderGrid({ rowHeight: height });
-
-      await waitFor(() => {
-        expect(screen.getByText('Name')).toBeInTheDocument();
-      });
-
-      const toggle = screen.getByTitle(`Row height: ${height}`);
-      expect(toggle).toBeInTheDocument();
-    });
-  });
-});
-
-// =========================================================================
-// Row height cycle through all 5 values
-// =========================================================================
-describe('Row height cycle', () => {
-  it('should cycle through all 5 heights: compact → short → medium → tall → extra_tall → compact', async () => {
-    renderGrid({ rowHeight: 'compact' });
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    const getToggle = () => screen.getByTitle(/Row height:/);
-
-    // Start: compact
-    expect(getToggle()).toHaveAttribute('title', 'Row height: compact');
-
-    // Click: compact → short
-    fireEvent.click(getToggle());
-    expect(getToggle()).toHaveAttribute('title', 'Row height: short');
-
-    // Click: short → medium
-    fireEvent.click(getToggle());
-    expect(getToggle()).toHaveAttribute('title', 'Row height: medium');
-
-    // Click: medium → tall
-    fireEvent.click(getToggle());
-    expect(getToggle()).toHaveAttribute('title', 'Row height: tall');
-
-    // Click: tall → extra_tall
-    fireEvent.click(getToggle());
-    expect(getToggle()).toHaveAttribute('title', 'Row height: extra_tall');
-
-    // Click: extra_tall → compact (wraps around)
-    fireEvent.click(getToggle());
-    expect(getToggle()).toHaveAttribute('title', 'Row height: compact');
-  });
-});
-
-// =========================================================================
-// Row height label display
-// =========================================================================
-describe('Row height label display', () => {
-  const allHeights = ['compact', 'short', 'medium', 'tall', 'extra_tall'] as const;
-
-  allHeights.forEach((height) => {
-    it(`should display "${height}" label in the toggle button`, async () => {
-      renderGrid({ rowHeight: height });
-
-      await waitFor(() => {
-        expect(screen.getByText('Name')).toBeInTheDocument();
-      });
-
-      // The label text is rendered as-is in the DOM (CSS `capitalize` handles visual casing)
-      const toggle = screen.getByTitle(`Row height: ${height}`);
-      expect(toggle).toHaveTextContent(height);
-    });
-  });
-});
-
-// =========================================================================
-// Default rowHeight fallback
-// =========================================================================
-describe('Row height default', () => {
-  it('should default to "medium" when rowHeight is defined but empty', async () => {
-    // When rowHeight is present (truthy or not), toggle shows.
-    // When schema.rowHeight is undefined, no toggle is shown — default 'medium' is internal.
-    renderGrid({ rowHeight: 'medium' });
-
-    await waitFor(() => {
-      expect(screen.getByText('Name')).toBeInTheDocument();
-    });
-
-    expect(screen.getByTitle('Row height: medium')).toBeInTheDocument();
-  });
-});