diff --git a/components/task-list.tsx b/components/task-list.tsx index 5bb18ab..c4d6a7a 100644 --- a/components/task-list.tsx +++ b/components/task-list.tsx @@ -8,7 +8,8 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Checkbox } from "@/components/ui/checkbox" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" -import { MoreHorizontal, Clock, Edit, Trash2 } from "lucide-react" +import { Input } from "@/components/ui/input" +import { MoreHorizontal, Clock, Edit, Trash2, Search } from "lucide-react" import { deleteTask, updateTaskStatus } from "@/app/(dashboard)/tasks/actions" import { formatDateForDisplay } from "@/lib/date-utils" import { EditTaskForm } from "./edit-task-form" @@ -22,6 +23,7 @@ type TaskWithProfile = PrismaTask & { export function TaskList({ initialTasks }: { initialTasks: TaskWithProfile[]; }) { const [tasks, setTasks] = useState(initialTasks) + const [searchTerm, setSearchTerm] = useState("") const [optimisticTasks, setOptimisticTasks] = useOptimistic( tasks, (state, { action, task }: { action: "delete" | "toggle"; task: TaskWithProfile | { id: number } }) => { @@ -75,9 +77,32 @@ export function TaskList({ initialTasks }: { initialTasks: TaskWithProfile[]; }) .toUpperCase() } + // Filter tasks based on search term + const filteredTasks = optimisticTasks.filter((task) => { + if (!searchTerm) return true + const lowerSearchTerm = searchTerm.toLowerCase() + return ( + task.name.toLowerCase().includes(lowerSearchTerm) || + (task.description && task.description.toLowerCase().includes(lowerSearchTerm)) + ) + }) + return (
- {optimisticTasks.map((task) => ( + {/* Search Input */} +
+ + setSearchTerm(e.target.value)} + className="pl-10" + /> +
+ + {/* Task List */} + {filteredTasks.map((task) => ( setOpenDialogs(prev => ({ ...prev, [task.id]: open })) }> diff --git a/jest.config.cjs b/jest.config.cjs index 09eb118..be2be38 100644 --- a/jest.config.cjs +++ b/jest.config.cjs @@ -10,7 +10,8 @@ module.exports = { transformIgnorePatterns: ['/node_modules/(?!(.*?))'], moduleNameMapper: { '^@/(.*)$': '/$1', - '\\.(css|less|sass|scss)$': 'identity-obj-proxy' + '\\.(css|less|sass|scss)$': 'identity-obj-proxy', + '^next/font/google$': '/tests/__mocks__/nextFontMock.js' } , setupFilesAfterEnv: ['/jest.setup.ts'], diff --git a/package-lock.json b/package-lock.json index e3ba769..b08e317 100644 --- a/package-lock.json +++ b/package-lock.json @@ -115,7 +115,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -2071,7 +2070,6 @@ "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==", "devOptional": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "playwright": "1.56.1" }, @@ -3312,6 +3310,7 @@ "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "dequal": "^2.0.3" } @@ -3321,7 +3320,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@testing-library/jest-dom": { "version": "6.9.1", @@ -3411,7 +3411,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -3660,7 +3661,6 @@ "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -3671,7 +3671,6 @@ "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==", "devOptional": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.0.0" } @@ -3759,7 +3758,6 @@ "integrity": "sha512-g3WpVQHngx0aLXn6kfIYCZxM6rRJlWzEkVpqEFLT3SgEDsp9cpCbxxgwnE504q4H+ruSDh/VGS6nqZIDynP+vg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.39.0", "@typescript-eslint/types": "8.39.0", @@ -4285,7 +4283,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4871,7 +4868,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -5749,6 +5745,7 @@ "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=6" } @@ -6178,7 +6175,6 @@ "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -6353,7 +6349,6 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -8104,7 +8099,6 @@ "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", @@ -9575,6 +9569,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -10363,7 +10358,6 @@ "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz", "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==", "license": "MIT", - "peer": true, "dependencies": { "pg-connection-string": "^2.9.1", "pg-pool": "^3.10.1", @@ -10699,6 +10693,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -10714,6 +10709,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -10726,7 +10722,8 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/prisma": { "version": "6.13.0", @@ -10735,7 +10732,6 @@ "devOptional": true, "hasInstallScript": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@prisma/config": "6.13.0", "@prisma/engines": "6.13.0" @@ -10880,7 +10876,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -10892,8 +10887,7 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/react-redux": { "version": "9.2.0", @@ -11084,8 +11078,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -12082,7 +12075,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -12370,7 +12362,6 @@ "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==", "devOptional": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/tests/__mocks__/nextFontMock.js b/tests/__mocks__/nextFontMock.js new file mode 100644 index 0000000..d4c51ad --- /dev/null +++ b/tests/__mocks__/nextFontMock.js @@ -0,0 +1,9 @@ +// Mock for next/font/google +module.exports = { + Poppins: () => ({ + className: 'mocked-poppins', + }), + Inter: () => ({ + className: 'mocked-inter', + }), +}; diff --git a/tests/e2e/kanban.spec.ts b/tests/e2e/kanban.spec.ts index d0e760f..46d5f2a 100644 --- a/tests/e2e/kanban.spec.ts +++ b/tests/e2e/kanban.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test' +// import { test, expect } from '@playwright/test' // test.describe('Kanban drag/drop', () => { // test('drags a card fully into another column', async ({ page }) => { diff --git a/tests/e2e/tasks.spec.ts b/tests/e2e/tasks.spec.ts index 21de6e7..49bb531 100644 --- a/tests/e2e/tasks.spec.ts +++ b/tests/e2e/tasks.spec.ts @@ -24,6 +24,39 @@ test.describe('Task CRUD flows', () => { await expect(page.locator('h3', { hasText: title })).toBeVisible(); }); + test('search tasks by title', async ({ page }) => { + // Navigate to tasks page + await page.goto('/tasks'); + + // Wait for tasks to load + await page.waitForSelector('[data-testid^="task-card-"]', { timeout: 5000 }); + + // Get the search input + const searchInput = page.locator('input[placeholder*="Search tasks"]'); + await expect(searchInput).toBeVisible(); + + // Count initial tasks + const initialTaskCount = await page.locator('[data-testid^="task-card-"]').count(); + + // Search for a specific task (assuming there's a task with "Design" in the seeded data) + await searchInput.fill('Design'); + + // Wait a bit for the filter to apply + await page.waitForTimeout(500); + + // Count filtered tasks - should be less than or equal to initial count + const filteredTaskCount = await page.locator('[data-testid^="task-card-"]').count(); + expect(filteredTaskCount).toBeLessThanOrEqual(initialTaskCount); + + // Clear search + await searchInput.clear(); + await page.waitForTimeout(500); + + // Verify all tasks are visible again + const clearedTaskCount = await page.locator('[data-testid^="task-card-"]').count(); + expect(clearedTaskCount).toBe(initialTaskCount); + }); + // test('delete task', async ({ page }) => { // const title = await createTaskViaUI(page, 'E2E Delete'); diff --git a/tests/unit/task-list-search.test.tsx b/tests/unit/task-list-search.test.tsx new file mode 100644 index 0000000..7c7ef85 --- /dev/null +++ b/tests/unit/task-list-search.test.tsx @@ -0,0 +1,144 @@ +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { TaskList } from '@/components/task-list'; +import { Task, User } from '@/app/generated/prisma/client'; + +// Mock server actions +jest.mock('@/app/(dashboard)/tasks/actions', () => ({ + deleteTask: jest.fn(), + updateTaskStatus: jest.fn(), +})); + +type TaskWithProfile = Task & { + assignee?: Pick | null; +}; + +describe('TaskList Search Functionality', () => { + const mockTasks: TaskWithProfile[] = [ + { + id: 1, + name: 'Implement login feature', + description: 'Add authentication to the app', + status: 'todo', + priority: 'high', + dueDate: new Date('2024-12-31'), + creatorId: 1, + assigneeId: 1, + createdAt: new Date(), + updatedAt: new Date(), + assignee: { name: 'John Doe' }, + }, + { + id: 2, + name: 'Fix navigation bug', + description: 'The menu is not working properly', + status: 'in_progress', + priority: 'medium', + dueDate: new Date('2024-12-25'), + creatorId: 1, + assigneeId: 2, + createdAt: new Date(), + updatedAt: new Date(), + assignee: { name: 'Jane Smith' }, + }, + { + id: 3, + name: 'Update documentation', + description: 'Add API documentation for endpoints', + status: 'done', + priority: 'low', + dueDate: new Date('2024-12-20'), + creatorId: 1, + assigneeId: 1, + createdAt: new Date(), + updatedAt: new Date(), + assignee: { name: 'John Doe' }, + }, + ]; + + it('should display all tasks when search is empty', () => { + render(); + + expect(screen.getByText('Implement login feature')).toBeInTheDocument(); + expect(screen.getByText('Fix navigation bug')).toBeInTheDocument(); + expect(screen.getByText('Update documentation')).toBeInTheDocument(); + }); + + it('should filter tasks by title', async () => { + const user = userEvent.setup(); + render(); + + const searchInput = screen.getByPlaceholderText('Search tasks by title or description...'); + await user.type(searchInput, 'login'); + + await waitFor(() => { + expect(screen.getByText('Implement login feature')).toBeInTheDocument(); + expect(screen.queryByText('Fix navigation bug')).not.toBeInTheDocument(); + expect(screen.queryByText('Update documentation')).not.toBeInTheDocument(); + }); + }); + + it('should filter tasks by description', async () => { + const user = userEvent.setup(); + render(); + + const searchInput = screen.getByPlaceholderText('Search tasks by title or description...'); + await user.type(searchInput, 'API'); + + await waitFor(() => { + expect(screen.queryByText('Implement login feature')).not.toBeInTheDocument(); + expect(screen.queryByText('Fix navigation bug')).not.toBeInTheDocument(); + expect(screen.getByText('Update documentation')).toBeInTheDocument(); + }); + }); + + it('should be case-insensitive', async () => { + const user = userEvent.setup(); + render(); + + const searchInput = screen.getByPlaceholderText('Search tasks by title or description...'); + await user.type(searchInput, 'NAVIGATION'); + + await waitFor(() => { + expect(screen.queryByText('Implement login feature')).not.toBeInTheDocument(); + expect(screen.getByText('Fix navigation bug')).toBeInTheDocument(); + expect(screen.queryByText('Update documentation')).not.toBeInTheDocument(); + }); + }); + + it('should show no tasks when search has no matches', async () => { + const user = userEvent.setup(); + render(); + + const searchInput = screen.getByPlaceholderText('Search tasks by title or description...'); + await user.type(searchInput, 'nonexistent'); + + await waitFor(() => { + expect(screen.queryByText('Implement login feature')).not.toBeInTheDocument(); + expect(screen.queryByText('Fix navigation bug')).not.toBeInTheDocument(); + expect(screen.queryByText('Update documentation')).not.toBeInTheDocument(); + }); + }); + + it('should update results in real-time', async () => { + const user = userEvent.setup(); + render(); + + const searchInput = screen.getByPlaceholderText('Search tasks by title or description...'); + + // Type 'bug' + await user.type(searchInput, 'bug'); + await waitFor(() => { + expect(screen.getByText('Fix navigation bug')).toBeInTheDocument(); + expect(screen.queryByText('Implement login feature')).not.toBeInTheDocument(); + }); + + // Clear and type 'documentation' + await user.clear(searchInput); + await user.type(searchInput, 'documentation'); + await waitFor(() => { + expect(screen.getByText('Update documentation')).toBeInTheDocument(); + expect(screen.queryByText('Fix navigation bug')).not.toBeInTheDocument(); + }); + }); +});