@dashforge/tw 1.1.0 → 1.2.0

package/src/components/DataGrid/DataGrid.test.tsx

@@ -1,1153 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { DataGrid } from './DataGrid.js';
-import type { TableColumn } from '../Table/table.types.js';
-
-void React;
-afterEach(() => cleanup());
-
-// jsdom doesn't implement ResizeObserver / IntersectionObserver —
-// virtualizer + Radix Popover (used via shared cells lib) need them.
-beforeAll(() => {
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    };
-  }
-  // jsdom returns 0 for clientHeight by default; the virtualizer
-  // uses initialViewportHeight=400 in the absence of a real measurement.
-});
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-  status: 'active' | 'pending';
-  meta: { city: string };
-}
-
-const baseCols: TableColumn<User>[] = [
-  { field: 'name',  header: 'Name',  sortable: true, searchable: true },
-  { field: 'email', header: 'Email', searchable: true },
-  { field: 'age',   header: 'Age',   sortable: true },
-  { field: 'meta.city' as never, header: 'City' },
-];
-
-function generateUsers(count: number): User[] {
-  return Array.from({ length: count }).map((_, i) => ({
-    id: `u${i}`,
-    name: `User ${i}`,
-    email: `user${i}@example.com`,
-    age: 20 + (i % 50),
-    status: i % 2 === 0 ? ('active' as const) : ('pending' as const),
-    meta: { city: ['Roma', 'Milano', 'Berlin'][i % 3] as string },
-  }));
-}
-
-const getRowId = (row: User) => row.id;
-
-describe('DataGrid — rendering', () => {
-  it('renders a <table> element', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(50)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(container.querySelector('table')).not.toBeNull();
-  });
-
-  it('renders column headers', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(screen.queryByText('Name')).not.toBeNull();
-    expect(screen.queryByText('Email')).not.toBeNull();
-    expect(screen.queryByText('Age')).not.toBeNull();
-  });
-
-  it('renders only a window of rows (virtualized)', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(1000)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // Visible window with 400px height + 48px rows = ~9 rows + overscan
-    // (5 top + 5 bottom). Initial viewport height fallback = 400px.
-    // So at scrollTop=0 we render rows 0 to ~13 (no top overscan needed).
-    const dataRows = container.querySelectorAll('tbody tr[data-selected]');
-    expect(dataRows.length).toBeLessThan(50);  // certainly not all 1000
-    expect(dataRows.length).toBeGreaterThan(5); // at least the visible window
-  });
-
-  it('renders spacer rows above and below the visible window', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(1000)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // Spacer rows are <tr aria-hidden="true"> with inline height style.
-    const spacers = container.querySelectorAll('tbody tr[aria-hidden="true"]');
-    expect(spacers.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('renders empty state when rows is empty', () => {
-    render(
-      <DataGrid
-        rows={[]}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(screen.queryByText('No data')).not.toBeNull();
-  });
-
-  it('renders loading skeleton rows', () => {
-    const { container } = render(
-      <DataGrid
-        rows={[]}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        loading
-        loadingRowCount={6}
-      />,
-    );
-    const busyRows = container.querySelectorAll('tr[aria-busy="true"]');
-    expect(busyRows.length).toBe(6);
-  });
-});
-
-describe('DataGrid — sort', () => {
-  it('sortable header has aria-sort=none initially', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const header = screen.getByText('Name').closest('th');
-    expect(header?.getAttribute('aria-sort')).toBe('none');
-  });
-
-  it('click sortable header → asc', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    fireEvent.click(screen.getByText('Name').closest('button')!);
-    expect(screen.getByText('Name').closest('th')?.getAttribute('aria-sort')).toBe(
-      'ascending',
-    );
-  });
-
-  it('serverSideSort prevents local sort, emits onSortChange', () => {
-    let lastModel: unknown = null;
-    const rows = generateUsers(20);
-    const { container } = render(
-      <DataGrid
-        rows={rows}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        serverSideSort
-        onSortChange={(m) => (lastModel = m)}
-      />,
-    );
-    const firstNameBeforeSort = container.querySelector('tbody tr[data-selected] td')?.textContent;
-    fireEvent.click(screen.getByText('Name').closest('button')!);
-    expect(lastModel).toEqual([{ field: 'name', direction: 'asc' }]);
-    // Row order didn't change since server-side: still original order.
-    const firstNameAfterSort = container.querySelector('tbody tr[data-selected] td')?.textContent;
-    expect(firstNameAfterSort).toBe(firstNameBeforeSort);
-  });
-});
-
-describe('DataGrid — search', () => {
-  it('renders search input when enableSearch', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        enableSearch
-      />,
-    );
-    expect(screen.getByPlaceholderText('Search...')).not.toBeNull();
-  });
-
-  it('filters rows by search query (client-side)', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        enableSearch
-        searchDebounceMs={0}
-      />,
-    );
-    const input = screen.getByPlaceholderText('Search...') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'User 5' } });
-    // Only rows with 'User 5' in name/email survive (User 5, User 15, ...)
-    const rows = container.querySelectorAll('tbody tr[data-selected]');
-    expect(rows.length).toBeGreaterThan(0);
-    expect(rows.length).toBeLessThan(20);
-  });
-
-  it('serverSideSearch prevents local filter, emits onSearchQueryChange', () => {
-    let lastQuery = '';
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        enableSearch
-        searchDebounceMs={0}
-        serverSideSearch
-        onSearchQueryChange={(q) => (lastQuery = q)}
-      />,
-    );
-    const input = screen.getByPlaceholderText('Search...') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'alice' } });
-    expect(lastQuery).toBe('alice');
-  });
-});
-
-describe('DataGrid — selection', () => {
-  it('renders checkbox for each visible row when rowSelection=multiple', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        rowSelection="multiple"
-      />,
-    );
-    // 1 header + N row checkboxes (N = visible window).
-    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
-    expect(checkboxes.length).toBeGreaterThan(2);
-  });
-
-  it('toggleRow updates selectedRowIds (controlled)', () => {
-    let lastIds: string[] = [];
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(10)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        rowSelection="multiple"
-        selectedRowIds={[]}
-        onSelectionChange={(ids) => (lastIds = ids)}
-      />,
-    );
-    const firstRowCheckbox = container.querySelector(
-      'tbody tr[data-selected] input[type="checkbox"]',
-    ) as HTMLInputElement;
-    fireEvent.click(firstRowCheckbox);
-    expect(lastIds.length).toBe(1);
-  });
-
-  it('selectAllScope=allLoaded toggles every row in the sorted set', () => {
-    let lastIds: string[] = [];
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(50)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        rowSelection="multiple"
-        selectAllScope="allLoaded"
-        selectedRowIds={[]}
-        onSelectionChange={(ids) => (lastIds = ids)}
-      />,
-    );
-    const headerCheckbox = container.querySelector(
-      'thead input[type="checkbox"]',
-    ) as HTMLInputElement;
-    fireEvent.click(headerCheckbox);
-    expect(lastIds.length).toBe(50); // all 50 rows toggled
-  });
-
-  it('selectAllScope=visible toggles only rendered rows', () => {
-    let lastIds: string[] = [];
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(1000)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        rowSelection="multiple"
-        selectAllScope="visible"
-        selectedRowIds={[]}
-        onSelectionChange={(ids) => (lastIds = ids)}
-      />,
-    );
-    const headerCheckbox = container.querySelector(
-      'thead input[type="checkbox"]',
-    ) as HTMLInputElement;
-    fireEvent.click(headerCheckbox);
-    // Only visible window — way less than 1000
-    expect(lastIds.length).toBeLessThan(50);
-    expect(lastIds.length).toBeGreaterThan(0);
-  });
-
-  it('renders bulk action footer when selection > 0', () => {
-    const { rerender } = render(
-      <DataGrid
-        rows={generateUsers(10)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        rowSelection="multiple"
-        bulkActions={(rows) => <span>Bulk × {rows.length}</span>}
-      />,
-    );
-    expect(screen.queryByText(/Bulk ×/)).toBeNull();
-    rerender(
-      <DataGrid
-        rows={generateUsers(10)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        rowSelection="multiple"
-        selectedRowIds={['u0', 'u1']}
-        bulkActions={(rows) => <span>Bulk × {rows.length}</span>}
-      />,
-    );
-    expect(screen.getByText('Bulk × 2')).not.toBeNull();
-  });
-});
-
-describe('DataGrid — RBAC', () => {
-  it('per-column hide removes the column entirely', () => {
-    const colsWithHide: TableColumn<User>[] = [
-      baseCols[0]!,
-      {
-        ...baseCols[1]!,
-        access: { resource: 'email', action: 'read', onUnauthorized: 'hide' },
-      },
-      baseCols[2]!,
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={colsWithHide}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(screen.queryByText('Email')).toBeNull();
-  });
-});
-
-describe('DataGrid — sticky left column', () => {
-  it('applies sticky CSS class to sticky="left" columns', () => {
-    const colsSticky: TableColumn<User>[] = [
-      { ...baseCols[0]!, sticky: 'left' },
-      ...baseCols.slice(1),
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={colsSticky}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const nameHeader = screen.getByText('Name').closest('th');
-    expect(nameHeader?.className).toContain('sticky');
-    expect(nameHeader?.className).toContain('left-0');
-  });
-});
-
-describe('DataGrid — internal pagination', () => {
-  it('renders Pagination footer when pagination prop is set', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(100)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        pagination={{
-          page: 1,
-          pageSize: 20,
-          onPageChange: () => {},
-        }}
-      />,
-    );
-    // Pagination renders a <nav aria-label="Pagination">
-    expect(screen.queryByRole('navigation', { name: 'Pagination' })).not.toBeNull();
-  });
-});
-
-describe('DataGrid — smart defaults', () => {
-  it('right-aligns number columns (Age)', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const ageHeader = screen.getByText('Age').closest('th');
-    expect(ageHeader?.className).toContain('text-right');
-  });
-
-  it('auto-applies tabular-nums to number cells (no font-mono)', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const ageCell = container.querySelector('tbody tr[data-selected] td:nth-child(3)');
-    expect(ageCell?.className).toContain('tabular-nums');
-    expect(ageCell?.className).not.toContain('font-mono');
-  });
-});
-
-describe('DataGrid — i18n', () => {
-  it('column headers accept translated strings', () => {
-    const colsTranslated: TableColumn<User>[] = [
-      { field: 'name', header: /* t('users.name') */ 'Nome', sortable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={colsTranslated}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(screen.getByText('Nome')).not.toBeNull();
-  });
-
-  it('labels prop translates internal a11y strings', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        rowSelection="multiple"
-        labels={{ ariaSelectRow: 'Seleziona riga', ariaSelectAllRows: 'Seleziona tutto' }}
-      />,
-    );
-    expect(screen.queryByLabelText('Seleziona tutto')).not.toBeNull();
-  });
-});
-
-describe('DataGrid — per-column filter UI', () => {
-  it('renders a filter trigger button only for filterable columns', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', filterable: true },
-      { field: 'email', header: 'Email' },
-      { field: 'age', header: 'Age', filterable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // 2 filterable cols → 2 filter buttons
-    const triggers = screen.getAllByRole('button', { name: 'Filter' });
-    expect(triggers).toHaveLength(2);
-  });
-
-  it('shows active state (aria-pressed=true) when a filter is applied', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', filterable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        filterModel={[{ field: 'name', op: 'contains', value: 'User 1' }]}
-      />,
-    );
-    const trigger = screen.getByRole('button', { name: 'Filter' });
-    expect(trigger.getAttribute('aria-pressed')).toBe('true');
-  });
-
-  it('opens a text input when filterable string column is clicked', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', filterable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
-    // Apply button means the Popover opened
-    expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeNull();
-  });
-
-  it('opens Min/Max inputs for filterable number column', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'age', header: 'Age', filterable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
-    expect(screen.queryByText('Min')).not.toBeNull();
-    expect(screen.queryByText('Max')).not.toBeNull();
-  });
-
-  it('explicit col.filterType="text" overrides number autodetect', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'age', header: 'Age', filterable: true, filterType: 'text' },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
-    // Text filter has Apply but no Min/Max
-    expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeNull();
-    expect(screen.queryByText('Min')).toBeNull();
-  });
-
-  it('emits onFilterChange when Apply is clicked', () => {
-    const onFilterChange = vi.fn();
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', filterable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        onFilterChange={onFilterChange}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
-    const input = screen.getByPlaceholderText('…') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'User 2' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-    expect(onFilterChange).toHaveBeenCalledWith([
-      { field: 'name', op: 'contains', value: 'User 2' },
-    ]);
-  });
-
-  it('translates filter labels via the labels prop', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'age', header: 'Età', filterable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        labels={{
-          filterColumn: 'Filtra',
-          filterApply: 'Applica',
-          filterClear: 'Pulisci',
-          filterMin: 'Min',
-          filterMax: 'Max',
-        }}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Filtra' }));
-    expect(screen.queryByRole('button', { name: 'Applica' })).not.toBeNull();
-    expect(screen.queryByRole('button', { name: 'Pulisci' })).not.toBeNull();
-  });
-});
-
-describe('DataGrid — column visibility', () => {
-  it('renders the Columns toolbar button by default', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(screen.queryByRole('button', { name: 'Columns' })).not.toBeNull();
-  });
-
-  it('does NOT render the Columns button when enableColumnVisibility=false', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        enableColumnVisibility={false}
-      />,
-    );
-    expect(screen.queryByRole('button', { name: 'Columns' })).toBeNull();
-  });
-
-  it('opens a popover menu with one checkbox per hideable column', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name' },
-      { field: 'email', header: 'Email' },
-      // hideable: false → not shown in the menu (structurally required)
-      { field: 'age', header: 'Age', hideable: false },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
-    // Radix Popover content has role="dialog" too.
-    expect(screen.queryByRole('dialog')).not.toBeNull();
-    // The menu should expose checkboxes for Name + Email (not Age).
-    const menu = screen.getByRole('dialog');
-    expect(menu.textContent).toContain('Name');
-    expect(menu.textContent).toContain('Email');
-    expect(menu.textContent).not.toContain('Age');
-  });
-
-  it('respects col.defaultHidden on first render', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name' },
-      { field: 'email', header: 'Email', defaultHidden: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // Email column header should NOT be rendered initially.
-    expect(screen.queryByText('Email')).toBeNull();
-    // Name column header SHOULD be rendered.
-    expect(screen.queryByText('Name')).not.toBeNull();
-  });
-
-  it('toggling a column auto-commits via onHiddenColumnsChange (no Done button)', () => {
-    const onHiddenColumnsChange = vi.fn();
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        onHiddenColumnsChange={onHiddenColumnsChange}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
-    // Uncheck "Email" inside the popover menu
-    const menu = screen.getByRole('dialog');
-    const emailCheckbox = Array.from(
-      menu.querySelectorAll('input[type="checkbox"]'),
-    ).find((el) => {
-      const li = el.closest('label');
-      return li?.textContent?.includes('Email');
-    }) as HTMLInputElement | undefined;
-    expect(emailCheckbox).toBeDefined();
-    fireEvent.click(emailCheckbox!);
-    // Auto-commit on toggle — no Done button anymore
-    expect(onHiddenColumnsChange).toHaveBeenCalledWith(['email']);
-  });
-
-  it('controlled hiddenColumns hides the matching columns', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        hiddenColumns={['email']}
-      />,
-    );
-    expect(screen.queryByText('Email')).toBeNull();
-    expect(screen.queryByText('Name')).not.toBeNull();
-  });
-
-  // ───── Sprint 6 P5 — tri-state master checkbox ─────
-
-  it('renders a master toggle-all checkbox in the visibility menu', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
-    expect(
-      screen.queryByLabelText('Toggle all columns'),
-    ).not.toBeNull();
-  });
-
-  it('master checkbox is checked when every column is visible', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
-    const master = screen.getByLabelText('Toggle all columns') as HTMLInputElement;
-    expect(master.checked).toBe(true);
-  });
-
-  it('clicking the master when all visible hides every hideable column', () => {
-    const onHiddenColumnsChange = vi.fn();
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        onHiddenColumnsChange={onHiddenColumnsChange}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
-    fireEvent.click(screen.getByLabelText('Toggle all columns'));
-    // baseCols = name / email / age / meta.city — all hideable.
-    expect(onHiddenColumnsChange).toHaveBeenCalledWith([
-      'name',
-      'email',
-      'age',
-      'meta.city',
-    ]);
-  });
-
-  it('clicking the master when some are hidden shows all', () => {
-    const onHiddenColumnsChange = vi.fn();
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        hiddenColumns={['email']}
-        onHiddenColumnsChange={onHiddenColumnsChange}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
-    fireEvent.click(screen.getByLabelText('Toggle all columns'));
-    expect(onHiddenColumnsChange).toHaveBeenCalledWith([]);
-  });
-});
-
-describe('DataGrid — column resize', () => {
-  it('renders a resize handle (separator) for each column by default', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // One separator per column (4 columns).
-    const handles = screen.getAllByRole('separator');
-    expect(handles.length).toBe(baseCols.length);
-  });
-
-  it('omits resize handles when enableColumnResize=false', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        enableColumnResize={false}
-      />,
-    );
-    expect(screen.queryAllByRole('separator')).toHaveLength(0);
-  });
-
-  it('omits resize handle for col.resizable=false', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name' },
-      { field: 'email', header: 'Email', resizable: false },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // Only 1 separator (Name); Email opted out via resizable=false.
-    expect(screen.getAllByRole('separator')).toHaveLength(1);
-  });
-
-  it('applies columnWidths to <th> style.width', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', width: 100 },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        columnWidths={{ name: 250 }}
-      />,
-    );
-    const th = screen.getByText('Name').closest('th');
-    expect(th?.style.width).toBe('250px');
-  });
-
-  it('falls back to col.width when no resize state for the column', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', width: 100 },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const th = screen.getByText('Name').closest('th');
-    expect(th?.style.width).toBe('100px');
-  });
-});
-
-describe('DataGrid — column reorder', () => {
-  it('applies the columnOrder prop to header order', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(3)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        columnOrder={['age', 'name', 'email', 'meta.city']}
-      />,
-    );
-    const headerTexts = Array.from(
-      container.querySelectorAll('thead th'),
-    ).map((th) => th.textContent?.trim() ?? '');
-    // First three column headers should match the order
-    expect(headerTexts[0]).toContain('Age');
-    expect(headerTexts[1]).toContain('Name');
-    expect(headerTexts[2]).toContain('Email');
-  });
-
-  it('headers are draggable by default', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(3)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const draggableThs = container.querySelectorAll('thead th[draggable="true"]');
-    expect(draggableThs.length).toBe(baseCols.length);
-  });
-
-  it('does NOT make headers draggable when enableColumnReorder=false', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(3)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        enableColumnReorder={false}
-      />,
-    );
-    expect(
-      container.querySelectorAll('thead th[draggable="true"]'),
-    ).toHaveLength(0);
-  });
-
-  it('respects col.reorderable=false per-column', () => {
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', reorderable: false },
-      { field: 'email', header: 'Email' },
-    ];
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(3)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // Only the Email th should be draggable.
-    const draggableThs = container.querySelectorAll('thead th[draggable="true"]');
-    expect(draggableThs.length).toBe(1);
-    expect(draggableThs[0]?.textContent).toContain('Email');
-  });
-});
-
-describe('DataGrid — Sprint 6 P2 refinements', () => {
-  // ───── D1: aria-rowcount / aria-rowindex ─────
-
-  it('sets aria-rowcount on the table reflecting the full dataset + header', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(500)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const table = container.querySelector('table');
-    // 500 data rows + 1 header row
-    expect(table?.getAttribute('aria-rowcount')).toBe('501');
-  });
-
-  it('header row has aria-rowindex=1', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(
-      container.querySelector('thead tr')?.getAttribute('aria-rowindex'),
-    ).toBe('1');
-  });
-
-  it('data rows carry a 1-based aria-rowindex offset past the header', () => {
-    const { container } = render(
-      <DataGrid
-        rows={generateUsers(20)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    // absolute index 0 → aria-rowindex 2 (header occupies index 1)
-    const firstDataRow = container.querySelector('tbody tr[data-selected]');
-    expect(firstDataRow?.getAttribute('aria-rowindex')).toBe('2');
-  });
-
-  // ───── D6: resize handle is not draggable + keyboard-focusable ─────
-
-  it('resize handle is keyboard-focusable and explicitly not draggable', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    const handle = screen.getAllByRole('separator')[0] as HTMLElement;
-    expect(handle.getAttribute('tabindex')).toBe('0');
-    expect(handle.getAttribute('draggable')).toBe('false');
-  });
-
-  // ───── D3: keyboard column resize ─────
-
-  it('ArrowRight on the resize handle widens the column by 16px', () => {
-    const onColumnWidthsChange = vi.fn();
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', width: 120 },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        columnWidths={{ name: 120 }}
-        onColumnWidthsChange={onColumnWidthsChange}
-      />,
-    );
-    const handle = screen.getByRole('separator');
-    fireEvent.keyDown(handle, { key: 'ArrowRight' });
-    expect(onColumnWidthsChange).toHaveBeenCalledWith({ name: 136 });
-  });
-
-  it('Shift+ArrowLeft on the resize handle narrows the column by 64px', () => {
-    const onColumnWidthsChange = vi.fn();
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', width: 200 },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        columnWidths={{ name: 200 }}
-        onColumnWidthsChange={onColumnWidthsChange}
-      />,
-    );
-    const handle = screen.getByRole('separator');
-    fireEvent.keyDown(handle, { key: 'ArrowLeft', shiftKey: true });
-    expect(onColumnWidthsChange).toHaveBeenCalledWith({ name: 136 });
-  });
-
-  // ───── D7: no-results vs no-data empty state ─────
-
-  it('shows the noData message when the dataset is genuinely empty', () => {
-    render(
-      <DataGrid
-        rows={[]}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-      />,
-    );
-    expect(screen.queryByText('No data')).not.toBeNull();
-  });
-
-  it('shows the noResults message when a filter excludes every row', () => {
-    render(
-      <DataGrid
-        rows={generateUsers(10)}
-        cols={baseCols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        filterModel={[{ field: 'name', op: 'contains', value: 'zzz-no-match' }]}
-      />,
-    );
-    expect(screen.queryByText('No matching results')).not.toBeNull();
-    expect(screen.queryByText('No data')).toBeNull();
-  });
-
-  // ───── D4: Enter applies the filter ─────
-
-  it('pressing Enter in the filter text input applies the filter', () => {
-    const onFilterChange = vi.fn();
-    const cols: TableColumn<User>[] = [
-      { field: 'name', header: 'Name', filterable: true },
-    ];
-    render(
-      <DataGrid
-        rows={generateUsers(5)}
-        cols={cols}
-        getRowId={getRowId}
-        rowHeight={48}
-        height="400px"
-        onFilterChange={onFilterChange}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
-    const input = screen.getByPlaceholderText('…') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'User 3' } });
-    fireEvent.keyDown(input, { key: 'Enter' });
-    expect(onFilterChange).toHaveBeenCalledWith([
-      { field: 'name', op: 'contains', value: 'User 3' },
-    ]);
-  });
-});