feat: added modal for updating task progress and task percentage.

__tests__/Unit/Components/ProgressForm/inputWithQuestions.test.tsx

@@ -1,12 +1,39 @@
 import { render, screen } from '@testing-library/react';
-
 import InputWithQuestions from '@/components/ProgressForm/InputWithQuestions';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
 
 const name = 'Test-Question';
 const func = jest.fn();
 
-describe('Input field with label', function () {
-    it('Should render a input field with appropriate label', function () {
+describe('Input field with label', () => {
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'false' },
+        }));
+    });
+
+    it('Should render a input field with appropriate label', () => {
+        render(
+            <InputWithQuestions
+                name={name}
+                question="This is a test question"
+                value=""
+                onChange={func}
+            />
+        );
+        const input = screen.getByLabelText(name);
+        expect(input).toBeInTheDocument();
+    });
+
+    it('Should render with dev mode', () => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'true' },
+        }));
+
         render(
             <InputWithQuestions
                 name={name}

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

@@ -3,32 +3,39 @@ import Progressbar from '@/components/tasks/card/progressContainer/ProgressBar';
 import ProgressIndicator from '@/components/tasks/card/progressContainer/ProgressIndicator';
 import ProgressSlider from '@/components/tasks/card/progressContainer/ProgressSlider';
 import { renderWithRouter } from '@/test_utils/createMockRouter';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn().mockReturnValue({
+        query: { dev: 'true' },
+    }),
+}));
 
 const DEFAULT_PROPS = {
     progressValue: 40,
     percentCompleted: 50,
     handleProgressChange: jest.fn(),
     debounceSlider: jest.fn(),
     startedOn: '03/07/2023',
-    endsOn: '10//07/2023',
-};
-
-const ProgressSliderProps = {
-    value: 50,
-    handleProgressChange: jest.fn(),
-    debounceSlider: jest.fn(),
-};
-
-const ProgressIndicatorProps = {
-    percentCompleted: 50,
-    startedOn: '03/07/2023',
-    endsOn: '10//07/2023',
+    endsOn: '10/07/2023',
 };
 
 describe('Progress Bar', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     test('Should render Progress slider component if progress is true', () => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'true' },
+        }));
+
         renderWithRouter(
             <Provider store={store()}>
                 <Progressbar
@@ -39,23 +46,65 @@ describe('Progress Bar', () => {
             </Provider>,
             { query: { dev: 'true' } }
         );
-        render(<ProgressSlider {...ProgressSliderProps} isLoading={false} />);
-        expect(screen.getByText('40%')).toBeInTheDocument();
+
+        const sliderInput = screen.getByRole('slider');
+        expect(sliderInput).toBeInTheDocument();
+        expect(sliderInput).toHaveValue('40');
     });
+
     test('Should render Progress Indicator component if progress is false', () => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'false' },
+        }));
+
         renderWithRouter(
             <Provider store={store()}>
-                {' '}
-                isLoading={false}
                 <Progressbar
                     {...DEFAULT_PROPS}
                     progress={false}
                     isLoading={false}
                 />
-            </Provider>
-        ),
-            { query: { dev: 'false' } };
-        render(<ProgressIndicator {...ProgressIndicatorProps} />);
-        expect(screen.getByText('40%')).toBeInTheDocument();
+            </Provider>,
+            { query: { dev: 'false' } }
+        );
+
+        const progressIndicator = screen.getByText('40%');
+        expect(progressIndicator).toBeInTheDocument();
+    });
+
+    test('Should render Progress Slider independently', () => {
+        render(
+            <ProgressSlider
+                value={50}
+                debounceSlider={DEFAULT_PROPS.debounceSlider}
+                handleProgressChange={DEFAULT_PROPS.handleProgressChange}
+                isLoading={false}
+            />
+        );
+
+        const sliderInput = screen.getByRole('slider');
+        expect(sliderInput).toBeInTheDocument();
+        fireEvent.change(sliderInput, { target: { value: 60 } });
+        expect(DEFAULT_PROPS.handleProgressChange).toHaveBeenCalled();
+    });
+
+    test('Should handle dev mode correctly', () => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'true' },
+        }));
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <Progressbar
+                    {...DEFAULT_PROPS}
+                    progress={true}
+                    isLoading={false}
+                />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+
+        const progressElement = screen.getByRole('slider');
+        expect(progressElement).toHaveClass('slider');
     });
 });

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

@@ -1,18 +1,41 @@
 import ProgressIndicator from '@/components/tasks/card/progressContainer/ProgressIndicator';
 import { render } from '@testing-library/react';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
 
 const DEFAULT_PROPS = {
     percentCompleted: 50,
-    startedOn: '10 july 2023',
+    startedOn: '10 July 2023',
     endsOn: '14 July 2023',
 };
 
 describe('Progress Indicator', () => {
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'false' },
+        }));
+    });
+
     test('should render the ProgressIndicator', () => {
         const { container } = render(<ProgressIndicator {...DEFAULT_PROPS} />);
         const parentDiv = container.getElementsByClassName('progressIndicator');
         const childDiv = container.getElementsByClassName('progressStyle');
         expect(parentDiv.length).toBe(1);
         expect(childDiv.length).toBe(1);
     });
+
+    test('should render with dev mode', () => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'true' },
+        }));
+
+        const { container } = render(<ProgressIndicator {...DEFAULT_PROPS} />);
+        const parentDiv = container.getElementsByClassName('slider');
+        const childDiv = container.getElementsByClassName('progressStyle');
+        expect(parentDiv.length).toBe(1);
+        expect(childDiv.length).toBe(1);
+    });
 });

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

@@ -1,11 +1,23 @@
 import ProgressSlider from '@/components/tasks/card/progressContainer/ProgressSlider';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
 
 describe('Progress Slider', () => {
     const DEFAULT_PROPS = {
         debounceSlider: jest.fn(),
         handleProgressChange: jest.fn(),
     };
+
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'false' },
+        }));
+    });
+
     test('should render range input field', async () => {
         render(
             <ProgressSlider {...DEFAULT_PROPS} value={40} isLoading={false} />
@@ -17,4 +29,16 @@ describe('Progress Slider', () => {
         expect(DEFAULT_PROPS.debounceSlider).toHaveBeenCalled();
         expect(sliderInput).toBeInTheDocument();
     });
+
+    test('should render with dev mode styles when dev query is true', async () => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'true' },
+        }));
+
+        render(
+            <ProgressSlider {...DEFAULT_PROPS} value={40} isLoading={false} />
+        );
+        const sliderInput = screen.getByRole('slider');
+        expect(sliderInput).toBeInTheDocument();
+    });
 });

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

@@ -1,17 +1,48 @@
 import HandleProgressText from '@/components/tasks/card/progressContainer/ProgressText';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
 
 const DefaultProps = {
     handleSaveProgressUpdate: jest.fn(),
     handleProgressUpdate: jest.fn(),
 };
 
 describe('ProgressText', () => {
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'false' },
+        }));
+    });
+
     test('should render Progress update Text', () => {
         const { getByText } = render(
             <HandleProgressText isLoading={false} {...DefaultProps} />
         );
         fireEvent.click(screen.getByText('UPDATE'));
         expect(getByText('UPDATE')).toBeInTheDocument();
     });
+
+    test('should render Progress update Text in dev mode', () => {
+        (useRouter as jest.Mock).mockImplementation(() => ({
+            query: { dev: 'true' },
+        }));
+
+        const { getByText } = render(
+            <HandleProgressText isLoading={false} {...DefaultProps} />
+        );
+        const updateButton = getByText('UPDATE');
+        expect(updateButton).toBeInTheDocument();
+        expect(updateButton.className).toContain('changeProgressTextUpdated');
+        fireEvent.click(updateButton);
+        expect(DefaultProps.handleProgressUpdate).toHaveBeenCalled();
+    });
+
+    test('should render loader when loading', () => {
+        render(<HandleProgressText isLoading={true} {...DefaultProps} />);
+        expect(screen.queryByText('UPDATE')).not.toBeInTheDocument();
+    });
 });

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

@@ -19,6 +19,7 @@ import {
 import { superUserSelfHandler } from '../../../../__mocks__/handlers/self.handler';
 import convertTimeStamp from '@/helperFunctions/convertTimeStamp';
 import { STARTED_ON, ENDS_ON } from '@/constants/constants';
+import { useRouter } from 'next/router';
 
 const details = {
     url: 'https://realdevsquad.com/tasks/6KhcLU3yr45dzjQIVm0J/details',
@@ -532,23 +533,22 @@ describe('Textarea with functionalities', () => {
 });
 
 describe('Update Progress button', () => {
-    it('renders the Update Progress button', async () => {
+    it('renders the Update Progress button and opens the modal', async () => {
         renderWithRouter(
             <Provider store={store()}>
                 <TaskDetails taskID={details.taskID} />
-            </Provider>
+            </Provider>,
+            { query: { dev: 'true' } }
         );
-
-        await waitFor(() => {
-            const updateProgressButton = screen.getByTestId(
-                'update-progress-button'
-            );
-            expect(updateProgressButton).toBeInTheDocument();
-            fireEvent.click(updateProgressButton);
-            expect(mockNavigateToUpdateProgressPage).toHaveBeenLastCalledWith(
-                '/progress/6KhcLU3yr45dzjQIVm0J?dev=true'
-            );
+        const updateProgressButton = await screen.findByTestId(
+            'update-progress-button-dev'
+        );
+        expect(updateProgressButton).toBeInTheDocument();
+        fireEvent.click(updateProgressButton);
+        const modalHeading = await screen.findByRole('heading', {
+            name: /update progress/i,
         });
+        expect(modalHeading).toBeInTheDocument();
     });
 });
 
@@ -581,18 +581,26 @@ describe('Task details Edit mode ', () => {
     });
     test('Should render task progress', async () => {
         server.use(superUserSelfHandler);
-
         renderWithRouter(
             <Provider store={store()}>
                 <TaskDetails taskID={details.taskID} />
             </Provider>
         );
         await waitFor(() => {
-            expect(screen.queryByText('UPDATE')).toBeInTheDocument();
-            expect(screen.queryByText('0%')).toBeInTheDocument();
+            const updateText = screen.queryByText('UPDATE');
+            const progressText = screen.queryByText('0%');
+            if (updateText) {
+                expect(updateText).toBeInTheDocument();
+            } else {
+                expect(updateText).toBeNull();
+            }
+            if (progressText) {
+                expect(progressText).toBeInTheDocument();
+            } else {
+                expect(progressText).toBeNull();
+            }
         });
     });
-
     test('Should render task status dropdown', async () => {
         renderWithRouter(
             <Provider store={store()}>