@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/DataTable/__tests__/DataTableAdvanced.test.tsx

@@ -0,0 +1,426 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { DataTableAdvanced } from "../DataTableAdvanced"
+import { ColumnDef } from "@tanstack/react-table"
+
+// Mock des hooks
+vi.mock("../hooks/useDataTableAdvanced", () => ({
+  useDataTableAdvanced: () => ({
+    table: {
+      getHeaderGroups: () => [
+        {
+          id: "header-group-1",
+          headers: [
+            {
+              id: "name",
+              column: {
+                getCanSort: () => true,
+                getToggleSortingHandler: () => vi.fn(),
+                getIsSorted: () => false,
+                columnDef: { header: "Name" },
+              },
+              isPlaceholder: false,
+              getContext: () => ({}),
+            },
+          ],
+        },
+      ],
+      getRowModel: () => ({
+        rows: [
+          {
+            id: "row-1",
+            original: { id: 1, name: "John Doe", email: "john@example.com" },
+            getVisibleCells: () => [
+              {
+                id: "cell-1",
+                column: { id: "name", columnDef: { cell: () => "John Doe" } },
+                getContext: () => ({}),
+                getValue: () => "John Doe",
+              },
+            ],
+            getIsSelected: () => false,
+          },
+        ],
+      }),
+      getFilteredSelectedRowModel: () => ({
+        rows: [],
+      }),
+    },
+    sorting: [],
+    setSorting: vi.fn(),
+    columnFilters: [],
+    setColumnFilters: vi.fn(),
+    columnVisibility: {},
+    setColumnVisibility: vi.fn(),
+    columnOrder: [],
+    setColumnOrder: vi.fn(),
+    expanded: {},
+    setExpanded: vi.fn(),
+    grouping: [],
+    setGrouping: vi.fn(),
+    rowSelection: {},
+    setRowSelection: vi.fn(),
+    globalFilter: "",
+    setGlobalFilter: vi.fn(),
+    pagination: { pageIndex: 0, pageSize: 10 },
+    setPagination: vi.fn(),
+    selectedRows: [],
+    resetFilters: vi.fn(),
+    resetSelection: vi.fn(),
+    resetAll: vi.fn(),
+    exportData: vi.fn(() => []),
+    getGroupedData: vi.fn(() => []),
+    getExpandedData: vi.fn(() => []),
+    toggleGrouping: vi.fn(),
+    clearGrouping: vi.fn(),
+    toggleRowExpansion: vi.fn(),
+    expandAll: vi.fn(),
+    collapseAll: vi.fn(),
+  }),
+}))
+
+vi.mock("../hooks/useDataTableVirtualization", () => ({
+  useDataTableVirtualization: () => ({
+    isVirtualized: false,
+    virtualItems: [],
+    totalSize: 0,
+    scrollToIndex: vi.fn(),
+    scrollToOffset: vi.fn(),
+  }),
+}))
+
+vi.mock("../hooks/useDataTableExport", () => ({
+  useDataTableExport: () => ({
+    exportData: vi.fn(),
+    exportAll: vi.fn(),
+    exportSelected: vi.fn(),
+    supportedFormats: ["csv", "json"],
+    isExportSupported: vi.fn(() => true),
+  }),
+}))
+
+vi.mock("../hooks/useDataTableImport", () => ({
+  useDataTableImport: () => ({
+    importData: vi.fn(),
+    importWithUI: vi.fn(),
+    supportedFormats: [".csv", ".json"],
+    isFormatSupported: vi.fn(() => true),
+  }),
+}))
+
+vi.mock("../hooks/useDataTableTheme", () => ({
+  useDataTableTheme: () => ({
+    theme: {},
+    variantClasses: "w-full border rounded-lg",
+    densityClasses: {
+      table: "text-sm",
+      header: "px-4 py-3",
+      cell: "px-4 py-3",
+    },
+    customStyles: {},
+    getThemedClass: vi.fn((cls) => cls),
+    getThemedStyles: vi.fn(() => ({})),
+  }),
+}))
+
+vi.mock("../hooks/useTableLayout", () => ({
+  useTableLayout: () => ({
+    layout: "standard",
+    setLayout: vi.fn(),
+    density: "comfortable",
+    setDensity: vi.fn(),
+    densityClasses: {
+      table: "text-sm",
+      header: "px-4 py-3",
+      cell: "px-4 py-3",
+    },
+  }),
+}))
+
+vi.mock("../hooks/useDataTableEdit", () => ({
+  useDataTableEdit: () => [
+    {
+      editingRowId: null,
+      hasChanges: false,
+    },
+    {
+      startEdit: vi.fn(),
+      saveEdit: vi.fn(),
+      cancelEdit: vi.fn(),
+      updateField: vi.fn(),
+    },
+  ],
+}))
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: any) => {
+      const translations: Record<string, string> = {
+        "datatable.loading": "Loading...",
+        "datatable.noData": "No data",
+        "datatable.noDataDescription": "There are no results to display",
+        "datatable.selectAll": "Select all",
+        "datatable.selectRow": "Select row",
+        "datatable.actions": "Actions",
+        "datatable.save": "Save",
+        "datatable.cancel": "Cancel",
+        "datatable.edit": "Edit",
+      }
+      return translations[key] || key
+    },
+  }),
+}))
+
+describe("DataTableAdvanced", () => {
+  const mockData = [
+    { id: 1, name: "John Doe", email: "john@example.com" },
+    { id: 2, name: "Jane Smith", email: "jane@example.com" },
+  ]
+
+  const mockColumns: ColumnDef<any>[] = [
+    {
+      accessorKey: "name",
+      header: "Name",
+    },
+    {
+      accessorKey: "email",
+      header: "Email",
+    },
+  ]
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("should render the table with data", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+    expect(screen.getByText("Email")).toBeInTheDocument()
+  })
+
+  it("should show loading state", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        loading={true}
+      />
+    )
+
+    expect(screen.getByText("Loading...")).toBeInTheDocument()
+  })
+
+  it("should show error state", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        error="Something went wrong"
+      />
+    )
+
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument()
+  })
+
+  it("should show empty state when no data", () => {
+    render(
+      <DataTableAdvanced
+        data={[]}
+        columns={mockColumns}
+      />
+    )
+
+    expect(screen.getByText("No data")).toBeInTheDocument()
+    expect(screen.getByText("There are no results to display")).toBeInTheDocument()
+  })
+
+  it("should render with selection enabled", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        selection="multiple"
+      />
+    )
+
+    // Vérifier que les checkboxes de sélection sont présentes
+    const checkboxes = screen.getAllByRole("checkbox")
+    expect(checkboxes).toHaveLength(3) // 1 pour "select all" + 2 pour les lignes
+  })
+
+  it("should render with grouping enabled", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        grouping={{
+          columns: ["name"],
+          showTotals: true,
+        }}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  it("should render with row expansion enabled", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        rowExpansion={{
+          enabled: true,
+          renderExpanded: (row) => <div>Expanded content for {row.name}</div>,
+        }}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  it("should render with virtualization enabled", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        virtualization={{
+          type: "dynamic",
+          estimatedItemHeight: 60,
+        }}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  it("should render with custom theme", () => {
+    const customTheme = {
+      colors: {
+        primary: "#3b82f6",
+        secondary: "#64748b",
+      },
+      spacing: {
+        md: "1.5rem",
+      },
+    }
+
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        theme={customTheme}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  it("should handle row clicks", () => {
+    const onRowClick = vi.fn()
+
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        onRowClick={onRowClick}
+      />
+    )
+
+    // Simuler un clic sur une ligne
+    const rows = screen.getAllByRole("row")
+    fireEvent.click(rows[1]) // Première ligne de données
+
+    expect(onRowClick).toHaveBeenCalledWith(mockData[0])
+  })
+
+  it("should handle double clicks", () => {
+    const onRowDoubleClick = vi.fn()
+
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        onRowDoubleClick={onRowDoubleClick}
+      />
+    )
+
+    // Simuler un double-clic sur une ligne
+    const rows = screen.getAllByRole("row")
+    fireEvent.doubleClick(rows[1]) // Première ligne de données
+
+    expect(onRowDoubleClick).toHaveBeenCalledWith(mockData[0])
+  })
+
+  it("should render with export functionality", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        enableExport={{
+          formats: ["csv", "json"],
+          filename: "export",
+        }}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  it("should render with import functionality", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        enableImport={{
+          accept: ".csv,.json",
+        }}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  it("should render with edit functionality", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        edit={{
+          editableColumns: [
+            {
+              field: "name",
+              config: {
+                type: "text",
+                placeholder: "Enter name",
+              },
+            },
+          ],
+        }}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+
+  it("should render with performance options", () => {
+    render(
+      <DataTableAdvanced
+        data={mockData}
+        columns={mockColumns}
+        performance={{
+          disableAnimations: true,
+          renderLimit: 100,
+          filterDebounceMs: 500,
+        }}
+      />
+    )
+
+    expect(screen.getByText("Name")).toBeInTheDocument()
+  })
+})