test(Tasks): Add comprehensive test suite for Tasks component

- Add tests for Keyboard Navigation (ArrowUp, ArrowDown, boundary stops)
- Add tests for Hotkey Shortcuts ('a', 'c', 'd', 'f', 'p', 'r', 's', 't', Enter)
- Add tests for complete/delete hotkeys when dialog is already open
- Add test for hotkeys disabled when input is focused
- Update MultiSelectFilter mock to use aria-expanded for behavior testing
- Remove unnecessary mock override in overdue filter test

Author: ShivaGupta-14

frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx

@@ -44,15 +44,20 @@ jest.mock('../tasks-utils', () => {
 });
 
 jest.mock('@/components/ui/multi-select', () => ({
-  MultiSelectFilter: jest.fn(({ title, completionStats }) => (
-    <div data-testid={`multi-select-${title.toLowerCase()}`}>
+  MultiSelectFilter: jest.fn(({ id, title, completionStats }) => (
+    <button
+      id={id}
+      data-testid={`multi-select-${title.toLowerCase()}`}
+      aria-expanded="false"
+      onClick={(e) => e.currentTarget.setAttribute('aria-expanded', 'true')}
+    >
       Mocked MultiSelect: {title}
       {completionStats && (
         <span data-testid={`stats-${title.toLowerCase()}`}>
           {JSON.stringify(completionStats)}
         </span>
       )}
-    </div>
+    </button>
   )),
 }));
 
@@ -863,10 +868,6 @@ describe('Tasks Component', () => {
     const MultiSelectFilter =
       require('@/components/ui/multi-select').MultiSelectFilter;
 
-    MultiSelectFilter.mockImplementation(({ title }: { title: string }) => {
-      return <div data-testid={`ms-${title}`}>Mocked MultiSelect: {title}</div>;
-    });
-
     render(<Tasks {...mockProps} />);
 
     await waitFor(async () => {
@@ -1737,4 +1738,178 @@ describe('Tasks Component', () => {
       expect(task1Row).toBeInTheDocument();
     });
   });
+
+  describe('Keyboard Navigation', () => {
+    describe('Arrow Key Navigation', () => {
+      test('ArrowDown key moves selection to next task', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'ArrowDown' });
+        fireEvent.keyDown(window, { key: 'Enter' });
+
+        const dialog = await screen.findByRole('dialog');
+        expect(within(dialog).getByText('Deleted Task 1')).toBeInTheDocument();
+      });
+
+      test('ArrowUp moves selection back to previous task', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'ArrowDown' });
+        fireEvent.keyDown(window, { key: 'ArrowDown' });
+        fireEvent.keyDown(window, { key: 'ArrowUp' });
+        fireEvent.keyDown(window, { key: 'Enter' });
+
+        const dialog = await screen.findByRole('dialog');
+        expect(within(dialog).getByText('Deleted Task 1')).toBeInTheDocument();
+      });
+
+      test('ArrowDown stops at last task on page', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        for (let i = 0; i < 20; i++) {
+          fireEvent.keyDown(window, { key: 'ArrowDown' });
+        }
+
+        fireEvent.keyDown(window, { key: 'Enter' });
+
+        const dialog = await screen.findByRole('dialog');
+        expect(within(dialog).getByText('Task 9')).toBeInTheDocument();
+      });
+
+      test('ArrowUp stops at index zero task', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        for (let i = 0; i < 5; i++) {
+          fireEvent.keyDown(window, { key: 'ArrowUp' });
+        }
+
+        fireEvent.keyDown(window, { key: 'Enter' });
+
+        const dialog = await screen.findByRole('dialog');
+        expect(within(dialog).getByText('tag1')).toBeInTheDocument();
+        expect(within(dialog).getByText('Overdue')).toBeInTheDocument();
+      });
+    });
+
+    describe('Hotkey Shortcuts', () => {
+      test('pressing "a" opens the Add Task dialog', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'a' });
+
+        expect(
+          await screen.findByText(
+            /fill in the details below to add a new task/i
+          )
+        ).toBeInTheDocument();
+      });
+
+      test.each([
+        ['c', 'complete'],
+        ['d', 'delete'],
+      ])(
+        'pressing %s attempts to open task dialog and trigger %s action',
+        async (key, _action) => {
+          jest.useFakeTimers();
+
+          render(<Tasks {...mockProps} />);
+          await screen.findByText('Task 1');
+
+          fireEvent.keyDown(window, { key });
+
+          expect(await screen.findByText('Tags:')).toBeInTheDocument();
+
+          act(() => {
+            jest.advanceTimersByTime(200);
+          });
+
+          expect(await screen.findByText('Are you')).toBeInTheDocument();
+
+          jest.useRealTimers();
+        }
+      );
+
+      test('pressing "Enter" key opens the selected task dialog', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'Enter' });
+
+        expect(await screen.findByText('Description:')).toBeInTheDocument();
+      });
+
+      test('pressing "f" focuses the search input', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'f' });
+
+        const searchInput = screen.getByPlaceholderText('Search tasks...');
+        expect(document.activeElement).toBe(searchInput);
+      });
+
+      test('pressing "r" triggers sync', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        fireEvent.keyDown(window, { key: 'r' });
+
+        expect(mockProps.setIsLoading).toHaveBeenCalledWith(true);
+      });
+
+      test.each([
+        ['p', 'projects'],
+        ['s', 'status'],
+        ['t', 'tags'],
+      ])('pressing "%s" opens the %s filter', async (key, filterName) => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        const filterButton = screen.getByTestId(`multi-select-${filterName}`);
+        expect(filterButton).toHaveAttribute('aria-expanded', 'false');
+
+        fireEvent.keyDown(window, { key });
+
+        expect(filterButton).toHaveAttribute('aria-expanded', 'true');
+      });
+
+      test('hotkeys are disabled when input is focused', async () => {
+        render(<Tasks {...mockProps} />);
+        await screen.findByText('Task 1');
+
+        const searchInput = screen.getByPlaceholderText('Search tasks...');
+        searchInput.focus();
+
+        fireEvent.keyDown(searchInput, { key: 'r' });
+
+        expect(mockProps.setIsLoading).not.toHaveBeenCalledWith(true);
+      });
+    });
+
+    describe('Complete Hotkey When Dialog Open', () => {
+      test.each([
+        ['c', 'complete'],
+        ['d', 'delete'],
+      ])(
+        'pressing "%s" when dialog is already open triggers %s confirmation',
+        async (key, _action) => {
+          render(<Tasks {...mockProps} />);
+          await screen.findByText('Task 1');
+
+          fireEvent.click(screen.getByText('Task 1'));
+
+          expect(await screen.findByRole('dialog')).toBeInTheDocument();
+
+          fireEvent.keyDown(window, { key });
+
+          expect(await screen.findByText('Are you')).toBeInTheDocument();
+        }
+      );
+    });
+  });
 });