@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

@@ -1,329 +0,0 @@
-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 })
-  })
-})