frontend phase 15

client/src/components/admin/AdminDataTable.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../theme';
+import AdminDataTable, { type AdminTableColumn } from './AdminDataTable';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+const ROWS: Row[] = [
+  { id: 1, name: 'Alpha' },
+  { id: 2, name: 'Beta' },
+];
+const COLUMNS: AdminTableColumn<Row>[] = [
+  { key: 'id', header: 'ID', render: (r) => r.id },
+  { key: 'name', header: 'Name', render: (r) => r.name },
+];
+
+describe('<AdminDataTable/>', () => {
+  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);
+
+  it('renders headers and every row cell', () => {
+    wrap(<AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} />);
+    expect(screen.getByText('ID')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+  });
+
+  it('exposes a data-col attribute per column', () => {
+    const { container } = wrap(<AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} />);
+    expect(container.querySelectorAll('[data-col="name"]').length).toBe(2);
+  });
+
+  it('calls onRowClick with the clicked row', () => {
+    const onRowClick = jest.fn();
+    wrap(<AdminDataTable columns={COLUMNS} rows={ROWS} getRowKey={(r) => r.id} onRowClick={onRowClick} />);
+    fireEvent.click(screen.getByText('Beta'));
+    expect(onRowClick).toHaveBeenCalledWith(ROWS[1]);
+  });
+});