Create TaskBox tests

TaskBox tests were included in the TaskList, since the component is
growing in complexity it should have it's own tests.

frontend/src/app/tasks/__tests__/components/TaskBox.test.tsx

@@ -0,0 +1,100 @@
+import { renderWithUser, screen } from '@/test-utils/test-utils'
+import { TaskBox } from '../../components/TaskBox'
+import { useDeleteTask } from '../../hooks/useDeleteTask'
+import { useCreateTaskForm } from '../../hooks/useCreateTaskForm'
+
+jest.mock('../../hooks/useDeleteTask')
+jest.mock('../../hooks/useCreateTaskForm')
+
+const setupTaskBox = () => {
+  const task = {
+    date: '2023-11-01',
+    story: 'task story',
+    description: 'task description',
+    taskType: 'task type one',
+    projectId: 1,
+    userId: 4,
+    startTime: '11:12',
+    endTime: '11:14',
+    id: 18,
+    projectName: 'Holidays',
+    customerName: 'Internal'
+  }
+
+  return renderWithUser(<TaskBox projects={[]} taskTypes={[]} task={task} />)
+}
+
+describe('TaskBox', () => {
+  beforeEach(() => {
+    ;(useDeleteTask as jest.Mock).mockReturnValue({ removeTask: () => {} })
+    ;(useCreateTaskForm as jest.Mock).mockReturnValue({ cloneTask: () => {} })
+  })
+
+  it('Shows the task info', () => {
+    setupTaskBox()
+
+    expect(screen.getByText('Holidays - Internal')).toBeInTheDocument()
+    expect(screen.getByText('task type one')).toBeInTheDocument()
+    expect(screen.getByText('11:12-11:14 (0h 2m)')).toBeInTheDocument()
+  })
+
+  describe('Clicking expand Button', () => {
+    it('shows the complete task information', async () => {
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Expand Task' }))
+
+      expect(screen.getByText('task description')).toBeInTheDocument()
+      expect(screen.getByText('task story')).toBeInTheDocument()
+    })
+  })
+
+  describe('Clicking delete button', () => {
+    it('Opens the delete confirmation modal', async () => {
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
+
+      expect(screen.getByRole('heading', { name: 'Confirm Deletion' })).toBeInTheDocument()
+    })
+
+    it('deletes the task from the list', async () => {
+      const deleteTask = jest.fn()
+      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
+
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
+
+      await user.click(screen.getByRole('button', { name: 'Delete' }))
+
+      expect(deleteTask).toBeCalledWith(18)
+    })
+
+    it('closes the modal without submit if cancel is clicked', async () => {
+      const deleteTask = jest.fn()
+      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
+
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
+
+      await user.click(screen.getByRole('button', { name: 'Cancel' }))
+
+      expect(deleteTask).not.toBeCalled()
+    })
+  })
+
+  describe('Clicking clone task button', () => {
+    it('calls the clone task function', async () => {
+      const cloneTask = jest.fn()
+      ;(useCreateTaskForm as jest.Mock).mockReturnValue({ cloneTask })
+
+      const { user } = setupTaskBox()
+
+      await user.click(screen.getByRole('button', { name: 'Clone Task' }))
+
+      expect(cloneTask).toBeCalled()
+    })
+  })
+})

frontend/src/app/tasks/__tests__/components/TaskList.test.tsx

@@ -1,5 +1,5 @@
 import { TaskList } from '../../components/TaskList'
-import { screen, renderWithUser, within } from '@/test-utils/test-utils'
+import { screen, renderWithUser } from '@/test-utils/test-utils'
 import { useGetTasks } from '../../hooks/useGetTasks'
 import { useDeleteTask } from '../../hooks/useDeleteTask'
 import { Task } from '@/domain/Task'
@@ -47,62 +47,11 @@ describe('TaskList', () => {
     ;(useDeleteTask as jest.Mock).mockReturnValue({ removeTask: () => {} })
   })
 
-  it('renders a list of tasks with name, customer name, task type and the task duration', () => {
+  it('renders a list of tasks', () => {
     setupTaskList()
 
     const listItems = screen.getAllByRole('listitem')
 
     expect(listItems.length).toBe(2)
-
-    listItems.forEach((item, index) => {
-      const { getByText } = within(item)
-      const task = tasks[index]
-
-      const timeDifference = index === 0 ? '0h 2m' : '2h 2m'
-
-      expect(getByText(`${task.projectName} - ${task.customerName}`)).toBeInTheDocument()
-      expect(getByText(`${task.taskType}`)).toBeInTheDocument()
-      expect(
-        getByText(`${task.startTime}-${task.endTime} (${timeDifference})`, {
-          exact: false
-        })
-      ).toBeInTheDocument()
-    })
-  })
-
-  describe('When the trash icon is clicked', () => {
-    it('opens the delete confirmation modal', async () => {
-      const { user } = setupTaskList()
-
-      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
-
-      expect(screen.getByRole('heading', { name: 'Confirm Deletion' })).toBeInTheDocument()
-    })
-
-    it('deletes the task from the list', async () => {
-      const deleteTask = jest.fn()
-      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
-
-      const { user } = setupTaskList()
-
-      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
-
-      await user.click(screen.getByRole('button', { name: 'Delete' }))
-
-      expect(deleteTask).toBeCalledWith(18)
-    })
-
-    it('closes the modal without submit if cancel is clicked', async () => {
-      const deleteTask = jest.fn()
-      ;(useDeleteTask as jest.Mock).mockReturnValue({ deleteTask })
-
-      const { user } = setupTaskList()
-
-      await user.click(screen.getByRole('button', { name: 'Delete task 18' }))
-
-      await user.click(screen.getByRole('button', { name: 'Cancel' }))
-
-      expect(deleteTask).not.toBeCalled()
-    })
   })
 })