Add Unit Tests for Refactored TaskDetails Subcomponents

__tests__/Unit/Components/Tasks/TaskDates.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import TaskDates from '@/components/taskDetails/TaskDates';
+
+const mockSetNewEndOnDate = jest.fn();
+const mockHandleBlurOfEndsOn = jest.fn();
+
+describe('TaskDates Component', () => {
+    it('should render input field for End On date when in editing mode', () => {
+        render(
+            <TaskDates
+                isEditing={true}
+                isUserAuthorized={true}
+                startedOn="2024-03-30T11:20:00Z"
+                endsOn={1700000000}
+                newEndOnDate="2024-03-30"
+                setNewEndOnDate={mockSetNewEndOnDate}
+                handleBlurOfEndsOn={mockHandleBlurOfEndsOn}
+                isExtensionRequestPending={false}
+                taskId="1"
+            />
+        );
+
+        const input = screen.getByTestId('endsOnTaskDetails');
+        expect(input).toBeInTheDocument();
+        fireEvent.blur(input);
+        expect(mockHandleBlurOfEndsOn).toHaveBeenCalled();
+    });
+});

__tests__/Unit/Components/Tasks/TaskDependencies.test.tsx

@@ -0,0 +1,126 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import TaskDependencies from '@/components/taskDetails/TaskDependencies';
+import '@testing-library/jest-dom/extend-expect';
+import {
+    taskDetailsApi,
+    useGetTasksDependencyDetailsQuery,
+} from '@/app/services/taskDetailsApi';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+
+const createMockStore = () => {
+    return configureStore({
+        reducer: {
+            [taskDetailsApi.reducerPath]: taskDetailsApi.reducer,
+        },
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware().concat(taskDetailsApi.middleware),
+    });
+};
+
+jest.mock('@/app/services/taskDetailsApi', () => {
+    const actualApi = jest.requireActual('@/app/services/taskDetailsApi');
+    return {
+        ...actualApi,
+        useGetTasksDependencyDetailsQuery: jest.fn(),
+    };
+});
+
+describe('TaskDependencies Component', () => {
+    const mockSetEditedTaskDetails = jest.fn();
+    const mockPush = jest.fn();
+
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockReturnValue({
+            push: mockPush,
+        });
+
+        jest.clearAllMocks();
+
+        (useGetTasksDependencyDetailsQuery as jest.Mock).mockReturnValue({
+            data: [
+                {
+                    status: 'fulfilled',
+                    value: { id: '6KhcLU3yr45dzjQIVm0J', title: 'Task 1' },
+                },
+                {
+                    status: 'fulfilled',
+                    value: { id: 'taskid-2', title: 'Task 2' },
+                },
+            ],
+            isLoading: false,
+            isError: false,
+        });
+    });
+
+    const defaultProps = {
+        isEditing: false,
+        taskDependencyIds: ['6KhcLU3yr45dzjQIVm0J', 'taskid-2'],
+        setEditedTaskDetails: mockSetEditedTaskDetails,
+    };
+
+    it('should render task dependencies correctly when API returns data', async () => {
+        render(
+            <Provider store={createMockStore()}>
+                <TaskDependencies {...defaultProps} />
+            </Provider>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Task 1')).toBeInTheDocument();
+            expect(screen.getByText('Task 2')).toBeInTheDocument();
+        });
+    });
+
+    it('should render an error message when API fails to fetch a dependency', async () => {
+        (useGetTasksDependencyDetailsQuery as jest.Mock).mockReturnValue({
+            data: [
+                {
+                    status: 'rejected',
+                    reason: 'Failed to fetch',
+                    id: '6KhcLU3yr45dzjQIVm0J',
+                },
+                {
+                    status: 'rejected',
+                    reason: 'Failed to fetch',
+                    id: 'taskid-2',
+                },
+            ],
+            isLoading: false,
+            isError: true,
+        });
+
+        render(
+            <Provider store={createMockStore()}>
+                <TaskDependencies {...defaultProps} />
+            </Provider>
+        );
+
+        await waitFor(() => {
+            expect(
+                screen.getByText('Unable to fetch dependency tasks')
+            ).toBeInTheDocument();
+        });
+    });
+
+    it('should show a loading state while API is fetching data', () => {
+        (useGetTasksDependencyDetailsQuery as jest.Mock).mockReturnValue({
+            data: null,
+            isLoading: true,
+            isError: false,
+        });
+
+        render(
+            <Provider store={createMockStore()}>
+                <TaskDependencies {...defaultProps} />
+            </Provider>
+        );
+
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+});

__tests__/Unit/Components/Tasks/TaskDescription.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import TaskDescription from '@/components/taskDetails/TaskDescription';
+
+const mockHandleChange = jest.fn();
+
+describe('TaskDescription Component', () => {
+    it('should renders the task description when not editing', () => {
+        render(
+            <TaskDescription
+                isEditing={false}
+                purpose="Test Purpose"
+                handleChange={mockHandleChange}
+            />
+        );
+        expect(screen.getByText('Test Purpose')).toBeInTheDocument();
+    });
+
+    it('should renders "No description available" when purpose is empty', () => {
+        render(
+            <TaskDescription
+                isEditing={false}
+                purpose=""
+                handleChange={mockHandleChange}
+            />
+        );
+        expect(
+            screen.getByText('No description available')
+        ).toBeInTheDocument();
+    });
+
+    it('should renders textarea when in editing mode', () => {
+        render(
+            <TaskDescription
+                isEditing={true}
+                purpose="Test Purpose"
+                handleChange={mockHandleChange}
+            />
+        );
+        expect(screen.getByTestId('purpose-textarea')).toBeInTheDocument();
+    });
+
+    it('should calls handleChange when textarea value changes', () => {
+        render(
+            <TaskDescription
+                isEditing={true}
+                purpose="Test Purpose"
+                handleChange={mockHandleChange}
+            />
+        );
+        fireEvent.change(screen.getByTestId('purpose-textarea'), {
+            target: { value: 'New Purpose' },
+        });
+        expect(mockHandleChange).toHaveBeenCalled();
+    });
+});

__tests__/Unit/Components/Tasks/TaskDetailsSection.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import TaskDetailsSection from '@/components/taskDetails/TaskDetailsSection';
+import '@testing-library/jest-dom/extend-expect';
+import { TASK } from '../../../../__mocks__/db/tasks';
+import { useRouter } from 'next/router';
+import { api } from '@/app/services/api';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+
+const createMockStore = () => {
+    return configureStore({
+        reducer: {
+            user: (state = { roles: {} }) => state,
+            [api.reducerPath]: api.reducer,
+        },
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware().concat(api.middleware),
+    });
+};
+
+describe('TaskDetailsSection Component', () => {
+    const mockHandleTaskStatusUpdate = jest.fn();
+    const mockRouter = {
+        query: { dev: true },
+    };
+
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockReturnValue(mockRouter);
+    });
+
+    const defaultProps = {
+        isEditing: false,
+        type: TASK.type,
+        priority: TASK.priority,
+        status: TASK.status,
+        link: TASK.featureUrl,
+        percentCompleted: TASK.percentCompleted,
+        handleTaskStatusUpdate: mockHandleTaskStatusUpdate,
+        taskDetailsData: TASK,
+    };
+
+    it('should render task details correctly when not in editing mode', () => {
+        render(
+            <Provider store={createMockStore()}>
+                <TaskDetailsSection {...defaultProps} />
+            </Provider>
+        );
+
+        expect(screen.getByText(TASK.type)).toBeInTheDocument();
+        expect(screen.getByText(TASK.priority)).toBeInTheDocument();
+        expect(screen.getByText(TASK.status)).toBeInTheDocument();
+
+        const linkElement = screen.getByRole('link', {
+            name: /open github issue/i,
+        });
+        expect(linkElement).toHaveAttribute('href', TASK.featureUrl);
+    });
+
+    it('should render task status dropdown when in editing mode', () => {
+        render(
+            <Provider store={createMockStore()}>
+                <TaskDetailsSection {...defaultProps} isEditing={true} />
+            </Provider>
+        );
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
+        expect(screen.queryByText(TASK.status)).toBeNull();
+    });
+
+    it('should call handleTaskStatusUpdate when task status is changed', () => {
+        render(
+            <Provider store={createMockStore()}>
+                <TaskDetailsSection {...defaultProps} isEditing={true} />
+            </Provider>
+        );
+        const dropdown = screen.getByRole('combobox');
+        fireEvent.change(dropdown, { target: { value: 'DONE' } });
+
+        expect(mockHandleTaskStatusUpdate).toHaveBeenCalledWith({
+            newStatus: 'DONE',
+        });
+    });
+
+    it('should render progress container correctly', () => {
+        render(
+            <Provider store={createMockStore()}>
+                <TaskDetailsSection {...defaultProps} />
+            </Provider>
+        );
+        expect(
+            screen.getByText(`${TASK.percentCompleted}%`)
+        ).toBeInTheDocument();
+    });
+});

__tests__/Unit/Components/Tasks/TaskHeader.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import TaskHeader from '@/components/taskDetails/TaskHeader';
+import { ButtonProps } from '@/interfaces/taskDetails.type';
+
+const mockSetIsEditing = jest.fn();
+const mockOnSave = jest.fn();
+const mockOnCancel = jest.fn();
+const mockHandleChange = jest.fn();
+
+const renderTaskHeader = (isEditing = false) => {
+    return render(
+        <TaskHeader
+            isEditing={isEditing}
+            setIsEditing={mockSetIsEditing}
+            onSave={mockOnSave}
+            onCancel={mockOnCancel}
+            title="Test Title"
+            handleChange={mockHandleChange}
+            isUserAuthorized={true}
+        />
+    );
+};
+
+describe('TaskHeader Component', () => {
+    it('should renders the task title correctly when not editing', () => {
+        renderTaskHeader(false);
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+        expect(
+            screen.getByRole('button', { name: 'Edit' })
+        ).toBeInTheDocument();
+    });
+
+    it('should renders textarea for title when in editing mode', () => {
+        renderTaskHeader(true);
+        expect(screen.getByTestId('title-textarea')).toBeInTheDocument();
+        expect(
+            screen.getByRole('button', { name: 'Save' })
+        ).toBeInTheDocument();
+        expect(
+            screen.getByRole('button', { name: 'Cancel' })
+        ).toBeInTheDocument();
+    });
+
+    it('should calls setIsEditing with true when Edit button is clicked', () => {
+        renderTaskHeader(false);
+        fireEvent.click(screen.getByRole('button', { name: 'Edit' }));
+        expect(mockSetIsEditing).toHaveBeenCalledWith(true);
+    });
+
+    it('should calls onSave when Save button is clicked', () => {
+        renderTaskHeader(true);
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        expect(mockOnSave).toHaveBeenCalled();
+    });
+
+    it('should calls onCancel when Cancel button is clicked', () => {
+        renderTaskHeader(true);
+        fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+        expect(mockOnCancel).toHaveBeenCalled();
+    });
+});