From dad7e6a8f82724aae58b694f4ea8adc84392185b Mon Sep 17 00:00:00 2001
From: adiprathapa <aprathapa01@gmail.com>
Date: Thu, 19 Mar 2026 12:15:17 -0400
Subject: [PATCH] test(Tasks): add Reports Toggle tests

Added tests for the Reports Toggle feature in the Tasks component.

Ref #433
---
 .../Tasks/__tests__/Tasks.test.tsx            | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
index a9df099f..f11f5e32 100644
--- a/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx
@@ -185,6 +185,10 @@ jest.mock('../TaskSkeleton', () => {
   };
 });
 
+jest.mock('../ReportsView', () => ({
+  ReportsView: () => <div data-testid="reports-view">Mocked ReportsView</div>,
+}));
+
 global.fetch = jest.fn().mockResolvedValue({ ok: true });
 
 describe('Tasks Component', () => {
@@ -1933,4 +1937,55 @@ describe('Tasks Component', () => {
       );
     });
   });
+
+  describe('Reports Toggle', () => {
+    test('shows "Show Reports" button by default', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      expect(screen.getByText('Show Reports')).toBeInTheDocument();
+    });
+
+    test('switches button text to "Show Tasks" after clicking', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      const btn = screen.getByText('Show Reports');
+      await act(async () => {
+        fireEvent.click(btn);
+      });
+
+      expect(screen.getByText('Show Tasks')).toBeInTheDocument();
+    });
+
+    test('renders ReportsView when toggled on', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      await act(async () => {
+        fireEvent.click(screen.getByText('Show Reports'));
+      });
+
+      expect(screen.getByTestId('reports-view')).toBeInTheDocument();
+    });
+
+    test('hides ReportsView when toggled off again', async () => {
+      render(<Tasks {...mockProps} />);
+      await screen.findByText('Task 1');
+
+      const btn = screen.getByText('Show Reports');
+      await act(async () => {
+        fireEvent.click(btn);
+      });
+
+      expect(screen.getByTestId('reports-view')).toBeInTheDocument();
+
+      await act(async () => {
+        fireEvent.click(screen.getByText('Show Tasks'));
+      });
+
+      expect(screen.queryByTestId('reports-view')).not.toBeInTheDocument();
+      expect(screen.getByText('Show Reports')).toBeInTheDocument();
+    });
+  });
 });