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: () =>
Mocked ReportsView
,
+}));
+
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();
+ await screen.findByText('Task 1');
+
+ expect(screen.getByText('Show Reports')).toBeInTheDocument();
+ });
+
+ test('switches button text to "Show Tasks" after clicking', async () => {
+ render();
+ 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();
+ 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();
+ 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();
+ });
+ });
});