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/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();
+    });
+});

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

@@ -0,0 +1,49 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TaskParticipants } from '@/components/taskDetails/TaskParticipants';
+import { Provider } from 'react-redux';
+import { store } from '@/app/store';
+
+const mockHandleAssignment = jest.fn();
+const mockHandleAssigneSelect = jest.fn();
+const mockSetShowSuggestion = jest.fn();
+
+const renderWithProvider = (ui: React.ReactElement) => {
+    return render(<Provider store={store()}>{ui}</Provider>);
+};
+
+describe('TaskParticipants Component', () => {
+    it('should render the assignee name correctly when not editing', () => {
+        renderWithProvider(
+            <TaskParticipants
+                isEditing={false}
+                isUserAuthorized={true}
+                assigneeName="John Doe"
+                showSuggestion={false}
+                handleAssignment={mockHandleAssignment}
+                handleAssigneSelect={mockHandleAssigneSelect}
+                setShowSuggestion={mockSetShowSuggestion}
+            />
+        );
+
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+
+    it('should render the Suggestions component when editing', () => {
+        renderWithProvider(
+            <TaskParticipants
+                isEditing={true}
+                isUserAuthorized={true}
+                assigneeName="John Doe"
+                showSuggestion={true}
+                handleAssignment={mockHandleAssignment}
+                handleAssigneSelect={mockHandleAssigneSelect}
+                setShowSuggestion={mockSetShowSuggestion}
+            />
+        );
+
+        const input = screen.getByRole('textbox');
+        expect(input).toBeInTheDocument();
+        fireEvent.change(input, { target: { value: 'Jane Doe' } });
+        expect(mockHandleAssignment).toHaveBeenCalled();
+    });
+});