mvc-kit 2.12.0 → 2.12.2

package/src/react/components/DataTable.test.tsx

@@ -0,0 +1,599 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+import { vi, describe, it, expect } from 'vitest';
+import { DataTable } from './DataTable';
+import type { Column, SelectionState, PaginationState, SortHeaderProps } from './types';
+
+interface User {
+  id: string;
+  name: string;
+  age: number;
+  role: string;
+}
+
+const users: User[] = [
+  { id: '1', name: 'Alice', age: 30, role: 'admin' },
+  { id: '2', name: 'Bob', age: 25, role: 'user' },
+  { id: '3', name: 'Charlie', age: 35, role: 'user' },
+];
+
+const columns: Column<User>[] = [
+  { key: 'name', header: 'Name', render: (u) => u.name, sortable: true },
+  { key: 'age', header: 'Age', render: (u) => String(u.age), sortable: true },
+  { key: 'role', header: 'Role', render: (u) => u.role },
+];
+
+describe('DataTable', () => {
+  describe('basic rendering', () => {
+    it('renders columns and rows', () => {
+      render(<DataTable items={users} columns={columns} />);
+      expect(screen.getByText('Name')).toBeDefined();
+      expect(screen.getByText('Age')).toBeDefined();
+      expect(screen.getByText('Role')).toBeDefined();
+      expect(screen.getByText('Alice')).toBeDefined();
+      expect(screen.getByText('Bob')).toBeDefined();
+      expect(screen.getByText('Charlie')).toBeDefined();
+    });
+
+    it('renders with role="grid"', () => {
+      const { container } = render(<DataTable items={users} columns={columns} />);
+      expect(container.querySelector('table[role="grid"]')).not.toBeNull();
+    });
+
+    it('renders with data-component', () => {
+      const { container } = render(<DataTable items={users} columns={columns} />);
+      expect(container.querySelector('[data-component="data-table"]')).not.toBeNull();
+    });
+
+    it('applies className', () => {
+      const { container } = render(
+        <DataTable items={users} columns={columns} className="my-table" />,
+      );
+      expect(container.querySelector('.my-table')).not.toBeNull();
+    });
+
+    it('applies aria-label', () => {
+      const { container } = render(
+        <DataTable items={users} columns={columns} aria-label="Users table" />,
+      );
+      expect(container.querySelector('table')!.getAttribute('aria-label')).toBe('Users table');
+    });
+  });
+
+  describe('empty / loading / error states', () => {
+    it('renders empty state', () => {
+      render(
+        <DataTable
+          items={[]}
+          columns={columns}
+          renderEmpty={() => <p>No users</p>}
+        />,
+      );
+      expect(screen.getByText('No users')).toBeDefined();
+    });
+
+    it('renders loading state', () => {
+      render(
+        <DataTable
+          items={users}
+          columns={columns}
+          loading={true}
+          renderLoading={() => <p>Loading...</p>}
+        />,
+      );
+      expect(screen.getByText('Loading...')).toBeDefined();
+      expect(screen.queryByText('Alice')).toBeNull();
+    });
+
+    it('renders error state', () => {
+      render(
+        <DataTable
+          items={users}
+          columns={columns}
+          error="Failed to load"
+          renderError={(err) => <p>Error: {err}</p>}
+        />,
+      );
+      expect(screen.getByText('Error: Failed to load')).toBeDefined();
+      expect(screen.queryByText('Alice')).toBeNull();
+    });
+  });
+
+  describe('sort headers', () => {
+    it('renders sortable column headers as buttons', () => {
+      const onSort = vi.fn();
+      const { container } = render(
+        <DataTable
+          items={users}
+          columns={columns}
+          sort={[]}
+          onSort={onSort}
+        />,
+      );
+
+      // Name and Age are sortable, Role is not
+      const buttons = container.querySelectorAll('th button');
+      expect(buttons.length).toBe(2);
+    });
+
+    it('calls onSort when header clicked', () => {
+      const onSort = vi.fn();
+      render(
+        <DataTable
+          items={users}
+          columns={columns}
+          sort={[]}
+          onSort={onSort}
+        />,
+      );
+
+      // Click the "Name" sort button
+      const nameButton = screen.getByRole('button', { name: /Name/ });
+      fireEvent.click(nameButton);
+      expect(onSort).toHaveBeenCalledWith('name');
+    });
+
+    it('renders aria-sort on sortable columns', () => {
+      const { container } = render(
+        <DataTable
+          items={users}
+          columns={columns}
+          sort={[{ key: 'name', direction: 'asc' }]}
+          onSort={() => {}}
+        />,
+      );
+
+      const headers = container.querySelectorAll('th');
+      // Skip selection column (not present) — first is Name
+      const nameHeader = Array.from(headers).find(h => h.textContent?.includes('Name'))!;
+      expect(nameHeader.getAttribute('aria-sort')).toBe('ascending');
+
+      const ageHeader = Array.from(headers).find(h => h.textContent?.includes('Age'))!;
+      expect(ageHeader.getAttribute('aria-sort')).toBe('none');
+    });
+
+    it('renders descending aria-sort', () => {
+      const { container } = render(
+        <DataTable
+          items={users}
+          columns={columns}
+          sort={[{ key: 'age', direction: 'desc' }]}
+          onSort={() => {}}
+        />,
+      );
+
+      const ageHeader = Array.from(container.querySelectorAll('th'))
+        .find(h => h.textContent?.includes('Age'))!;
+      expect(ageHeader.getAttribute('aria-sort')).toBe('descending');
+    });
+
+    it('renders custom sort indicator', () => {
+      const renderSortIndicator = (props: SortHeaderProps) => (
+        <span data-testid="sort-indicator">
+          {props.active ? (props.direction === 'asc' ? '↑' : '↓') : '-'}
+        </span>
+      );
+
+      render(
+        <DataTable
+          items={users}
+          columns={columns}
+          sort={[{ key: 'name', direction: 'asc' }]}
+          onSort={() => {}}
+          renderSortIndicator={renderSortIndicator}
+        />,
+      );
+
+      const indicators = screen.getAllByTestId('sort-indicator');
+      expect(indicators.length).toBe(2); // Name and Age columns
+      expect(indicators[0].textContent).toBe('↑');
+      expect(indicators[1].textContent).toBe('-');
+    });
+  });
+
+  describe('selection', () => {
+    it('renders select-all checkbox in header', () => {
+      const selection: SelectionState = {
+        selected: new Set(),
+        onToggle: vi.fn(),
+        onToggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={selection} />,
+      );
+
+      const selectAllCheckbox = container.querySelector(
+        'th[data-column="select"] input[type="checkbox"]',
+      ) as HTMLInputElement;
+      expect(selectAllCheckbox).not.toBeNull();
+      expect(selectAllCheckbox.checked).toBe(false);
+    });
+
+    it('renders row checkboxes', () => {
+      const selection: SelectionState = {
+        selected: new Set(['1']),
+        onToggle: vi.fn(),
+        onToggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={selection} />,
+      );
+
+      const rowCheckboxes = container.querySelectorAll(
+        'td[data-column="select"] input[type="checkbox"]',
+      );
+      expect(rowCheckboxes.length).toBe(3);
+      expect((rowCheckboxes[0] as HTMLInputElement).checked).toBe(true);
+      expect((rowCheckboxes[1] as HTMLInputElement).checked).toBe(false);
+    });
+
+    it('calls onToggle when row checkbox clicked', () => {
+      const onToggle = vi.fn();
+      const selection: SelectionState = {
+        selected: new Set(),
+        onToggle,
+        onToggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={selection} />,
+      );
+
+      const rowCheckboxes = container.querySelectorAll(
+        'td[data-column="select"] input[type="checkbox"]',
+      );
+      fireEvent.click(rowCheckboxes[1]);
+      expect(onToggle).toHaveBeenCalledWith('2');
+    });
+
+    it('calls onToggleAll with allKeys when header checkbox clicked', () => {
+      const onToggleAll = vi.fn();
+      const selection: SelectionState = {
+        selected: new Set(),
+        onToggle: vi.fn(),
+        onToggleAll,
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={selection} />,
+      );
+
+      const selectAll = container.querySelector(
+        'th[data-column="select"] input[type="checkbox"]',
+      )!;
+      fireEvent.click(selectAll);
+      expect(onToggleAll).toHaveBeenCalledWith(['1', '2', '3']);
+    });
+
+    it('sets indeterminate state when partially selected', () => {
+      const selection: SelectionState = {
+        selected: new Set(['1']),
+        onToggle: vi.fn(),
+        onToggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={selection} />,
+      );
+
+      const selectAll = container.querySelector(
+        'th[data-column="select"] input[type="checkbox"]',
+      ) as HTMLInputElement;
+      expect(selectAll.indeterminate).toBe(true);
+      expect(selectAll.checked).toBe(false);
+    });
+
+    it('checks select-all when all selected', () => {
+      const selection: SelectionState = {
+        selected: new Set(['1', '2', '3']),
+        onToggle: vi.fn(),
+        onToggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={selection} />,
+      );
+
+      const selectAll = container.querySelector(
+        'th[data-column="select"] input[type="checkbox"]',
+      ) as HTMLInputElement;
+      expect(selectAll.checked).toBe(true);
+      expect(selectAll.indeterminate).toBe(false);
+    });
+
+    it('sets data-selected on selected rows', () => {
+      const selection: SelectionState = {
+        selected: new Set(['2']),
+        onToggle: vi.fn(),
+        onToggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={selection} />,
+      );
+
+      const rows = container.querySelectorAll('tbody tr');
+      expect(rows[0].hasAttribute('data-selected')).toBe(false);
+      expect(rows[1].hasAttribute('data-selected')).toBe(true);
+      expect(rows[2].hasAttribute('data-selected')).toBe(false);
+    });
+  });
+
+  describe('controlled pagination', () => {
+    it('renders pagination info via renderPagination', () => {
+      const pagination: PaginationState = {
+        page: 2,
+        total: 100,
+        onPageChange: vi.fn(),
+      };
+
+      render(
+        <DataTable
+          items={users}
+          columns={columns}
+          pageSize={10}
+          pagination={pagination}
+          renderPagination={(info) => (
+            <div data-testid="pagination">
+              Page {info.page} of {info.pageCount}
+            </div>
+          )}
+        />,
+      );
+
+      expect(screen.getByText('Page 2 of 10')).toBeDefined();
+    });
+
+    it('provides correct pagination info', () => {
+      const onPageChange = vi.fn();
+      const pagination: PaginationState = {
+        page: 1,
+        total: 25,
+        onPageChange,
+      };
+
+      let capturedInfo: any;
+      render(
+        <DataTable
+          items={users}
+          columns={columns}
+          pageSize={10}
+          pagination={pagination}
+          renderPagination={(info) => {
+            capturedInfo = info;
+            return (
+              <div>
+                <button onClick={info.goNext}>Next</button>
+                <button onClick={info.goPrev}>Prev</button>
+              </div>
+            );
+          }}
+        />,
+      );
+
+      expect(capturedInfo.page).toBe(1);
+      expect(capturedInfo.pageCount).toBe(3);
+      expect(capturedInfo.total).toBe(25);
+      expect(capturedInfo.pageSize).toBe(10);
+      expect(capturedInfo.hasPrev).toBe(false);
+      expect(capturedInfo.hasNext).toBe(true);
+
+      fireEvent.click(screen.getByText('Next'));
+      expect(onPageChange).toHaveBeenCalledWith(2);
+    });
+  });
+
+  describe('uncontrolled pagination', () => {
+    it('slices items to first page when pageSize given without pagination', () => {
+      const items = Array.from({ length: 10 }, (_, i) => ({
+        id: String(i),
+        name: `User ${i}`,
+        age: 20 + i,
+        role: 'user',
+      }));
+
+      const { container } = render(
+        <DataTable items={items} columns={columns} pageSize={3} />,
+      );
+
+      const rows = container.querySelectorAll('tbody tr');
+      expect(rows.length).toBe(3);
+    });
+  });
+
+  describe('render slots', () => {
+    it('renderRow wraps row content', () => {
+      render(
+        <DataTable
+          items={users.slice(0, 1)}
+          columns={columns}
+          renderRow={(item, index, cells) => (
+            <>{cells}<td data-testid="extra">Extra</td></>
+          )}
+        />,
+      );
+      expect(screen.getByTestId('extra')).toBeDefined();
+    });
+  });
+
+  describe('column alignment', () => {
+    it('sets data-align attribute on th and td', () => {
+      const cols: Column<User>[] = [
+        { key: 'name', header: 'Name', render: (u) => u.name },
+        { key: 'age', header: 'Age', render: (u) => String(u.age), align: 'right' },
+      ];
+
+      const { container } = render(
+        <DataTable items={users.slice(0, 1)} columns={cols} />,
+      );
+
+      const headers = container.querySelectorAll('th');
+      expect(headers[1].getAttribute('data-align')).toBe('right');
+
+      const cells = container.querySelectorAll('td');
+      expect(cells[1].getAttribute('data-align')).toBe('right');
+    });
+  });
+
+  describe('column width', () => {
+    it('sets width style on th', () => {
+      const cols: Column<User>[] = [
+        { key: 'name', header: 'Name', render: (u) => u.name, width: '200px' },
+      ];
+
+      const { container } = render(
+        <DataTable items={users.slice(0, 1)} columns={cols} />,
+      );
+
+      const th = container.querySelector('th')!;
+      expect((th as HTMLElement).style.width).toBe('200px');
+    });
+  });
+
+  describe('helper instance integration', () => {
+    it('Selection helper: toggle called on row click', () => {
+      const helper = {
+        selected: new Set<string | number>(),
+        toggle: vi.fn(),
+        toggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={helper} />,
+      );
+
+      const rowCheckboxes = container.querySelectorAll(
+        'td[data-column="select"] input[type="checkbox"]',
+      );
+      fireEvent.click(rowCheckboxes[1]);
+      expect(helper.toggle).toHaveBeenCalledWith('2');
+    });
+
+    it('Selection helper: toggleAll called with visible item keys on select-all', () => {
+      const helper = {
+        selected: new Set<string | number>(),
+        toggle: vi.fn(),
+        toggleAll: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} selection={helper} />,
+      );
+
+      const selectAll = container.querySelector(
+        'th[data-column="select"] input[type="checkbox"]',
+      )!;
+      fireEvent.click(selectAll);
+      expect(helper.toggleAll).toHaveBeenCalledWith(['1', '2', '3']);
+    });
+
+    it('Pagination helper: reads page/pageSize from helper, calls setPage', () => {
+      const helper = {
+        page: 2,
+        pageSize: 10,
+        setPage: vi.fn(),
+      };
+
+      let capturedInfo: any;
+      render(
+        <DataTable
+          items={users}
+          columns={columns}
+          pagination={helper}
+          paginationTotal={25}
+          renderPagination={(info) => {
+            capturedInfo = info;
+            return <button onClick={info.goNext}>Next</button>;
+          }}
+        />,
+      );
+
+      expect(capturedInfo.page).toBe(2);
+      expect(capturedInfo.pageSize).toBe(10);
+      expect(capturedInfo.total).toBe(25);
+      expect(capturedInfo.pageCount).toBe(3);
+
+      fireEvent.click(screen.getByText('Next'));
+      expect(helper.setPage).toHaveBeenCalledWith(3);
+    });
+
+    it('Sorting helper: reads sorts for display, calls toggle on header click', () => {
+      const helper = {
+        sorts: [{ key: 'name', direction: 'asc' as const }],
+        toggle: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable items={users} columns={columns} sort={helper} />,
+      );
+
+      // aria-sort should be set
+      const nameHeader = Array.from(container.querySelectorAll('th'))
+        .find(h => h.textContent?.includes('Name'))!;
+      expect(nameHeader.getAttribute('aria-sort')).toBe('ascending');
+
+      // Click sort button
+      const nameButton = screen.getByRole('button', { name: /Name/ });
+      fireEvent.click(nameButton);
+      expect(helper.toggle).toHaveBeenCalledWith('name');
+    });
+
+    it('Sorting helper ignores onSort prop when helper provided', () => {
+      const helper = {
+        sorts: [{ key: 'name', direction: 'asc' as const }],
+        toggle: vi.fn(),
+      };
+      const onSort = vi.fn();
+
+      render(
+        <DataTable items={users} columns={columns} sort={helper} onSort={onSort} />,
+      );
+
+      const nameButton = screen.getByRole('button', { name: /Name/ });
+      fireEvent.click(nameButton);
+      expect(helper.toggle).toHaveBeenCalledWith('name');
+      expect(onSort).not.toHaveBeenCalled();
+    });
+
+    it('mixed: helper selection + object-literal pagination', () => {
+      const selectionHelper = {
+        selected: new Set<string | number>(['1']),
+        toggle: vi.fn(),
+        toggleAll: vi.fn(),
+      };
+
+      const pagination: PaginationState = {
+        page: 1,
+        total: 3,
+        onPageChange: vi.fn(),
+      };
+
+      const { container } = render(
+        <DataTable
+          items={users}
+          columns={columns}
+          selection={selectionHelper}
+          pagination={pagination}
+          pageSize={10}
+          renderPagination={(info) => <div>Page {info.page}</div>}
+        />,
+      );
+
+      // Selection helper works
+      const rowCheckboxes = container.querySelectorAll(
+        'td[data-column="select"] input[type="checkbox"]',
+      );
+      expect((rowCheckboxes[0] as HTMLInputElement).checked).toBe(true);
+
+      fireEvent.click(rowCheckboxes[1]);
+      expect(selectionHelper.toggle).toHaveBeenCalledWith('2');
+
+      // Object-literal pagination works
+      expect(screen.getByText('Page 1')).toBeDefined();
+    });
+  });
+});