[Testing] - User should be able to update progress through progress b…

…ar (#686)

* added a progress slider to update progress of task

* added onMouseUp to reduce the API call

* removed console statements

* added if else condition and updated RTK query

* fixed css value and corrected spelling mistake

* seperated my small components files

* removed comments and corrected if condition

* User progress slider testing

* Progress slider test cases are passing

* removed unnecessary React fragments

* added more test files

* added jest.fakeTimer to give fake system time to simulate and keep current date constant

* added tests for feature flag and also test for progress indicator component

* removed console statement and added a function

* removed comments from test case file

---------

Co-authored-by: Sunny Sahsi <[email protected]>

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

@@ -0,0 +1,51 @@
+import { store } from '@/app/store';
+import HandleProgressbar from '@/components/tasks/card/ProgressBar';
+import ProgressIndicator from '@/components/tasks/card/ProgressIndicator';
+import ProgressSlider from '@/components/tasks/card/ProgressSlider';
+import { renderWithRouter } from '@/test_utils/createMockRouter';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+
+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',
+};
+
+describe('Progress Bar', () => {
+    test('Should render Progress slider component if progress is true', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <HandleProgressbar {...DEFAULT_PROPS} progress={true} />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+        render(<ProgressSlider {...ProgressSliderProps} />);
+        expect(screen.getByText('40%')).toBeInTheDocument();
+    });
+    test('Should render Progress Indicator component if progress is false', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <HandleProgressbar {...DEFAULT_PROPS} progress={false} />
+            </Provider>
+        ),
+            { query: { dev: 'false' } };
+        render(<ProgressIndicator {...ProgressIndicatorProps} />);
+        expect(screen.getByText('50%')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,18 @@
+import ProgressIndicator from '@/components/tasks/card/ProgressIndicator';
+import { render } from '@testing-library/react';
+
+const DEFAULT_PROPS = {
+    percentCompleted: 50,
+    startedOn: '10 july 2023',
+    endsOn: '14 July 2023',
+};
+
+describe('Progress Indicator', () => {
+    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);
+    });
+});

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

@@ -0,0 +1,18 @@
+import ProgressSlider from '@/components/tasks/card/ProgressSlider';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+describe('Progress Slider', () => {
+    const DEFAULT_PROPS = {
+        debounceSlider: jest.fn(),
+        handleProgressChange: jest.fn(),
+    };
+    test('should render range input field', async () => {
+        render(<ProgressSlider {...DEFAULT_PROPS} value={40} />);
+        const sliderInput = screen.getByRole('slider');
+        await fireEvent.change(sliderInput, { target: { value: 50 } });
+        expect(DEFAULT_PROPS.handleProgressChange).toHaveBeenCalled();
+        fireEvent.mouseUp(sliderInput);
+        expect(DEFAULT_PROPS.debounceSlider).toHaveBeenCalled();
+        expect(sliderInput).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,26 @@
+import HandleProgressText from '@/components/tasks/card/ProgressText';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+const DefaultProps = {
+    handleSaveProgressUpdate: jest.fn(),
+    handleProgressUpdate: jest.fn(),
+};
+
+describe('ProgressText', () => {
+    test('should render save Progress Text', () => {
+        const progress = true;
+        const { getByText } = render(
+            <HandleProgressText progress={progress} {...DefaultProps} />
+        );
+        fireEvent.click(screen.getByText('save Progress'));
+        expect(getByText('save Progress')).toBeInTheDocument();
+    });
+    test('should render Progress update Text', () => {
+        const progress = false;
+        const { getByText } = render(
+            <HandleProgressText progress={progress} {...DefaultProps} />
+        );
+        fireEvent.click(screen.getByText('Progress update'));
+        expect(getByText('Progress update')).toBeInTheDocument();
+    });
+});

__tests__/Utils/getPercentageOfDaysLeft.test.ts

@@ -0,0 +1,12 @@
+import getPercentageOfDaysLeft from '@/utils/getPercentageOfDaysLeft';
+
+describe('getPercentageOfDaysLeft', () => {
+    test('should render percentage', () => {
+        jest.useFakeTimers().setSystemTime(new Date('10 july 2023'));
+        const percentageOfDaysLeft = getPercentageOfDaysLeft(
+            '1688515200',
+            '1689120000'
+        );
+        expect(Number(percentageOfDaysLeft.toFixed(2))).toBe(28.57);
+    });
+});

__tests__/Utils/handleProgressColor.test.ts

@@ -0,0 +1,35 @@
+import handleProgressColor from '@/utils/handleProgressColor';
+
+describe('handleProgressColor', () => {
+    beforeEach(() => {
+        jest.useFakeTimers().setSystemTime(new Date('10 july 2023'));
+    });
+    test('should render green color', () => {
+        jest.useFakeTimers().setSystemTime(new Date('11 july 2023'));
+        const colorName = handleProgressColor(100, '1688732501', '1689552000');
+        expect(colorName).toBe('progressGreen');
+    });
+    test('should render red color ', () => {
+        jest.useFakeTimers().setSystemTime(new Date('11 july 2023'));
+        const colorName = handleProgressColor(45, '1688817600', '1689033600');
+        expect(colorName).toBe('progressRed');
+    });
+
+    test('should render red color', () => {
+        jest.useFakeTimers().setSystemTime(new Date('11 july 2023'));
+        const colorName = handleProgressColor(0, '1688515200', '1689163200');
+        expect(colorName).toBe('progressRed');
+    });
+
+    test('should render Orange color', () => {
+        jest.useFakeTimers().setSystemTime(new Date('11 july 2023'));
+        const colorName = handleProgressColor(10, '1688884200', '1689143400');
+        expect(colorName).toBe('progressOrange');
+    });
+
+    test('should render Yellow color', () => {
+        jest.useFakeTimers().setSystemTime(new Date('11 july 2023'));
+        const colorName = handleProgressColor(30, '1688884200', '1689143400');
+        expect(colorName).toBe('progressYellow');
+    });
+});

src/utils/getPercentageOfDaysLeft.ts

@@ -9,11 +9,17 @@ const getPercentageOfDaysLeft = (startedOn: string, endsOn: string): number => {
     const startDate = inputParser(startedOn);
     const endDate = inputParser(endsOn);
 
-    // It provides us with total days that are there for the the project and number of days left
+    /**
+     * It provides us with total days that are there for the the project and
+     * number of days left
+     */
     const totalDays = endDate.diff(startDate, 'days');
     const daysLeft = endDate.diff(new Date(), 'days');
 
-    // It provides the percentage of days left
+    /**
+     * It provides the percentage of days left
+     */
+
     const percentageOfDaysLeft = (daysLeft / totalDays) * 100;
     return percentageOfDaysLeft;
 };