From e78b54412f107a608f082001ac77f89305ef0116 Mon Sep 17 00:00:00 2001
From: Shiva Gupta <shivascalerite@gmail.com>
Date: Thu, 22 Jan 2026 11:52:36 +0530
Subject: [PATCH] test(Tasks): Add Recur, Priority, and Reports toggle tests

- Add feature-specific tests for editing flows
- Move data-testid from SelectTrigger to Select for testability
- Update Select mock to support dynamic test-ids
- Add ResizeObserver mock
---
 .../HomeComponents/Tasks/AddTaskDialog.tsx    |   2 +-
 .../HomeComponents/Tasks/TaskDialog.tsx       |   8 +-
 .../Tasks/__tests__/Tasks.test.tsx            | 221 +++++++++++++++++-
 3 files changed, 222 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
index 07047bdb..d428e0f0 100644
--- a/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx
@@ -272,6 +272,7 @@ export const AddTaskdialog = ({
                       setNewTask({ ...newTask, project: value });
                     }
                   }}
+                  data-testid="project-select"
                 >
                   <SelectTrigger
                     onKeyDown={(e) => {
@@ -284,7 +285,6 @@ export const AddTaskdialog = ({
                     }}
                     ref={(element) => (inputRefs.current.project = element)}
                     id="project"
-                    data-testid="project-select"
                   >
                     <SelectValue
                       placeholder={
diff --git a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
index 522e1f49..c2c8421e 100644
--- a/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx
@@ -1001,6 +1001,7 @@ export const TaskDialog = ({
                               editedPriority: value,
                             })
                           }
+                          data-testid="priority-select"
                         >
                           <SelectTrigger className="flex-grow mr-2">
                             <SelectValue placeholder="Select priority" />
@@ -1096,11 +1097,9 @@ export const TaskDialog = ({
                                 onSaveProject(task, project);
                               }
                             }}
+                            data-testid="project-select"
                           >
-                            <SelectTrigger
-                              id="project"
-                              data-testid="project-select"
-                            >
+                            <SelectTrigger id="project">
                               <SelectValue
                                 placeholder={
                                   uniqueProjects.length
@@ -1374,6 +1373,7 @@ export const TaskDialog = ({
                           onValueChange={(value) =>
                             onUpdateState({ editedRecur: value })
                           }
+                          data-testid="recur-select"
                         >
                           <SelectTrigger className="flex-grow">
                             <SelectValue placeholder="Select recurrence" />
diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index d650a64b..dfe1ef4f 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -58,10 +58,10 @@ jest.mock('@/components/ui/multi-select', () => ({
 
 jest.mock('@/components/ui/select', () => {
   return {
-    Select: ({ children, onValueChange, value }: any) => {
+    Select: ({ children, onValueChange, value, ...props }: any) => {
       return (
         <select
-          data-testid="project-select"
+          {...props}
           value={value}
           onChange={(e) => onValueChange?.(e.target.value)}
         >
@@ -182,6 +182,12 @@ jest.mock('../TaskSkeleton', () => {
 
 global.fetch = jest.fn().mockResolvedValue({ ok: true });
 
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
 describe('Tasks Component', () => {
   const localStorageMock = (() => {
     let store: { [key: string]: string } = {};
@@ -1229,7 +1235,7 @@ describe('Tasks Component', () => {
     const editButton = within(priorityRow).getByLabelText('edit');
     fireEvent.click(editButton);
 
-    const select = within(priorityRow).getByTestId('project-select');
+    const select = within(priorityRow).getByTestId('priority-select');
     fireEvent.change(select, { target: { value: 'H' } });
 
     const saveButton = screen.getByLabelText('save');
@@ -1339,7 +1345,7 @@ describe('Tasks Component', () => {
     const editButton = within(recurRow).getByLabelText('edit');
     fireEvent.click(editButton);
 
-    const select = within(recurRow).getByTestId('project-select');
+    const select = within(recurRow).getByTestId('recur-select');
     fireEvent.change(select, { target: { value: 'weekly' } });
 
     const saveButton = screen.getByLabelText('save');
@@ -1737,4 +1743,211 @@ describe('Tasks Component', () => {
       expect(task1Row).toBeInTheDocument();
     });
   });
+
+  describe('Recur Editing', () => {
+    test('does not save when recur is set to "none"', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      expect(await screen.findByText('Recur:')).toBeInTheDocument();
+
+      const recurLabel = screen.getByText('Recur:');
+      const recurRow = recurLabel.closest('tr') as HTMLElement;
+      const editButton = within(recurRow).getByLabelText('edit');
+
+      fireEvent.click(editButton);
+
+      const select = within(recurRow).getByTestId('recur-select');
+      fireEvent.change(select, { target: { value: 'none' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      const hooks = require('../hooks');
+      expect(hooks.editTaskOnBackend).not.toHaveBeenCalled();
+    });
+
+    test('saves recur when a valid value is selected', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      expect(await screen.findByText('Recur:')).toBeInTheDocument();
+
+      const recurLabel = screen.getByText('Recur:');
+      const recurRow = recurLabel.closest('tr') as HTMLElement;
+      const editButton = within(recurRow).getByLabelText('edit');
+
+      fireEvent.click(editButton);
+
+      const select = within(recurRow).getByTestId('recur-select');
+      fireEvent.change(select, { target: { value: 'daily' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      const hooks = require('../hooks');
+      expect(hooks.editTaskOnBackend).toHaveBeenCalledWith(
+        expect.objectContaining({ recur: 'daily' })
+      );
+    });
+
+    test('does not save when recur is empty string', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      expect(await screen.findByText('Recur:')).toBeInTheDocument();
+
+      const recurLabel = screen.getByText('Recur:');
+      const recurRow = recurLabel.closest('tr') as HTMLElement;
+      const editButton = within(recurRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(recurRow).getByTestId('recur-select');
+      fireEvent.change(select, { target: { value: '' } });
+      const saveButton = within(recurRow).getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      const hooks = require('../hooks');
+      expect(hooks.editTaskOnBackend).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Priority Editing', () => {
+    test('saving priority calls modifyTaskOnBackend with correct value', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      expect(await screen.findByText('Priority:')).toBeInTheDocument();
+
+      const priorityLabel = screen.getByText('Priority:');
+      const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+      const editButton = within(priorityRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(priorityRow).getByTestId('priority-select');
+      fireEvent.change(select, { target: { value: 'H' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const hooks = require('../hooks');
+        expect(hooks.modifyTaskOnBackend).toHaveBeenCalledWith(
+          expect.objectContaining({ priority: 'H' })
+        );
+      });
+    });
+
+    test('saving "NONE" priority sends empty string to backend', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 12');
+      fireEvent.click(screen.getByText('Task 12'));
+
+      expect(await screen.findByText('Priority:')).toBeInTheDocument();
+
+      const priorityLabel = screen.getByText('Priority:');
+      const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+      const editButton = within(priorityRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(priorityRow).getByTestId('priority-select');
+      fireEvent.change(select, { target: { value: 'NONE' } });
+
+      const saveButton = screen.getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        const hooks = require('../hooks');
+        expect(hooks.modifyTaskOnBackend).toHaveBeenCalledWith(
+          expect.objectContaining({
+            priority: '',
+          })
+        );
+      });
+    });
+
+    test('shows error toast when priority save fails', async () => {
+      const { toast } = require('react-toastify');
+      const hooks = require('../hooks');
+
+      hooks.modifyTaskOnBackend.mockRejectedValueOnce(
+        new Error('Network error')
+      );
+
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 12');
+
+      fireEvent.click(screen.getByText('Task 12'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Priority:')).toBeInTheDocument();
+      });
+
+      const priorityLabel = screen.getByText('Priority:');
+      const priorityRow = priorityLabel.closest('tr') as HTMLElement;
+
+      const editButton = within(priorityRow).getByLabelText('edit');
+      fireEvent.click(editButton);
+
+      const select = within(priorityRow).getByTestId('priority-select');
+      fireEvent.change(select, { target: { value: 'H' } });
+
+      const saveButton = within(priorityRow).getByLabelText('save');
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith(
+          expect.stringContaining('Failed to update priority')
+        );
+      });
+    });
+  });
+
+  describe('Reports Toggle', () => {
+    test('clicking "Show Reports" button switches view from tasks to reports', async () => {
+      render(<Tasks {...mockProps} />);
+
+      await screen.findByText('Task 1');
+
+      expect(screen.getByText('Here are')).toBeInTheDocument();
+
+      const toggleBtn = screen.getByRole('button', { name: /show reports/i });
+      fireEvent.click(toggleBtn);
+
+      expect(
+        screen.getByRole('button', { name: /show tasks/i })
+      ).toBeInTheDocument();
+    });
+
+    test('clicking "Show Tasks" returns to task list view', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      fireEvent.click(screen.getByRole('button', { name: /show reports/i }));
+      fireEvent.click(screen.getByRole('button', { name: /show tasks/i }));
+
+      expect(screen.getByText('Task 1')).toBeInTheDocument();
+    });
+
+    test('hotkeys are disabled when reports view is shown', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      fireEvent.click(screen.getByRole('button', { name: /show reports/i }));
+      fireEvent.keyDown(window, { key: 'a' });
+
+      expect(
+        screen.queryByText(/fill in the details below/i)
+      ).not.toBeInTheDocument();
+    });
+  });
 });