@etus/ui 0.1.0

package/src/components/workflow/TaskList/TaskList.test.tsx

@@ -0,0 +1,318 @@
+import type { TaskItem } from "./TaskList.types"
+
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+
+import { TaskList } from "./TaskList"
+
+const mockTasks: TaskItem[] = [
+  {
+    id: "1",
+    title: "Task 1",
+    description: "First task description",
+    status: "todo",
+    priority: "high",
+  },
+  {
+    id: "2",
+    title: "Task 2",
+    description: "Second task description",
+    status: "in-progress",
+    priority: "medium",
+  },
+  {
+    id: "3",
+    title: "Task 3",
+    status: "done",
+    priority: "low",
+    tags: ["tag1", "tag2"],
+  },
+]
+
+describe("TaskList", () => {
+  describe("Rendering", () => {
+    it("renders all tasks", () => {
+      render(<TaskList tasks={mockTasks} />)
+
+      expect(screen.getByText("Task 1")).toBeInTheDocument()
+      expect(screen.getByText("Task 2")).toBeInTheDocument()
+      expect(screen.getByText("Task 3")).toBeInTheDocument()
+    })
+
+    it("renders with title", () => {
+      render(<TaskList tasks={mockTasks} title="My Tasks" />)
+
+      expect(screen.getByText("My Tasks")).toBeInTheDocument()
+    })
+
+    it("renders task descriptions", () => {
+      render(<TaskList tasks={mockTasks} />)
+
+      expect(screen.getByText("First task description")).toBeInTheDocument()
+      expect(screen.getByText("Second task description")).toBeInTheDocument()
+    })
+
+    it("renders priority badges", () => {
+      render(<TaskList tasks={mockTasks} />)
+
+      expect(screen.getByText("High")).toBeInTheDocument()
+      expect(screen.getByText("Medium")).toBeInTheDocument()
+      expect(screen.getByText("Low")).toBeInTheDocument()
+    })
+
+    it("renders tags", () => {
+      render(<TaskList tasks={mockTasks} />)
+
+      expect(screen.getByText("tag1")).toBeInTheDocument()
+      expect(screen.getByText("tag2")).toBeInTheDocument()
+    })
+
+    it("applies correct data-slot attributes", () => {
+      render(<TaskList tasks={mockTasks} title="Test" />)
+
+      expect(screen.getByRole("list")).toHaveAttribute("data-slot", "task-list")
+      expect(screen.getByText("Test")).toHaveAttribute(
+        "data-slot",
+        "task-list-title"
+      )
+    })
+  })
+
+  describe("Empty State", () => {
+    it("shows default empty message when no tasks", () => {
+      render(<TaskList tasks={[]} />)
+
+      expect(screen.getByText("No tasks to display")).toBeInTheDocument()
+    })
+
+    it("shows custom empty content", () => {
+      render(<TaskList empty={<div>Custom empty message</div>} tasks={[]} />)
+
+      expect(screen.getByText("Custom empty message")).toBeInTheDocument()
+    })
+  })
+
+  describe("Loading State", () => {
+    it("shows loading skeleton when loading", () => {
+      render(<TaskList loading tasks={[]} />)
+
+      const skeletons = document.querySelectorAll('[data-slot="task-list-skeleton"]')
+      expect(skeletons.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe("Selection", () => {
+    it("allows selection when selectable is true", async () => {
+      const user = userEvent.setup()
+      const onSelect = vi.fn()
+
+      render(<TaskList selectable tasks={mockTasks} onSelect={onSelect} />)
+
+      await user.click(screen.getByText("Task 1"))
+
+      expect(onSelect).toHaveBeenCalledWith([mockTasks[0]])
+    })
+
+    it("toggles selection on click", async () => {
+      const user = userEvent.setup()
+      const onSelect = vi.fn()
+
+      render(<TaskList selectable tasks={mockTasks} onSelect={onSelect} />)
+
+      // Select
+      await user.click(screen.getByText("Task 1"))
+      expect(onSelect).toHaveBeenLastCalledWith([mockTasks[0]])
+
+      // Deselect
+      await user.click(screen.getByText("Task 1"))
+      expect(onSelect).toHaveBeenLastCalledWith([])
+    })
+
+    it("supports multi-selection", async () => {
+      const user = userEvent.setup()
+      const onSelect = vi.fn()
+
+      render(<TaskList selectable tasks={mockTasks} onSelect={onSelect} />)
+
+      await user.click(screen.getByText("Task 1"))
+      await user.click(screen.getByText("Task 2"))
+
+      expect(onSelect).toHaveBeenLastCalledWith([mockTasks[0], mockTasks[1]])
+    })
+  })
+
+  describe("Task Click", () => {
+    it("calls onTaskClick when task is clicked", async () => {
+      const user = userEvent.setup()
+      const onTaskClick = vi.fn()
+
+      render(<TaskList tasks={mockTasks} onTaskClick={onTaskClick} />)
+
+      await user.click(screen.getByText("Task 1"))
+
+      expect(onTaskClick).toHaveBeenCalledWith(mockTasks[0])
+    })
+  })
+
+  describe("Keyboard Navigation", () => {
+    it("selects task with spacebar", async () => {
+      const user = userEvent.setup()
+      const onSelect = vi.fn()
+
+      render(<TaskList selectable tasks={mockTasks} onSelect={onSelect} />)
+
+      const firstItem = screen.getByText("Task 1").closest('[role="listitem"]')
+      if (firstItem instanceof HTMLElement) {
+        firstItem.focus()
+        await user.keyboard(" ")
+        expect(onSelect).toHaveBeenCalled()
+      }
+    })
+
+    it("calls onTaskClick with Enter key", async () => {
+      const user = userEvent.setup()
+      const onTaskClick = vi.fn()
+
+      render(<TaskList tasks={mockTasks} onTaskClick={onTaskClick} />)
+
+      const firstItem = screen.getByText("Task 1").closest('[role="listitem"]')
+      if (firstItem instanceof HTMLElement) {
+        firstItem.focus()
+        await user.keyboard("{Enter}")
+        expect(onTaskClick).toHaveBeenCalledWith(mockTasks[0])
+      }
+    })
+  })
+
+  describe("Filtering", () => {
+    it("shows filter controls when filterable is true", () => {
+      render(<TaskList filterable tasks={mockTasks} title="Tasks" />)
+
+      expect(screen.getByLabelText("Filter by status")).toBeInTheDocument()
+    })
+
+    it("filters tasks by status", async () => {
+      const user = userEvent.setup()
+
+      render(<TaskList filterable tasks={mockTasks} title="Tasks" />)
+
+      const filterSelect = screen.getByLabelText("Filter by status")
+      await user.selectOptions(filterSelect, "todo")
+
+      expect(screen.getByText("Task 1")).toBeInTheDocument()
+      expect(screen.queryByText("Task 2")).not.toBeInTheDocument()
+      expect(screen.queryByText("Task 3")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("Sorting", () => {
+    it("shows sort controls when sortable is true", () => {
+      render(<TaskList sortable tasks={mockTasks} title="Tasks" />)
+
+      expect(screen.getByLabelText("Sort by")).toBeInTheDocument()
+    })
+
+    it("sorts tasks by selected field", async () => {
+      const user = userEvent.setup()
+
+      render(<TaskList sortable tasks={mockTasks} title="Tasks" />)
+
+      const sortSelect = screen.getByLabelText("Sort by")
+      await user.selectOptions(sortSelect, "priority")
+
+      // Priority order: urgent > high > medium > low
+      const items = screen.getAllByRole("listitem")
+      expect(items[0]).toHaveTextContent("Task 1") // high
+      expect(items[1]).toHaveTextContent("Task 2") // medium
+      expect(items[2]).toHaveTextContent("Task 3") // low
+    })
+  })
+
+  describe("Grouping", () => {
+    it("groups tasks by status", () => {
+      render(<TaskList groupBy="status" tasks={mockTasks} />)
+
+      expect(screen.getByText(/To Do \(1\)/)).toBeInTheDocument()
+      expect(screen.getByText(/In Progress \(1\)/)).toBeInTheDocument()
+      expect(screen.getByText(/Done \(1\)/)).toBeInTheDocument()
+    })
+
+    it("groups tasks by priority", () => {
+      render(<TaskList groupBy="priority" tasks={mockTasks} />)
+
+      expect(screen.getByText(/High \(1\)/)).toBeInTheDocument()
+      expect(screen.getByText(/Medium \(1\)/)).toBeInTheDocument()
+      expect(screen.getByText(/Low \(1\)/)).toBeInTheDocument()
+    })
+  })
+
+  describe("Variants", () => {
+    it("renders default variant", () => {
+      render(<TaskList tasks={mockTasks} variant="default" />)
+
+      const list = screen.getByRole("list")
+      expect(list).toHaveAttribute("data-slot", "task-list")
+    })
+
+    it("renders compact variant", () => {
+      render(<TaskList tasks={mockTasks} variant="compact" />)
+
+      const list = screen.getByRole("list")
+      expect(list).toBeInTheDocument()
+    })
+
+    it("renders grouped variant", () => {
+      render(<TaskList tasks={mockTasks} variant="grouped" />)
+
+      const list = screen.getByRole("list")
+      expect(list).toBeInTheDocument()
+    })
+  })
+
+  describe("Sizes", () => {
+    it("renders small size", () => {
+      render(<TaskList size="sm" tasks={mockTasks} />)
+
+      expect(screen.getByRole("list")).toBeInTheDocument()
+    })
+
+    it("renders default size", () => {
+      render(<TaskList size="default" tasks={mockTasks} />)
+
+      expect(screen.getByRole("list")).toBeInTheDocument()
+    })
+
+    it("renders large size", () => {
+      render(<TaskList size="lg" tasks={mockTasks} />)
+
+      expect(screen.getByRole("list")).toBeInTheDocument()
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("has correct ARIA attributes", () => {
+      render(<TaskList tasks={mockTasks} title="Accessible Tasks" />)
+
+      const list = screen.getByRole("list")
+      expect(list).toHaveAttribute("aria-label", "Accessible Tasks")
+      expect(list).toHaveAttribute("aria-live", "polite")
+    })
+
+    it("marks items as listitem role", () => {
+      render(<TaskList tasks={mockTasks} />)
+
+      const items = screen.getAllByRole("listitem")
+      expect(items).toHaveLength(3)
+    })
+
+    it("indicates selection state with aria-selected", () => {
+      render(<TaskList selectable tasks={mockTasks} />)
+
+      const items = screen.getAllByRole("listitem")
+      items.forEach((item) => {
+        expect(item).toHaveAttribute("aria-selected", "false")
+      })
+    })
+  })
+})