Merge branch 'develop' into feat/button-to-add-taskRequest

__mocks__/handlers/task-details.handler.ts

@@ -34,6 +34,37 @@ const taskDetailsHandler = [
             })
         );
     }),
+    rest.get(`${URL}/tasks/6KhcLU3yr45dzjQIVm0k/details`, (_, res, ctx) => {
+        return res(
+            ctx.status(200),
+            ctx.json({
+                message: 'task returned successfully',
+                taskData: {
+                    id: '6KhcLU3yr45dzjQIVm0k',
+                    isNoteworthy: true,
+                    lossRate: {
+                        dinero: 0,
+                        neelam: 0,
+                    },
+                    endsOn: 1618790410,
+                    title: 'test 1 for drag and drop',
+                    status: 'assigned',
+                    assignee: 'ankur',
+                    links: ['null'],
+                    dependsOn: ['null'],
+                    percentCompleted: 0,
+                    type: 'feature',
+                    priority: 'high',
+                    featureUrl: 'https://www.sampleUrl.com',
+                    startedOn: 1617062400,
+                    completionAward: {
+                        neelam: 0,
+                        dinero: 110,
+                    },
+                },
+            })
+        );
+    }),
     rest.patch(`${URL}/tasks/:taskId`, (_, res, ctx) => {
         return res(ctx.status(204));
     }),

__tests__/Unit/Components/Select/Select.test.tsx

@@ -0,0 +1,197 @@
+import { render, fireEvent, screen } from '@testing-library/react';
+import { Select } from '@/components/Select';
+
+const sampleOptions = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+];
+
+const onSelectMock = jest.fn();
+describe('Select', () => {
+    test('renders with initial state', () => {
+        const value = sampleOptions[0];
+        render(
+            <Select
+                value={value}
+                onChange={() => onSelectMock()}
+                options={sampleOptions}
+            />
+        );
+
+        expect(screen.queryByTestId('selected-option')).toBeInTheDocument();
+
+        expect(screen?.queryByTestId('options')).not.toHaveClass('show');
+    });
+
+    test('opens dropdown when clicked', () => {
+        const value = sampleOptions[0];
+        render(
+            <Select
+                value={value}
+                onChange={() => onSelectMock()}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen?.getByRole('button', {
+            name: value.label,
+        });
+
+        fireEvent.click(selectContainer);
+
+        expect(screen?.queryByTestId('options')).toHaveClass('show');
+    });
+
+    test('selects an option', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+
+        const option2 = screen?.getByText('Option 2');
+        fireEvent.click(option2);
+
+        expect(onChangeMock).toHaveBeenCalledWith(sampleOptions[1]);
+    });
+
+    test('selects an option for touch', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+
+        const option2 = screen?.getByText('Option 2');
+        fireEvent.pointerEnter(option2);
+
+        expect(onChangeMock).toHaveBeenCalledWith(sampleOptions[1]);
+    });
+
+    test('handler should not be called when event target is not a child of container', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByTestId('selected-option');
+
+        // Simulate a keyboard event with a target that is not a child of the container
+        fireEvent.keyDown(document.body, { key: 'Enter' });
+
+        // The handler function should not be called since the target is not a child of the container
+        expect(onChangeMock).not.toHaveBeenCalled();
+
+        // Handler should be called when the target is a child of the container
+        fireEvent.click(selectContainer);
+        // The dropdown should be visible after the key press.
+        expect(screen?.queryByTestId('options')).toHaveClass('show');
+    });
+
+    test('navigates options with arrow keys', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByRole('button');
+        // Simulate pressing the "ArrowDown" key to open the dropdown.
+        fireEvent.keyDown(selectContainer, {
+            key: 'ArrowDown',
+            code: 'ArrowDown',
+        });
+        // The dropdown should be visible after the key press.
+        expect(screen.getByTestId('options')).toBeVisible();
+
+        // Simulate pressing the "ArrowDown" key to open the dropdown.
+        fireEvent.keyDown(selectContainer, {
+            key: 'ArrowDown',
+            code: 'ArrowDown',
+        });
+
+        // The second option should be highlighted.
+        expect(screen.getByText('Option 2')).toHaveClass('highlighted');
+    });
+
+    test('using escape key for closing the options', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByRole('button');
+        fireEvent.click(selectContainer);
+
+        // The dropdown should be visible after the key press.
+        expect(screen.getByTestId('options')).toBeVisible();
+
+        // Simulate pressing the "Escape" key to close the dropdown.
+        fireEvent.keyDown(selectContainer, { key: 'Escape', code: 'Escape' });
+
+        //  The dropdown should be closed after selecting an option.
+        expect(screen?.queryByTestId('options')).not.toHaveClass('show');
+    });
+
+    test('handler should close the dropdown when the container loses focus (onBlur event)', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const selectContainer = screen.getByTestId('selected-option');
+        const optionsList = screen.getByTestId('options');
+
+        // Open the dropdown by simulating a click on the select container
+        fireEvent.click(selectContainer);
+        expect(optionsList).toBeVisible();
+
+        // Simulate blur event on the select container
+        fireEvent.blur(selectContainer);
+
+        // The dropdown should be closed after the container loses focus
+        expect(screen?.queryByTestId('options')).not.toHaveClass('show');
+    });
+
+    test('handler should set the highlighted index when an option is hovered (onMouseEnter event)', () => {
+        const value = sampleOptions[0];
+        const onChangeMock = jest.fn();
+        render(
+            <Select
+                value={value}
+                onChange={onChangeMock}
+                options={sampleOptions}
+            />
+        );
+        const optionElement = screen.getByText('Option 2');
+
+        // Simulate mouse enter on the option element
+        fireEvent.mouseEnter(optionElement);
+
+        // The highlighted index should be set to the index of the hovered option
+        expect(optionElement).toHaveClass('highlighted');
+    });
+});

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

@@ -67,12 +67,24 @@ describe('TaskDetails Page', () => {
         });
     });
 
-    it('Should render No Description available for a task without description', async () => {
+    it('Should render Description available for a task', async () => {
         const { getByText } = renderWithRouter(
             <Provider store={store()}>
                 <TaskDetails taskID={details.taskID} />
             </Provider>
         );
+        await waitFor(() => {
+            expect(
+                getByText('This is a sample description')
+            ).toBeInTheDocument();
+        });
+    });
+    it('Should render No Description available for a task without description', async () => {
+        const { getByText } = renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID="6KhcLU3yr45dzjQIVm0k" />
+            </Provider>
+        );
         await waitFor(() => {
             expect(getByText('No description available')).toBeInTheDocument();
         });
@@ -137,6 +149,16 @@ describe('TaskDetails Page', () => {
             expect(getByText('Ankush')).toBeInTheDocument();
         });
     });
+    test('should render "Something went wrong!" when isError is true', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={''} />
+            </Provider>
+        );
+
+        const errorElement = await screen.findByText('Something went wrong!');
+        expect(errorElement).toBeInTheDocument();
+    });
     it('Renders Task Started-on Date', async () => {
         const { getByText } = renderWithRouter(
             <Provider store={store()}>