@object-ui/plugin-grid 2.0.0 → 3.0.0

package/src/__tests__/InlineEditing.test.tsx

@@ -0,0 +1,360 @@
+/**
+ * InlineEditing Component Tests
+ *
+ * Tests for the grid inline editing component covering save/cancel,
+ * validation feedback, keyboard navigation, and display modes.
+ */
+
+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 { InlineEditing } from '../InlineEditing';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Check: (props: any) => <svg data-testid="icon-check" {...props} />,
+  X: (props: any) => <svg data-testid="icon-x" {...props} />,
+}));
+
+// Mock cn utility to pass through classes
+vi.mock('@object-ui/components', () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(' '),
+}));
+
+describe('InlineEditing', () => {
+  describe('Display mode', () => {
+    it('renders the value in display mode by default', () => {
+      render(<InlineEditing value="Hello" onSave={vi.fn()} />);
+
+      expect(screen.getByText('Hello')).toBeInTheDocument();
+      // Should not show an input
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+
+    it('shows placeholder when value is empty', () => {
+      render(<InlineEditing value="" onSave={vi.fn()} placeholder="Enter text" />);
+
+      expect(screen.getByText('Enter text')).toBeInTheDocument();
+    });
+
+    it('shows default placeholder when value is null', () => {
+      render(<InlineEditing value={null} onSave={vi.fn()} />);
+
+      expect(screen.getByText('Click to edit')).toBeInTheDocument();
+    });
+
+    it('has data-slot="inline-editing" on root', () => {
+      const { container } = render(<InlineEditing value="test" onSave={vi.fn()} />);
+      expect(container.querySelector('[data-slot="inline-editing"]')).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <InlineEditing value="test" onSave={vi.fn()} className="custom-class" />,
+      );
+      const root = container.querySelector('[data-slot="inline-editing"]');
+      expect(root?.className).toContain('custom-class');
+    });
+  });
+
+  describe('Entering edit mode', () => {
+    it('enters edit mode on click', async () => {
+      const user = userEvent.setup();
+      render(<InlineEditing value="Hello" onSave={vi.fn()} />);
+
+      await user.click(screen.getByRole('button'));
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+      expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe('Hello');
+    });
+
+    it('enters edit mode on Enter key press', () => {
+      render(<InlineEditing value="Hello" onSave={vi.fn()} />);
+
+      fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' });
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('enters edit mode on Space key press', () => {
+      render(<InlineEditing value="Hello" onSave={vi.fn()} />);
+
+      fireEvent.keyDown(screen.getByRole('button'), { key: ' ' });
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('starts in edit mode when editing prop is true', () => {
+      render(<InlineEditing value="Hello" onSave={vi.fn()} editing={true} />);
+
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('does not enter edit mode when disabled', async () => {
+      const user = userEvent.setup();
+      render(<InlineEditing value="Hello" onSave={vi.fn()} disabled />);
+
+      await user.click(screen.getByText('Hello'));
+
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Save', () => {
+    it('saves on Enter key press', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn();
+      render(<InlineEditing value="Hello" onSave={onSave} editing={true} />);
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, 'World');
+      await user.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(onSave).toHaveBeenCalledWith('World');
+      });
+    });
+
+    it('saves on save button click', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn();
+      render(<InlineEditing value="Hello" onSave={onSave} editing={true} />);
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, 'Updated');
+
+      await user.click(screen.getByLabelText('Save'));
+
+      await waitFor(() => {
+        expect(onSave).toHaveBeenCalledWith('Updated');
+      });
+    });
+
+    it('coerces value to number when type is number', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn();
+      render(
+        <InlineEditing value={42} onSave={onSave} type="number" editing={true} />,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '99');
+      await user.click(screen.getByLabelText('Save'));
+
+      await waitFor(() => {
+        expect(onSave).toHaveBeenCalledWith(99);
+      });
+    });
+
+    it('exits edit mode after successful save', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn();
+      render(<InlineEditing value="Hello" onSave={onSave} editing={true} />);
+
+      await user.click(screen.getByLabelText('Save'));
+
+      await waitFor(() => {
+        expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Cancel', () => {
+    it('cancels on Escape key press', async () => {
+      const user = userEvent.setup();
+      const onCancel = vi.fn();
+      render(
+        <InlineEditing value="Hello" onSave={vi.fn()} onCancel={onCancel} editing={true} />,
+      );
+
+      const input = screen.getByRole('textbox');
+      await user.type(input, ' extra');
+      await user.keyboard('{Escape}');
+
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('cancels on cancel button click', async () => {
+      const user = userEvent.setup();
+      const onCancel = vi.fn();
+      render(
+        <InlineEditing value="Hello" onSave={vi.fn()} onCancel={onCancel} editing={true} />,
+      );
+
+      await user.click(screen.getByLabelText('Cancel'));
+
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('restores original value after cancel', async () => {
+      const user = userEvent.setup();
+      render(
+        <InlineEditing value="Original" onSave={vi.fn()} editing={true} />,
+      );
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, 'Changed');
+      await user.keyboard('{Escape}');
+
+      // Back to display mode, showing original value
+      expect(screen.getByText('Original')).toBeInTheDocument();
+    });
+  });
+
+  describe('Validation', () => {
+    it('shows validation error and prevents save', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn();
+      const validate = (val: any) =>
+        String(val).trim() === '' ? 'Required field' : undefined;
+
+      render(
+        <InlineEditing
+          value="Hello"
+          onSave={onSave}
+          validate={validate}
+          editing={true}
+        />,
+      );
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.click(screen.getByLabelText('Save'));
+
+      expect(screen.getByRole('alert')).toHaveTextContent('Required field');
+      expect(onSave).not.toHaveBeenCalled();
+      // Should still be in edit mode
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    it('clears validation error on input change', async () => {
+      const user = userEvent.setup();
+      const validate = (val: any) =>
+        String(val).trim() === '' ? 'Required field' : undefined;
+
+      render(
+        <InlineEditing
+          value="Hello"
+          onSave={vi.fn()}
+          validate={validate}
+          editing={true}
+        />,
+      );
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.click(screen.getByLabelText('Save'));
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+
+      // Start typing to clear error
+      await user.type(input, 'A');
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('shows error returned from onSave', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn().mockReturnValue('Server error');
+
+      render(
+        <InlineEditing value="Hello" onSave={onSave} editing={true} />,
+      );
+
+      await user.click(screen.getByLabelText('Save'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('alert')).toHaveTextContent('Server error');
+      });
+    });
+
+    it('marks input as aria-invalid when error is present', async () => {
+      const user = userEvent.setup();
+      const validate = () => 'Error';
+
+      render(
+        <InlineEditing value="" onSave={vi.fn()} validate={validate} editing={true} />,
+      );
+
+      await user.click(screen.getByLabelText('Save'));
+
+      expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+    });
+  });
+
+  describe('Async save', () => {
+    it('handles async onSave', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn().mockResolvedValue(undefined);
+
+      render(<InlineEditing value="Hello" onSave={onSave} editing={true} />);
+
+      await user.click(screen.getByLabelText('Save'));
+
+      await waitFor(() => {
+        expect(onSave).toHaveBeenCalledWith('Hello');
+        expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+      });
+    });
+
+    it('shows error when async onSave throws', async () => {
+      const user = userEvent.setup();
+      const onSave = vi.fn().mockRejectedValue(new Error('Network error'));
+
+      render(<InlineEditing value="Hello" onSave={onSave} editing={true} />);
+
+      await user.click(screen.getByLabelText('Save'));
+
+      await waitFor(() => {
+        expect(screen.getByRole('alert')).toHaveTextContent('Network error');
+      });
+
+      // Should still be in edit mode
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+  });
+
+  describe('Input types', () => {
+    it('renders text input by default', () => {
+      render(<InlineEditing value="text" onSave={vi.fn()} editing={true} />);
+      expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
+    });
+
+    it('renders number input when type is number', () => {
+      render(<InlineEditing value={42} onSave={vi.fn()} type="number" editing={true} />);
+      expect(screen.getByRole('spinbutton')).toHaveAttribute('type', 'number');
+    });
+
+    it('renders email input when type is email', () => {
+      render(<InlineEditing value="a@b.com" onSave={vi.fn()} type="email" editing={true} />);
+      const input = screen.getByDisplayValue('a@b.com');
+      expect(input).toHaveAttribute('type', 'email');
+    });
+  });
+
+  describe('data-slot attributes', () => {
+    it('has correct data-slot attributes in display mode', () => {
+      const { container } = render(<InlineEditing value="test" onSave={vi.fn()} />);
+
+      expect(container.querySelector('[data-slot="inline-editing"]')).toBeInTheDocument();
+      expect(container.querySelector('[data-slot="inline-editing-display"]')).toBeInTheDocument();
+    });
+
+    it('has correct data-slot attributes in edit mode', () => {
+      const { container } = render(
+        <InlineEditing value="test" onSave={vi.fn()} editing={true} />,
+      );
+
+      expect(container.querySelector('[data-slot="inline-editing"]')).toBeInTheDocument();
+      expect(container.querySelector('[data-slot="inline-editing-input"]')).toBeInTheDocument();
+      expect(container.querySelector('[data-slot="inline-editing-save"]')).toBeInTheDocument();
+      expect(container.querySelector('[data-slot="inline-editing-cancel"]')).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/accessibility.test.tsx

@@ -0,0 +1,254 @@
+/**
+ * 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.
+ */
+
+/**
+ * Screen reader experience tests for VirtualGrid.
+ *
+ * Tests ARIA attributes, roles, landmarks, keyboard navigation,
+ * and screen reader announcements for the grid plugin.
+ * Part of P2.3 Accessibility & Inclusive Design roadmap.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import type { VirtualGridColumn, VirtualGridProps } from '../VirtualGrid';
+
+// Mock @tanstack/react-virtual (same pattern as VirtualGrid.test.tsx)
+vi.mock('@tanstack/react-virtual', () => ({
+  useVirtualizer: (opts: any) => {
+    const count: number = opts.count;
+    const size: number = opts.estimateSize();
+    const items = [];
+    for (let i = 0; i < count; i++) {
+      items.push({ index: i, key: String(i), start: i * size, size });
+    }
+    return {
+      getVirtualItems: () => items,
+      getTotalSize: () => count * size,
+    };
+  },
+}));
+
+const sampleColumns: VirtualGridColumn[] = [
+  { header: 'Name', accessorKey: 'name' },
+  { header: 'Email', accessorKey: 'email' },
+  { header: 'Role', accessorKey: 'role' },
+];
+
+const sampleData = [
+  { name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin' },
+  { name: 'Bob Smith', email: 'bob@example.com', role: 'Editor' },
+  { name: 'Charlie Brown', email: 'charlie@example.com', role: 'Viewer' },
+];
+
+type VirtualGridComponent = React.FC<VirtualGridProps>;
+let VirtualGrid: VirtualGridComponent;
+
+beforeEach(async () => {
+  cleanup();
+  vi.resetModules();
+  const mod = await import('../VirtualGrid');
+  VirtualGrid = mod.VirtualGrid;
+});
+
+function renderGrid(overrides: Partial<VirtualGridProps> = {}) {
+  const props: VirtualGridProps = {
+    data: sampleData,
+    columns: sampleColumns,
+    ...overrides,
+  };
+  return render(<VirtualGrid {...props} />);
+}
+
+describe('VirtualGrid: Screen Reader & Accessibility', () => {
+  describe('ARIA attributes and roles', () => {
+    it('renders column headers as identifiable elements', () => {
+      renderGrid();
+
+      const nameHeader = screen.getByText('Name');
+      const emailHeader = screen.getByText('Email');
+      const roleHeader = screen.getByText('Role');
+
+      expect(nameHeader).toBeInTheDocument();
+      expect(emailHeader).toBeInTheDocument();
+      expect(roleHeader).toBeInTheDocument();
+
+      // Headers should have font-semibold styling to indicate importance
+      expect(nameHeader).toHaveClass('font-semibold');
+      expect(emailHeader).toHaveClass('font-semibold');
+    });
+
+    it('renders data cells with proper content for screen readers', () => {
+      renderGrid();
+
+      expect(screen.getByText('Alice Johnson')).toBeInTheDocument();
+      expect(screen.getByText('bob@example.com')).toBeInTheDocument();
+      expect(screen.getByText('Viewer')).toBeInTheDocument();
+    });
+
+    it('footer announces row count for screen readers', () => {
+      renderGrid();
+
+      const footer = screen.getByText(/Showing 3 of 3 rows/);
+      expect(footer).toBeInTheDocument();
+    });
+
+    it('empty grid announces zero rows', () => {
+      renderGrid({ data: [] });
+
+      const footer = screen.getByText(/Showing 0 of 0 rows/);
+      expect(footer).toBeInTheDocument();
+    });
+  });
+
+  describe('grid structure for assistive technology', () => {
+    it('header row uses CSS grid layout for structural organization', () => {
+      const { container } = renderGrid();
+
+      const headerRow = container.querySelector('.grid.border-b.sticky');
+      expect(headerRow).toBeInTheDocument();
+      expect(headerRow).toHaveStyle({ gridTemplateColumns: '1fr 1fr 1fr' });
+    });
+
+    it('data rows use CSS grid with matching column structure', () => {
+      const { container } = renderGrid();
+
+      const dataRows = container.querySelectorAll('[style*="position: absolute"]');
+      expect(dataRows.length).toBe(3);
+
+      dataRows.forEach((row) => {
+        expect((row as HTMLElement).style.gridTemplateColumns).toBe('1fr 1fr 1fr');
+      });
+    });
+
+    it('each cell contains text content accessible to screen readers', () => {
+      renderGrid();
+
+      // Verify all data is available in the DOM for screen readers
+      sampleData.forEach((row) => {
+        expect(screen.getByText(row.name)).toBeInTheDocument();
+        expect(screen.getByText(row.email)).toBeInTheDocument();
+        expect(screen.getByText(row.role)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('column alignment and visual hierarchy', () => {
+    it('left-aligned columns use text-left class', () => {
+      renderGrid({
+        columns: [{ header: 'Name', accessorKey: 'name', align: 'left' }],
+        data: [{ name: 'Alice' }],
+      });
+
+      expect(screen.getByText('Name')).toHaveClass('text-left');
+    });
+
+    it('center-aligned columns indicate alignment for assistive technology', () => {
+      renderGrid({
+        columns: [{ header: 'Count', accessorKey: 'count', align: 'center' }],
+        data: [{ count: 42 }],
+      });
+
+      const header = screen.getByText('Count');
+      expect(header).toHaveClass('text-center');
+
+      const cell = screen.getByText('42');
+      expect(cell).toHaveClass('text-center');
+    });
+
+    it('right-aligned columns indicate alignment for assistive technology', () => {
+      renderGrid({
+        columns: [{ header: 'Price', accessorKey: 'price', align: 'right' }],
+        data: [{ price: 99.99 }],
+      });
+
+      const header = screen.getByText('Price');
+      expect(header).toHaveClass('text-right');
+    });
+  });
+
+  describe('interactive rows', () => {
+    it('clickable rows have cursor-pointer for visual indication', () => {
+      const onRowClick = vi.fn();
+      const { container } = renderGrid({ onRowClick });
+
+      const rows = container.querySelectorAll('[style*="position: absolute"]');
+      rows.forEach((row) => {
+        expect((row as HTMLElement).className).toContain('cursor-pointer');
+      });
+    });
+
+    it('rows have hover styling for visual feedback', () => {
+      const { container } = renderGrid();
+
+      const rows = container.querySelectorAll('[style*="position: absolute"]');
+      rows.forEach((row) => {
+        // Rows have hover background styling
+        expect((row as HTMLElement).className).toContain('hover:bg-muted');
+      });
+    });
+  });
+
+  describe('custom cell renderers preserve accessibility', () => {
+    it('custom cell renderers can include ARIA labels', () => {
+      renderGrid({
+        columns: [
+          {
+            header: 'Status',
+            accessorKey: 'status',
+            cell: (value: string) => (
+              <span role="status" aria-label={`Status: ${value}`}>
+                {value}
+              </span>
+            ),
+          },
+        ],
+        data: [{ status: 'Active' }],
+      });
+
+      const statusCell = screen.getByRole('status');
+      expect(statusCell).toHaveAttribute('aria-label', 'Status: Active');
+    });
+
+    it('custom cell renderers can include interactive elements', () => {
+      renderGrid({
+        columns: [
+          {
+            header: 'Actions',
+            accessorKey: 'id',
+            cell: (value: string) => (
+              <button aria-label={`Edit record ${value}`}>Edit</button>
+            ),
+          },
+        ],
+        data: [{ id: '123' }],
+      });
+
+      const editBtn = screen.getByRole('button', { name: 'Edit record 123' });
+      expect(editBtn).toBeInTheDocument();
+    });
+  });
+
+  describe('loading and empty states', () => {
+    it('displays zero-row footer for empty data', () => {
+      renderGrid({ data: [] });
+
+      expect(screen.getByText(/Showing 0 of 0 rows/)).toBeInTheDocument();
+    });
+
+    it('headers remain visible in empty state for context', () => {
+      renderGrid({ data: [] });
+
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Email')).toBeInTheDocument();
+      expect(screen.getByText('Role')).toBeInTheDocument();
+    });
+  });
+});