test: test components

app/auth/components/sign-in-button.spec.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react'
+
+import { SignInButton } from './sign-in-button'
+
+describe('SignInButton', () => {
+  test('should match snapshot', () => {
+    const view = render(<SignInButton />)
+
+    expect(view).toMatchSnapshot()
+  })
+})

app/board/components/misc/calendar-presets.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent, type UserEvent } from '@testing-library/user-event'
+
+import { CalendarPresets } from './calendar-presets'
+
+import { nextWeek, now, tomorrow } from '@app/board/helpers/date'
+
+describe('CalendarPresets', () => {
+  const setValueSpy = vi.fn()
+
+  let user: UserEvent
+
+  beforeEach(() => {
+    user = userEvent.setup()
+  })
+
+  test('should set today value', async () => {
+    render(<CalendarPresets value={tomorrow} setValue={setValueSpy} />)
+
+    await user.click(screen.getByText('Today'))
+
+    expect(setValueSpy).toHaveBeenCalledWith(now)
+  })
+
+  test('should set tomorrow value', async () => {
+    render(<CalendarPresets value={now} setValue={setValueSpy} />)
+
+    await user.click(screen.getByText('Tomorrow'))
+
+    expect(setValueSpy).toHaveBeenCalledWith(tomorrow)
+  })
+
+  test('should set next week value', async () => {
+    render(<CalendarPresets value={now} setValue={setValueSpy} />)
+
+    await user.click(screen.getByText('Next week'))
+
+    expect(setValueSpy).toHaveBeenCalledWith(nextWeek)
+  })
+})

app/board/components/tasks/reschedule-overdue-tasks.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent, type UserEvent } from '@testing-library/user-event'
+
+import { RescheduleOverdueTasks } from './reschedule-overdue-tasks'
+
+import { useTasksBoard } from '@app/board/context'
+
+vi.mock('@app/board/context')
+
+describe('RescheduleOverdueTasks', () => {
+  const rescheduleOverdueTasksSpy = vi.fn().mockResolvedValue(undefined)
+  let user: UserEvent
+
+  beforeEach(() => {
+    user = userEvent.setup()
+
+    vi.mocked(useTasksBoard).mockReturnValue({
+      rescheduleOverdueTasks: rescheduleOverdueTasksSpy,
+    } as unknown as ReturnType<typeof useTasksBoard>)
+  })
+
+  test('should render', () => {
+    render(<RescheduleOverdueTasks />)
+
+    expect(screen.getByText('Reschedule')).toBeInTheDocument()
+  })
+
+  test('should show calendar on click', async () => {
+    render(<RescheduleOverdueTasks />)
+
+    expect(screen.queryByText('Today')).not.toBeInTheDocument()
+
+    await user.click(screen.getByText('Reschedule'))
+
+    expect(screen.getByText('Today')).toBeInTheDocument()
+  })
+
+  test('should call rescheduleOverdueTasks on click', async () => {
+    render(<RescheduleOverdueTasks />)
+
+    await user.click(screen.getByText('Reschedule'))
+    await user.click(screen.getByText('Today'))
+
+    expect(rescheduleOverdueTasksSpy).toHaveBeenCalled()
+  })
+})

app/board/components/tasks/reschedule-overdue-tasks.tsx

@@ -18,9 +18,7 @@ export function RescheduleOverdueTasks() {
 
   useEffect(() => {
     if (dueDateValue) {
-      rescheduleOverdueTasks(dueDateValue).catch((error: unknown) => {
-        console.error(error)
-      })
+      void rescheduleOverdueTasks(dueDateValue)
       setDueDateValue(undefined)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

app/board/components/tasks/show-done-tasks-checkbox.spec.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+import { useRouter } from 'next/navigation'
+import userEvent from '@testing-library/user-event'
+
+import { ShowDoneTasksCheckbox } from './show-done-tasks-checkbox'
+
+vi.mock('next/navigation')
+
+describe('ShowDoneTasksCheckbox', () => {
+  test('should match snapshot as unselected', () => {
+    const view = render(<ShowDoneTasksCheckbox showDone={false} />)
+
+    expect(view).toMatchSnapshot()
+  })
+
+  test('should match snapshot as selected', () => {
+    const view = render(<ShowDoneTasksCheckbox showDone={true} />)
+
+    expect(view).toMatchSnapshot()
+  })
+
+  test('should call route.push on value change', async () => {
+    const pushSpy = vi.fn()
+    const user = userEvent.setup()
+
+    vi.mocked(useRouter).mockReturnValue({
+      push: pushSpy,
+    } as unknown as ReturnType<typeof useRouter>)
+
+    render(<ShowDoneTasksCheckbox showDone={false} />)
+
+    await user.click(screen.getByText('Show done tasks'))
+
+    expect(pushSpy).toHaveBeenCalledWith('/board?show-done=true')
+  })
+})

app/board/components/tasks/tasks-list.spec.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react'
+import { mock } from 'vitest-mock-extended'
+import type { Task } from '@prisma/client'
+import { DragDropContext, Droppable } from '@hello-pangea/dnd'
+import type { ReactNode } from 'react'
+
+import { TasksList } from './tasks-list'
+
+const Wrapper = ({ children }: Readonly<{ children: ReactNode }>) => (
+  <DragDropContext onDragEnd={vi.fn()}>
+    <Droppable droppableId="today">
+      {({ droppableProps, innerRef, placeholder }) => (
+        <div ref={innerRef} {...droppableProps}>
+          {children}
+          {placeholder}
+        </div>
+      )}
+    </Droppable>
+  </DragDropContext>
+)
+
+describe('TasksList', () => {
+  test('should render one task', () => {
+    const header = 'Today'
+    const taskName = 'Task 1'
+
+    const tasks = [
+      mock<Task>({
+        name: taskName,
+        dueDate: null,
+        id: '1',
+      }),
+    ]
+
+    render(<TasksList header={header} tasks={tasks} />, {
+      wrapper: Wrapper,
+    })
+
+    expect(screen.getByText(header)).toBeInTheDocument()
+    expect(screen.getByText(taskName)).toBeInTheDocument()
+    expect(screen.getByText('1 task')).toBeInTheDocument()
+  })
+
+  test('should render multiple tasks', () => {
+    const header = 'Today'
+    const taskName = 'Task 1'
+    const taskName2 = 'Task 2'
+
+    const tasks = [
+      mock<Task>({
+        name: taskName,
+        dueDate: null,
+        id: '1',
+      }),
+      mock<Task>({
+        name: taskName2,
+        dueDate: null,
+        id: '2',
+      }),
+    ]
+
+    render(<TasksList header={header} tasks={tasks} />, {
+      wrapper: Wrapper,
+    })
+
+    expect(screen.getByText(header)).toBeInTheDocument()
+    expect(screen.getByText(taskName)).toBeInTheDocument()
+    expect(screen.getByText(taskName2)).toBeInTheDocument()
+    expect(screen.getByText('2 tasks')).toBeInTheDocument()
+  })
+
+  test('should render with RescheduleOverdueTasks', () => {
+    const header = 'Overdue'
+    const taskName = 'Task 1'
+    const taskName2 = 'Task 2'
+
+    const tasks = [
+      mock<Task>({
+        name: taskName,
+        dueDate: null,
+        id: '1',
+      }),
+      mock<Task>({
+        name: taskName2,
+        dueDate: null,
+        id: '2',
+      }),
+    ]
+
+    render(
+      <TasksList header={header} tasks={tasks} />,
+
+      {
+        wrapper: Wrapper,
+      }
+    )
+
+    expect(screen.getByText(header)).toBeInTheDocument()
+    expect(screen.getByText(taskName)).toBeInTheDocument()
+    expect(screen.getByText(taskName2)).toBeInTheDocument()
+    expect(screen.getByText('2 tasks')).toBeInTheDocument()
+    expect(screen.getByText('Reschedule')).toBeInTheDocument()
+  })
+})