@moontra/moonui 5.0.0 → 5.1.0

package/src/components/ui/__tests__/data-table-basic.test.tsx

@@ -0,0 +1,271 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { DataTableBasic } from '../data-table-basic';
+import { ColumnDef } from '@tanstack/react-table';
+import '@testing-library/jest-dom';
+
+/**
+ * NOT (#283): Bu dosya eskiden `../data-table`'ı import ediyordu — free pakette
+ * ÖYLE BİR MODÜL YOK, bu yüzden suite hiç yüklenemiyordu (0 test koşuyordu).
+ * Free paketin dışa açtığı tablo `DataTableBasic` (bkz. ui/index.ts).
+ *
+ * Testlerin bir kısmı Pro `DataTable`'a ait özellikleri ölçüyordu ve free
+ * yüzeyde karşılıkları YOK — `filterable`, `exportable`, `loading` prop'ları ve
+ * `data-table-container` test-id'si `@moontra/moonui-pro`'daki
+ * `components/data-table/index.tsx`'te bulunuyor. O testler bu suite'ten
+ * çıkarıldı ve şu an hiçbir yerde kapsanmıyorlar: pro paketinin test altyapısı
+ * çalışır durumda (29 suite / 415 test) ama `components/data-table/` altında tek
+ * bir test dosyası yok — ayrı bir iş olarak ele alınmalı.
+ *
+ * Geri kalan her test korundu ve `DataTableBasic`'in GERÇEK yüzeyine hizalandı:
+ * enableSorting / enablePagination / enableSearch / pageSize /
+ * searchPlaceholder ("Search...") / emptyMessage ("No results found.") / className
+ */
+
+type TestData = {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+  status: 'active' | 'inactive';
+};
+
+const mockData: TestData[] = [
+  { id: '1', name: 'John Doe', email: 'john@example.com', age: 30, status: 'active' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', age: 25, status: 'inactive' },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', age: 35, status: 'active' },
+];
+
+const mockColumns: ColumnDef<TestData>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'age', header: 'Age' },
+  { accessorKey: 'status', header: 'Status' },
+];
+
+describe('DataTableBasic', () => {
+  it('renders correctly with basic data', () => {
+    render(<DataTableBasic columns={mockColumns} data={mockData} />);
+
+    // Başlıklar
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getByText('Age')).toBeInTheDocument();
+    expect(screen.getByText('Status')).toBeInTheDocument();
+
+    // Satır verisi
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    expect(screen.getByText('30')).toBeInTheDocument();
+    // Fixture'da iki kayıt 'active' — tekil sorgu belirsiz kalıyordu
+    expect(screen.getAllByText('active')).toHaveLength(2);
+    expect(screen.getByText('inactive')).toBeInTheDocument();
+  });
+
+  it('renders empty state when no data', () => {
+    render(<DataTableBasic columns={mockColumns} data={[]} />);
+
+    expect(screen.getByText('No results found.')).toBeInTheDocument();
+  });
+
+  it('honours a custom empty message', () => {
+    render(
+      <DataTableBasic columns={mockColumns} data={[]} emptyMessage="Nothing here yet" />
+    );
+
+    expect(screen.getByText('Nothing here yet')).toBeInTheDocument();
+  });
+
+  it('shows search input when enableSearch is true', () => {
+    render(<DataTableBasic columns={mockColumns} data={mockData} enableSearch />);
+
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it('hides search input when enableSearch is false', () => {
+    render(
+      <DataTableBasic columns={mockColumns} data={mockData} enableSearch={false} />
+    );
+
+    expect(screen.queryByPlaceholderText('Search...')).not.toBeInTheDocument();
+  });
+
+  it('filters data based on search input', async () => {
+    render(<DataTableBasic columns={mockColumns} data={mockData} enableSearch />);
+
+    fireEvent.change(screen.getByPlaceholderText('Search...'), {
+      target: { value: 'Jane' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+      expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+      expect(screen.queryByText('Bob Johnson')).not.toBeInTheDocument();
+    });
+  });
+
+  it('handles pagination correctly', () => {
+    const largeData = Array.from({ length: 25 }, (_, i) => ({
+      id: `${i + 1}`,
+      name: `User ${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      age: 20 + i,
+      status: i % 2 === 0 ? ('active' as const) : ('inactive' as const),
+    }));
+
+    render(<DataTableBasic columns={mockColumns} data={largeData} pageSize={10} />);
+
+    expect(screen.getByText('Previous')).toBeInTheDocument();
+    expect(screen.getByText('Next')).toBeInTheDocument();
+    // Metin birden çok düğüme bölünüyor: `Page {n} of{" "}{m}`
+    expect(
+      screen.getByText((_, el) => el?.textContent?.replace(/\s+/g, ' ').trim() === 'Page 1 of 3')
+    ).toBeInTheDocument();
+  });
+
+  it('advances to the next page', async () => {
+    const largeData = Array.from({ length: 25 }, (_, i) => ({
+      id: `${i + 1}`,
+      name: `User ${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      age: 20 + i,
+      status: 'active' as const,
+    }));
+
+    render(<DataTableBasic columns={mockColumns} data={largeData} pageSize={10} />);
+
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Next'));
+
+    await waitFor(() => {
+      expect(screen.getByText('User 11')).toBeInTheDocument();
+      expect(screen.queryByText('User 1')).not.toBeInTheDocument();
+    });
+  });
+
+  it('handles sorting correctly', async () => {
+    const sortableColumns: ColumnDef<TestData>[] = [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => (
+          <button onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
+            Name
+          </button>
+        ),
+      },
+      {
+        accessorKey: 'age',
+        header: ({ column }) => (
+          <button onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
+            Age
+          </button>
+        ),
+      },
+    ];
+
+    render(<DataTableBasic columns={sortableColumns} data={mockData} />);
+
+    fireEvent.click(screen.getByText('Name'));
+
+    await waitFor(() => {
+      const rows = screen.getAllByRole('row');
+      // İlk satır başlık; ikinci satır alfabetik olarak ilk kayıt olmalı
+      expect(rows[1]).toHaveTextContent('Bob Johnson');
+    });
+  });
+
+  it('handles row selection', () => {
+    const selectableColumns: ColumnDef<TestData>[] = [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <input
+            type="checkbox"
+            checked={table.getIsAllPageRowsSelected()}
+            onChange={(e) => table.toggleAllPageRowsSelected(e.target.checked)}
+          />
+        ),
+        cell: ({ row }) => (
+          <input
+            type="checkbox"
+            checked={row.getIsSelected()}
+            onChange={(e) => row.toggleSelected(e.target.checked)}
+          />
+        ),
+      },
+      ...mockColumns,
+    ];
+
+    render(<DataTableBasic columns={selectableColumns} data={mockData} />);
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes).toHaveLength(4); // 1 başlık + 3 satır
+
+    fireEvent.click(checkboxes[1]);
+    expect(checkboxes[1]).toBeChecked();
+  });
+
+  it('renders every column by default', () => {
+    render(<DataTableBasic columns={mockColumns} data={mockData} />);
+
+    expect(screen.getAllByRole('columnheader')).toHaveLength(mockColumns.length);
+  });
+
+  it('handles custom cell rendering', () => {
+    const customColumns: ColumnDef<TestData>[] = [
+      {
+        accessorKey: 'name',
+        header: 'Name',
+        cell: ({ row }) => <div className="font-bold">{row.getValue('name')}</div>,
+      },
+      {
+        accessorKey: 'status',
+        header: 'Status',
+        cell: ({ row }) => {
+          const status = row.getValue('status') as string;
+          return (
+            <span className={status === 'active' ? 'text-green-600' : 'text-red-600'}>
+              {status}
+            </span>
+          );
+        },
+      },
+    ];
+
+    render(<DataTableBasic columns={customColumns} data={mockData} />);
+
+    expect(screen.getByText('John Doe')).toHaveClass('font-bold');
+    expect(screen.getAllByText('active')[0]).toHaveClass('text-green-600');
+  });
+
+  it('handles empty columns gracefully', () => {
+    render(<DataTableBasic columns={[]} data={mockData} />);
+
+    // Boş mesaj VERİ boşken çıkar, kolon boşken değil: veri dolu olduğu için
+    // tablo satırları kurulur, yalnızca hücre/başlık üretilmez. Buradaki
+    // gereksinim "patlamadan render etsin".
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.queryAllByRole('columnheader')).toHaveLength(0);
+    // Başlık satırı + veri satırları
+    expect(screen.getAllByRole('row')).toHaveLength(mockData.length + 1);
+  });
+
+  it('renders a semantic, keyboard-reachable table', () => {
+    render(<DataTableBasic columns={mockColumns} data={mockData} enableSearch />);
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getAllByRole('columnheader')).toHaveLength(mockColumns.length);
+
+    const search = screen.getByPlaceholderText('Search...');
+    search.focus();
+    expect(search).toHaveFocus();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <DataTableBasic columns={mockColumns} data={mockData} className="custom-class" />
+    );
+
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});