@wakastellar/ui 2.0.0 → 2.1.1

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

@@ -0,0 +1,329 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { DataTable } from "../DataTable"
+import { ColumnDef } from "@tanstack/react-table"
+
+// Mock des composants UI
+vi.mock("../ui/button", () => ({
+  Button: ({ children, onClick, disabled, ...props }: any) => (
+    <button onClick={onClick} disabled={disabled} {...props}>
+      {children}
+    </button>
+  ),
+}))
+
+vi.mock("../ui/input", () => ({
+  Input: ({ value, onChange, onKeyDown, ...props }: any) => (
+    <input
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      {...props}
+    />
+  ),
+}))
+
+vi.mock("../ui/checkbox", () => ({
+  Checkbox: ({ checked, onCheckedChange, ...props }: any) => (
+    <input
+      type="checkbox"
+      checked={checked}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      {...props}
+    />
+  ),
+}))
+
+// Types de test
+interface TestUser {
+  id: string
+  name: string
+  email: string
+  age: number
+  active: boolean
+}
+
+const testData: TestUser[] = [
+  { id: "1", name: "John Doe", email: "john@example.com", age: 30, active: true },
+  { id: "2", name: "Jane Smith", email: "jane@example.com", age: 25, active: false },
+]
+
+const testColumns: ColumnDef<TestUser>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "email", header: "Email" },
+  { accessorKey: "age", header: "Age" },
+  { accessorKey: "active", header: "Active" },
+]
+
+describe("DataTable Edit Mode", () => {
+  const mockOnSave = vi.fn()
+  const mockOnCancel = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("should render edit button when edit mode is enabled", () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "name" as keyof TestUser,
+          config: { type: "text" as const },
+        },
+      ],
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    expect(screen.getAllByText("Edit")).toHaveLength(2)
+  })
+
+  it("should start editing when edit button is clicked", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "name" as keyof TestUser,
+          config: { type: "text" as const },
+        },
+      ],
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("John Doe")).toBeInTheDocument()
+    })
+  })
+
+  it("should show save and cancel buttons when editing", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "name" as keyof TestUser,
+          config: { type: "text" as const },
+        },
+      ],
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      expect(screen.getByText("Save")).toBeInTheDocument()
+      expect(screen.getByText("Cancel")).toBeInTheDocument()
+    })
+  })
+
+  it("should call onSave when save button is clicked", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "name" as keyof TestUser,
+          config: { type: "text" as const },
+        },
+      ],
+      onSave: mockOnSave,
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      expect(screen.getByText("Save")).toBeInTheDocument()
+    })
+
+    const saveButton = screen.getByText("Save")
+    fireEvent.click(saveButton)
+
+    await waitFor(() => {
+      expect(mockOnSave).toHaveBeenCalledWith("1", { name: "John Doe" })
+    })
+  })
+
+  it("should call onCancel when cancel button is clicked", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "name" as keyof TestUser,
+          config: { type: "text" as const },
+        },
+      ],
+      onCancel: mockOnCancel,
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      expect(screen.getByText("Cancel")).toBeInTheDocument()
+    })
+
+    const cancelButton = screen.getByText("Cancel")
+    fireEvent.click(cancelButton)
+
+    await waitFor(() => {
+      expect(mockOnCancel).toHaveBeenCalledWith("1", testData[0])
+    })
+  })
+
+  it("should update field value when input changes", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "name" as keyof TestUser,
+          config: { type: "text" as const },
+        },
+      ],
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      const input = screen.getByDisplayValue("John Doe")
+      fireEvent.change(input, { target: { value: "John Updated" } })
+      expect(input).toHaveValue("John Updated")
+    })
+  })
+
+  it("should handle checkbox editing", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "active" as keyof TestUser,
+          config: { type: "checkbox" as const },
+        },
+      ],
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      const checkbox = screen.getByRole("checkbox")
+      expect(checkbox).toBeChecked()
+    })
+  })
+
+  it("should validate field input", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "email" as keyof TestUser,
+          config: { type: "email" as const },
+          validate: (value: string) => {
+            if (!value.includes("@")) return "Invalid email"
+            return null
+          },
+        },
+      ],
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      const input = screen.getByDisplayValue("john@example.com")
+      fireEvent.change(input, { target: { value: "invalid-email" } })
+      // Note: La validation serait testée dans le composant DataTableEditCell
+    })
+  })
+
+  it("should handle auto-save when enabled", async () => {
+    const editConfig = {
+      editableColumns: [
+        {
+          field: "name" as keyof TestUser,
+          config: { type: "text" as const },
+        },
+      ],
+      autoSave: true,
+      autoSaveDelay: 100,
+      onSave: mockOnSave,
+    }
+
+    render(
+      <DataTable
+        data={testData}
+        columns={testColumns}
+        edit={editConfig}
+      />
+    )
+
+    const editButtons = screen.getAllByText("Edit")
+    fireEvent.click(editButtons[0])
+
+    await waitFor(() => {
+      const input = screen.getByDisplayValue("John Doe")
+      fireEvent.change(input, { target: { value: "John Updated" } })
+    })
+
+    // Attendre l'auto-save
+    await waitFor(() => {
+      expect(mockOnSave).toHaveBeenCalled()
+    }, { timeout: 1000 })
+  })
+})