From da3d5ecf00f9b92b468a91152e258d711111634f Mon Sep 17 00:00:00 2001
From: Shiva Gupta <shivascalerite@gmail.com>
Date: Thu, 25 Dec 2025 13:38:24 +0530
Subject: [PATCH] test(AddTaskDialog): Add test suite for AddTaskDialog
 component

- Reorganize tests into logical describe blocks for better readability
- Use test.each for Date Fields to eliminate repetitive test code
- Add comprehensive tests for Annotations
- Add tests for Recur field dropdown selection
- Add tests for Project field create new / select existing flow
- Cover edge cases: empty inputs, whitespace-only, duplicate prevention

Updates: #300
---
 .../HomeComponents/Tasks/AddTaskDialog.tsx    |   1 +
 .../Tasks/__tests__/AddTaskDialog.test.tsx    | 719 ++++++++++++------
 2 files changed, 476 insertions(+), 244 deletions(-)

diff --git a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
index a4c93a83..29309864 100644
--- a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
@@ -427,6 +427,7 @@ export const AddTaskdialog = ({
                       <button
                         type="button"
                         className="ml-2 text-red-500"
+                        aria-label="remove annotation"
                         onClick={() => handleRemoveAnnotation(annotation)}
                       >
                         ✖
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
index 9510365e..d1f875c1 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/AddTaskDialog.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { AddTaskdialog } from '../AddTaskDialog';
 import '@testing-library/jest-dom';
 
@@ -20,6 +20,8 @@ jest.mock('@/components/ui/date-picker', () => ({
       onChange={(e) => {
         if (e.target.value) {
           onDateChange(new Date(e.target.value));
+        } else {
+          onDateChange(null);
         }
       }}
     />
@@ -32,6 +34,7 @@ jest.mock('@/components/ui/select', () => {
       // Create a simple select element that calls onValueChange when changed
       return (
         <select
+          data-testid="project-select"
           value={value || ''}
           onChange={(e) => onValueChange?.(e.target.value)}
         >
@@ -40,9 +43,7 @@ jest.mock('@/components/ui/select', () => {
       );
     },
     SelectTrigger: ({ children, 'data-testid': dataTestId, ...props }: any) => (
-      <div data-testid={dataTestId} {...props}>
-        {children}
-      </div>
+      <div {...props}>{children}</div>
     ),
     SelectValue: ({ placeholder }: any) => (
       <option value="" disabled>
@@ -90,230 +91,347 @@ describe('AddTaskDialog Component', () => {
     };
   });
 
-  test('renders the "Add Task" button', () => {
-    render(<AddTaskdialog {...mockProps} />);
+  describe('Dialog', () => {
+    test('renders the "Add Task" button', () => {
+      render(<AddTaskdialog {...mockProps} />);
 
-    const addButton = screen.getByRole('button', { name: /add task/i });
+      const addButton = screen.getByRole('button', { name: /add task/i });
 
-    expect(addButton).toBeInTheDocument();
-  });
+      expect(addButton).toBeInTheDocument();
+    });
 
-  test('opens dialog when "Add Task" button is clicked', () => {
-    render(<AddTaskdialog {...mockProps} />);
+    test('opens dialog when "Add Task" button is clicked', () => {
+      render(<AddTaskdialog {...mockProps} />);
 
-    const addButton = screen.getByRole('button', { name: /add task/i });
-    fireEvent.click(addButton);
+      const addButton = screen.getByRole('button', { name: /add task/i });
+      fireEvent.click(addButton);
 
-    expect(mockProps.setIsOpen).toHaveBeenCalledWith(true);
-  });
+      expect(mockProps.setIsOpen).toHaveBeenCalledWith(true);
+    });
 
-  test('displays dialog content when isOpen is true', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+    test('displays dialog content when isOpen is true', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
 
-    expect(screen.getByText(/fill in the details below/i)).toBeInTheDocument();
-  });
+      expect(
+        screen.getByText(/fill in the details below/i)
+      ).toBeInTheDocument();
+    });
+
+    test('closes dialog when Cancel button is clicked', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      fireEvent.click(cancelButton);
 
-  test('updates description when user types in input field', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+      expect(mockProps.setIsOpen).toHaveBeenCalledWith(false);
+    });
 
-    const descriptionInput = screen.getByLabelText(/description/i);
+    test('calls onSubmit when "Add Task" button in dialog is clicked', () => {
+      mockProps.isOpen = true;
+      mockProps.newTask = {
+        description: 'Test task',
+        priority: 'H',
+        project: 'Work',
+        due: '2024-12-25',
+        start: '',
+        entry: '2025-12-20',
+        wait: '2025-12-20',
+        end: '',
+        recur: '',
+        tags: ['urgent'],
+        annotations: [],
+        depends: [],
+      };
+      render(<AddTaskdialog {...mockProps} />);
 
-    fireEvent.change(descriptionInput, { target: { value: 'Buy groceries' } });
+      const submitButton = screen.getByRole('button', {
+        name: /add task/i,
+      });
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      description: 'Buy groceries',
+      expect(submitButton).toBeInTheDocument();
+      fireEvent.click(submitButton);
+      expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
     });
   });
 
-  test('updates priority when user selects from dropdown', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+  describe('Description Field', () => {
+    test('updates description when user types in input field', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
 
-    const prioritySelect = screen.getByLabelText(/priority/i);
+      const descriptionInput = screen.getByLabelText(/description/i);
 
-    fireEvent.change(prioritySelect, { target: { value: 'H' } });
+      fireEvent.change(descriptionInput, {
+        target: { value: 'Buy groceries' },
+      });
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      priority: 'H',
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        description: 'Buy groceries',
+      });
     });
   });
 
-  test('updates project when user types in project field', async () => {
-    mockProps.isOpen = true;
-    mockProps.isCreatingNewProject = true;
-    mockProps.newTask = { ...mockProps.newTask, project: '' };
+  describe('Priority Field', () => {
+    test('updates priority when user selects from dropdown', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
 
-    render(<AddTaskdialog {...mockProps} />);
+      const prioritySelect = screen.getByLabelText(/priority/i);
 
-    const newProjectInput =
-      await screen.findByPlaceholderText('New project name');
-    fireEvent.change(newProjectInput, { target: { value: 'Work' } });
+      fireEvent.change(prioritySelect, { target: { value: 'H' } });
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      project: 'Work',
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        priority: 'H',
+      });
     });
-  });
 
-  test('displays project select with unique projects', () => {
-    mockProps.isOpen = true;
-    mockProps.uniqueProjects = ['Work', 'Personal'];
-    render(<AddTaskdialog {...mockProps} />);
+    test('renders all priority options in dropdown', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const prioritySelect = screen.getByLabelText(/priority/i);
 
-    expect(screen.getByText('Work')).toBeInTheDocument();
-    expect(screen.getByText('Personal')).toBeInTheDocument();
+      expect(prioritySelect).toContainHTML('<option value="H">H</option>');
+      expect(prioritySelect).toContainHTML('<option value="M">M</option>');
+      expect(prioritySelect).toContainHTML('<option value="L">L</option>');
+    });
   });
 
-  test('adds a tag when user types and presses Enter', () => {
-    mockProps.isOpen = true;
-    mockProps.tagInput = 'urgent';
-    render(<AddTaskdialog {...mockProps} />);
+  describe('Project Field', () => {
+    test('updates project when user types in project field', async () => {
+      mockProps.isOpen = true;
+      mockProps.isCreatingNewProject = true;
+      mockProps.newTask = { ...mockProps.newTask, project: '' };
 
-    const tagsInput = screen.getByPlaceholderText(/add a tag/i);
+      render(<AddTaskdialog {...mockProps} />);
 
-    fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+      const newProjectInput =
+        await screen.findByPlaceholderText('New project name');
+      fireEvent.change(newProjectInput, { target: { value: 'Work' } });
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      tags: ['urgent'],
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        project: 'Work',
+      });
     });
 
-    expect(mockProps.setTagInput).toHaveBeenCalledWith('');
-  });
+    test('displays project select with unique projects', () => {
+      mockProps.isOpen = true;
+      mockProps.uniqueProjects = ['Work', 'Personal'];
+      render(<AddTaskdialog {...mockProps} />);
 
-  test('does not add duplicate tags', () => {
-    mockProps.isOpen = true;
-    mockProps.tagInput = 'urgent';
-    mockProps.newTask.tags = ['urgent'];
-    render(<AddTaskdialog {...mockProps} />);
+      expect(screen.getByText('Work')).toBeInTheDocument();
+      expect(screen.getByText('Personal')).toBeInTheDocument();
+    });
 
-    const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-    fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+    test('shows new project input when creating new project', () => {
+      mockProps.isOpen = true;
+      mockProps.isCreatingNewProject = true;
+      render(<AddTaskdialog {...mockProps} />);
 
-    expect(mockProps.setNewTask).not.toHaveBeenCalled();
-  });
+      const projectInput = screen.getByPlaceholderText(/new project name/i);
+      expect(projectInput).toBeInTheDocument();
+    });
 
-  test('removes a tag when user clicks the remove button', () => {
-    mockProps.isOpen = true;
-    mockProps.newTask.tags = ['urgent', 'important'];
-    render(<AddTaskdialog {...mockProps} />);
+    test('updates project name when typing in new project input', () => {
+      mockProps.isOpen = true;
+      mockProps.isCreatingNewProject = true;
+      render(<AddTaskdialog {...mockProps} />);
 
-    const removeButtons = screen.getAllByText('✖');
+      const projectInput = screen.getByPlaceholderText(/new project name/i);
+      fireEvent.change(projectInput, { target: { value: 'New Project' } });
+
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        project: 'New Project',
+      });
+    });
+
+    test('sets isCreatingNewProject to true when "create new project" is selected', () => {
+      mockProps.isOpen = true;
+      mockProps.uniqueProjects = ['Work', 'Personal'];
+      render(<AddTaskdialog {...mockProps} />);
 
-    fireEvent.click(removeButtons[0]);
+      const projectSelect = screen.getByTestId('project-select');
+      fireEvent.change(projectSelect, { target: { value: '__CREATE_NEW__' } });
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      tags: ['important'],
+      expect(mockProps.setIsCreatingNewProject).toHaveBeenCalledWith(true);
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        project: '',
+      });
     });
-  });
 
-  test('displays tags as badges', () => {
-    mockProps.isOpen = true;
-    mockProps.newTask.tags = ['urgent', 'work'];
-    render(<AddTaskdialog {...mockProps} />);
+    test('sets isCreatingNewProject to false when existing project is selected', () => {
+      mockProps.isOpen = true;
+      mockProps.uniqueProjects = ['Work', 'Personal'];
+      render(<AddTaskdialog {...mockProps} />);
 
-    expect(screen.getByText('urgent')).toBeInTheDocument();
-    expect(screen.getByText('work')).toBeInTheDocument();
+      const projectSelect = screen.getByTestId('project-select');
+      fireEvent.change(projectSelect, { target: { value: 'Work' } });
+
+      expect(mockProps.setIsCreatingNewProject).toHaveBeenCalledWith(false);
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        project: 'Work',
+      });
+    });
   });
 
-  test('closes dialog when Cancel button is clicked', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+  describe('Tags', () => {
+    test('adds a tag when user types and presses Enter', () => {
+      mockProps.isOpen = true;
+      mockProps.tagInput = 'urgent';
+      render(<AddTaskdialog {...mockProps} />);
 
-    const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    fireEvent.click(cancelButton);
+      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
 
-    expect(mockProps.setIsOpen).toHaveBeenCalledWith(false);
-  });
+      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
 
-  test('calls onSubmit when "Add Task" button in dialog is clicked', () => {
-    mockProps.isOpen = true;
-    mockProps.newTask = {
-      description: 'Test task',
-      priority: 'H',
-      project: 'Work',
-      due: '2024-12-25',
-      start: '',
-      entry: '2025-12-20',
-      wait: '2025-12-20',
-      end: '',
-      recur: '',
-      tags: ['urgent'],
-      annotations: [],
-      depends: [],
-    };
-    render(<AddTaskdialog {...mockProps} />);
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        tags: ['urgent'],
+      });
 
-    const submitButton = screen.getByRole('button', {
-      name: /add task/i,
+      expect(mockProps.setTagInput).toHaveBeenCalledWith('');
     });
 
-    expect(submitButton).toBeInTheDocument();
-    fireEvent.click(submitButton);
-    expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
-  });
+    test('does not add duplicate tags', () => {
+      mockProps.isOpen = true;
+      mockProps.tagInput = 'urgent';
+      mockProps.newTask.tags = ['urgent'];
+      render(<AddTaskdialog {...mockProps} />);
 
-  test('does not add empty tag when tagInput is empty', () => {
-    mockProps.isOpen = true;
-    mockProps.tagInput = '';
-    render(<AddTaskdialog {...mockProps} />);
+      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
+      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
 
-    const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-    fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
+      expect(mockProps.setNewTask).not.toHaveBeenCalled();
+    });
 
-    expect(mockProps.setNewTask).not.toHaveBeenCalled();
-  });
+    test('removes a tag when user clicks the remove button', () => {
+      mockProps.isOpen = true;
+      mockProps.newTask.tags = ['urgent', 'important'];
+      render(<AddTaskdialog {...mockProps} />);
 
-  test('updates tagInput when user types in tag field', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+      const removeButtons = screen.getAllByText('✖');
 
-    const tagsInput = screen.getByPlaceholderText(/add a tag/i);
-    fireEvent.change(tagsInput, { target: { value: 'new-tag' } });
+      fireEvent.click(removeButtons[0]);
 
-    expect(mockProps.setTagInput).toHaveBeenCalledWith('new-tag');
-  });
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        tags: ['important'],
+      });
+    });
 
-  test('renders all priority options in dropdown', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+    test('displays tags as badges', () => {
+      mockProps.isOpen = true;
+      mockProps.newTask.tags = ['urgent', 'work'];
+      render(<AddTaskdialog {...mockProps} />);
 
-    const prioritySelect = screen.getByLabelText(/priority/i);
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+      expect(screen.getByText('work')).toBeInTheDocument();
+    });
 
-    expect(prioritySelect).toContainHTML('<option value="H">H</option>');
-    expect(prioritySelect).toContainHTML('<option value="M">M</option>');
-    expect(prioritySelect).toContainHTML('<option value="L">L</option>');
-  });
+    test('updates tagInput when user types in tag field', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
 
-  test('shows new project input when creating new project', () => {
-    mockProps.isOpen = true;
-    mockProps.isCreatingNewProject = true;
-    render(<AddTaskdialog {...mockProps} />);
+      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
+      fireEvent.change(tagsInput, { target: { value: 'new-tag' } });
 
-    const projectInput = screen.getByPlaceholderText(/new project name/i);
-    expect(projectInput).toBeInTheDocument();
-  });
+      expect(mockProps.setTagInput).toHaveBeenCalledWith('new-tag');
+    });
 
-  test('updates project name when typing in new project input', () => {
-    mockProps.isOpen = true;
-    mockProps.isCreatingNewProject = true;
-    render(<AddTaskdialog {...mockProps} />);
+    test('does not add empty tag when tagInput is empty', () => {
+      mockProps.isOpen = true;
+      mockProps.tagInput = '';
+      render(<AddTaskdialog {...mockProps} />);
 
-    const projectInput = screen.getByPlaceholderText(/new project name/i);
-    fireEvent.change(projectInput, { target: { value: 'New Project' } });
+      const tagsInput = screen.getByPlaceholderText(/add a tag/i);
+      fireEvent.keyDown(tagsInput, { key: 'Enter', code: 'Enter' });
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      project: 'New Project',
+      expect(mockProps.setNewTask).not.toHaveBeenCalled();
     });
   });
 
-  describe('Task Dependencies', () => {
+  describe('Date Fields', () => {
+    const dateFields = [
+      { name: 'due', label: 'Due', placeholder: 'Select a due date' },
+      { name: 'start', label: 'Start', placeholder: 'Select a start date' },
+      { name: 'end', label: 'End', placeholder: 'Select an end date' },
+      { name: 'entry', label: 'Entry', placeholder: 'Select an entry date' },
+      { name: 'wait', label: 'Wait', placeholder: 'Select a wait date' },
+    ];
+
+    test.each(dateFields)(
+      'renders $name date picker with correct placeholder',
+      ({ placeholder }) => {
+        mockProps.isOpen = true;
+        render(<AddTaskdialog {...mockProps} />);
+
+        const datePicker = screen.getByPlaceholderText(placeholder);
+        expect(datePicker).toBeInTheDocument();
+      }
+    );
+
+    test.each(dateFields)(
+      'updates $name when user selects a date',
+      ({ name, placeholder }) => {
+        mockProps.isOpen = true;
+        render(<AddTaskdialog {...mockProps} />);
+
+        const datePicker = screen.getByPlaceholderText(placeholder);
+        fireEvent.change(datePicker, { target: { value: '2025-12-25' } });
+
+        expect(mockProps.setNewTask).toHaveBeenCalledWith({
+          ...mockProps.newTask,
+          [name]: '2025-12-25',
+        });
+      }
+    );
+
+    test.each(dateFields)(
+      'allows empty $name date (optional field)',
+      ({ name, placeholder }) => {
+        mockProps.isOpen = true;
+        render(<AddTaskdialog {...mockProps} />);
+
+        const datePicker = screen.getByPlaceholderText(placeholder);
+
+        fireEvent.change(datePicker, { target: { value: '2025-12-25' } });
+        mockProps.setNewTask.mockClear();
+        fireEvent.change(datePicker, { target: { value: '' } });
+
+        expect(mockProps.setNewTask).toHaveBeenCalledWith({
+          ...mockProps.newTask,
+          [name]: '',
+        });
+      }
+    );
+
+    test.each(dateFields)(
+      'submits task with $name date when provided',
+      ({ name }) => {
+        mockProps.isOpen = true;
+        mockProps.newTask = {
+          ...mockProps.newTask,
+          [name]: '2025-12-25',
+        };
+        render(<AddTaskdialog {...mockProps} />);
+
+        const submitButton = screen.getByRole('button', { name: /add task/i });
+        fireEvent.click(submitButton);
+
+        expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
+      }
+    );
+  });
+
+  describe('Depends Field', () => {
     beforeEach(() => {
       mockProps.isOpen = true;
       mockProps.allTasks = [
@@ -323,7 +441,7 @@ describe('AddTaskDialog Component', () => {
           description: 'First task',
           status: 'pending',
           project: 'Project A',
-          tags: [],
+          tags: ['urgent'],
           priority: 'M',
           due: '',
           start: '',
@@ -427,117 +545,230 @@ describe('AddTaskDialog Component', () => {
 
       expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
     });
-  });
 
-  test('renders wait date picker with correct placeholder', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+    test('filters tasks by project name', () => {
+      render(<AddTaskdialog {...mockProps} />);
+      const searchInput = screen.getByPlaceholderText(
+        'Search and select tasks this depends on...'
+      );
 
-    const waitDatePicker = screen.getByPlaceholderText(/select a wait date/i);
-    expect(waitDatePicker).toBeInTheDocument();
-  });
+      fireEvent.change(searchInput, { target: { value: 'Project A' } });
 
-  test('updates wait when user selects a date', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+      expect(screen.getByText('First task')).toBeInTheDocument();
+      expect(screen.queryByText('Second task')).not.toBeInTheDocument();
+    });
 
-    const waitDatePicker = screen.getByPlaceholderText(/select a wait date/i);
-    fireEvent.change(waitDatePicker, { target: { value: '2025-12-20' } });
+    test('filters tasks by tag name', () => {
+      render(<AddTaskdialog {...mockProps} />);
+      const searchInput = screen.getByPlaceholderText(
+        'Search and select tasks this depends on...'
+      );
+
+      fireEvent.change(searchInput, { target: { value: 'urgent' } });
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      wait: '2025-12-20',
+      expect(screen.getByText('First task')).toBeInTheDocument();
     });
-  });
 
-  test('submits task with wait date when provided', () => {
-    mockProps.isOpen = true;
-    mockProps.newTask.wait = '2025-12-20';
-    render(<AddTaskdialog {...mockProps} />);
+    test('shows no results when search is empty', () => {
+      render(<AddTaskdialog {...mockProps} />);
+      const searchInput = screen.getByPlaceholderText(
+        'Search and select tasks this depends on...'
+      );
 
-    const submitButton = screen.getByRole('button', {
-      name: /add task/i,
+      fireEvent.change(searchInput, { target: { value: '   ' } });
+
+      expect(screen.queryByText('First task')).not.toBeInTheDocument();
+      expect(screen.queryByText('Second task')).not.toBeInTheDocument();
     });
-    fireEvent.click(submitButton);
 
-    expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
-  });
+    test('adds dependency when search result is clicked', () => {
+      render(<AddTaskdialog {...mockProps} />);
+      const searchInput = screen.getByPlaceholderText(
+        'Search and select tasks this depends on...'
+      );
+      fireEvent.change(searchInput, { target: { value: 'First' } });
+      const taskResult = screen.getByText('First task');
 
-  test('allows empty wait date (optional field)', () => {
-    mockProps.isOpen = true;
-    mockProps.newTask.wait = '';
-    render(<AddTaskdialog {...mockProps} />);
+      fireEvent.click(taskResult);
 
-    const submitButton = screen.getByRole('button', {
-      name: /add task/i,
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        depends: ['task-1'],
+      });
     });
-    fireEvent.click(submitButton);
 
-    expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
-  });
+    test('shows results when input is focused with existing text', () => {
+      render(<AddTaskdialog {...mockProps} />);
+      const searchInput = screen.getByPlaceholderText(
+        'Search and select tasks this depends on...'
+      );
 
-  test('renders entry date picker with correct placeholder', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+      fireEvent.change(searchInput, { target: { value: 'First' } });
+      fireEvent.focus(searchInput);
 
-    const entryDatePicker =
-      screen.getByPlaceholderText(/select an entry date/i);
-    expect(entryDatePicker).toBeInTheDocument();
-  });
+      expect(screen.getByText('First task')).toBeInTheDocument();
+    });
 
-  test('updates entry when user selects a date', () => {
-    mockProps.isOpen = true;
-    render(<AddTaskdialog {...mockProps} />);
+    test('returns no filtered tasks when search is empty', () => {
+      render(<AddTaskdialog {...mockProps} />);
+      const searchInput = screen.getByPlaceholderText(
+        'Search and select tasks this depends on...'
+      );
 
-    const entryDatePicker =
-      screen.getByPlaceholderText(/select an entry date/i);
-    fireEvent.change(entryDatePicker, { target: { value: '2025-12-20' } });
+      fireEvent.focus(searchInput);
 
-    expect(mockProps.setNewTask).toHaveBeenCalledWith({
-      ...mockProps.newTask,
-      entry: '2025-12-20',
+      expect(screen.queryByText('First task')).not.toBeInTheDocument();
+    });
+
+    test('hides results when input loses focus', async () => {
+      render(<AddTaskdialog {...mockProps} />);
+      const searchInput = screen.getByPlaceholderText(
+        'Search and select tasks this depends on...'
+      );
+
+      fireEvent.change(searchInput, { target: { value: 'First' } });
+      expect(screen.getByText('First task')).toBeInTheDocument();
+
+      fireEvent.blur(searchInput);
+
+      // Wait for the 200ms timeout to complete
+      await waitFor(
+        () => {
+          expect(screen.queryByText('First task')).not.toBeInTheDocument();
+        },
+        { timeout: 300 }
+      );
     });
   });
 
-  test('submits task with entry date when provided', () => {
-    mockProps.isOpen = true;
-    mockProps.newTask = {
-      description: 'Test task',
-      priority: 'H',
-      project: 'Work',
-      due: '2024-12-25',
-      start: '',
-      entry: '2025-12-20',
-      tags: ['urgent'],
-      annotations: [],
-      depends: [],
+  describe('Annotations Field', () => {
+    const annotation1 = {
+      entry: '2025-12-25T00:00:00Z',
+      description: 'First note',
+    };
+    const annotation2 = {
+      entry: '2025-12-25T00:00:00Z',
+      description: 'Second note',
     };
-    render(<AddTaskdialog {...mockProps} />);
 
-    const submitButton = screen.getByRole('button', { name: /add task/i });
-    fireEvent.click(submitButton);
+    test('renders annotations input field', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const annotationsInput = screen.getByPlaceholderText('Add an annotation');
+      expect(annotationsInput).toBeInTheDocument();
+    });
+
+    test('adds annotation when user types and presses enter', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const annotationsInput = screen.getByPlaceholderText('Add an annotation');
+      fireEvent.change(annotationsInput, {
+        target: { value: 'This is an annotation' },
+      });
+      fireEvent.keyDown(annotationsInput, { key: 'Enter', code: 'Enter' });
+
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        annotations: [
+          expect.objectContaining({ description: 'This is an annotation' }),
+        ],
+      });
+    });
+
+    test('does not add empty annotation', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const annotationsInput = screen.getByPlaceholderText('Add an annotation');
+      fireEvent.change(annotationsInput, { target: { value: '' } });
+      fireEvent.keyDown(annotationsInput, { key: 'Enter', code: 'Enter' });
+
+      expect(mockProps.setNewTask).not.toHaveBeenCalled();
+    });
+
+    test('does not add whitespace-only annotation', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const annotationsInput = screen.getByPlaceholderText('Add an annotation');
+      fireEvent.change(annotationsInput, { target: { value: '      ' } });
+      fireEvent.keyDown(annotationsInput, { key: 'Enter', code: 'Enter' });
+
+      expect(mockProps.setNewTask).not.toHaveBeenCalled();
+    });
+
+    test('displays annotations as badges', () => {
+      mockProps.isOpen = true;
+      mockProps.newTask.annotations = [annotation1, annotation2];
+      render(<AddTaskdialog {...mockProps} />);
 
-    expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
+      expect(screen.getByText('First note')).toBeInTheDocument();
+      expect(screen.getByText('Second note')).toBeInTheDocument();
+    });
+
+    test('removes annotation when user clicks remove button', () => {
+      mockProps.isOpen = true;
+      mockProps.newTask.annotations = [annotation1, annotation2];
+      render(<AddTaskdialog {...mockProps} />);
+
+      const removeButtons = screen.getAllByRole('button', {
+        name: 'remove annotation',
+      });
+      fireEvent.click(removeButtons[0]);
+
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        annotations: [annotation2],
+      });
+    });
   });
 
-  test('allows empty entry date (optional field)', () => {
-    mockProps.isOpen = true;
-    mockProps.newTask = {
-      description: 'Test task',
-      priority: 'M',
-      project: '',
-      due: '',
-      start: '',
-      entry: '',
-      tags: [],
-      annotations: [],
-      depends: [],
-    };
-    render(<AddTaskdialog {...mockProps} />);
+  describe('Recur Field', () => {
+    test('renders recur dropdown with all options', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const recurSelect = screen.getByLabelText('Recur');
+
+      expect(recurSelect).toContainHTML('<option value="">None</option>');
+      expect(recurSelect).toContainHTML('<option value="daily">Daily</option>');
+      expect(recurSelect).toContainHTML(
+        '<option value="weekly">Weekly</option>'
+      );
+      expect(recurSelect).toContainHTML(
+        '<option value="monthly">Monthly</option>'
+      );
+      expect(recurSelect).toContainHTML(
+        '<option value="yearly">Yearly</option>'
+      );
+    });
+
+    test('updates recur when user selects from dropdown', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
 
-    const submitButton = screen.getByRole('button', { name: /add task/i });
-    fireEvent.click(submitButton);
+      const recurSelect = screen.getByLabelText('Recur');
+      fireEvent.change(recurSelect, { target: { value: 'weekly' } });
 
-    expect(mockProps.onSubmit).toHaveBeenCalledWith(mockProps.newTask);
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        recur: 'weekly',
+      });
+    });
+
+    test('allows no recur selection', () => {
+      mockProps.isOpen = true;
+      render(<AddTaskdialog {...mockProps} />);
+
+      const recurSelect = screen.getByLabelText('Recur');
+      fireEvent.change(recurSelect, { target: { value: '' } });
+
+      expect(mockProps.setNewTask).toHaveBeenCalledWith({
+        ...mockProps.newTask,
+        recur: '',
+      });
+    });
   });
 });