AssignTask to rtk

.eslintrc.json

@@ -18,7 +18,7 @@
     "plugins": ["react", "@typescript-eslint"],
     "rules": {
         "linebreak-style": ["error", "unix"],
-        "quotes": ["error", "single"],
+        "quotes": ["error", "single", { "avoidEscape": true }],
         "semi": ["error", "always"],
         "react/react-in-jsx-scope": "off",
         "no-mixed-spaces-and-tabs": "off"

__mocks__/handlers/self.handler.ts

@@ -0,0 +1,40 @@
+import { rest } from 'msw';
+const URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+export const userSelfData = {
+	id: 'aTOG168A86JXY5wVosJx',
+	github_display_name: 'Mahima Khandelwal',
+	github_id: 'Maheima',
+	roles: {
+		member: true,
+		archived: false,
+		super_user: false,
+	},
+	last_name: 'Khandelwal',
+	username: 'mahima',
+	incompleteUserDetails: false,
+	profileStatus: 'BLOCKED',
+	picture: {
+		publicId: 'profile/aTOG168A86JXY5wVosJx/fj2c46kpmpy3gi8tl63s',
+		url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1674639637/profile/aTOG168A86JXY5wVosJx/fj2c46kpmpy3gi8tl63s.jpg'
+	},
+	status: 'active',
+	first_name: 'Mahima',
+	profileURL: 'https://mahima-profile-service.onrender.com'
+};
+
+export const selfHandlerFn = (status: number, response: object | null) => {
+	return rest.get(`${URL}/users/self`, (_, res, ctx) => {
+		return res(
+			ctx.delay(500),
+			ctx.status(status),
+			ctx.json(response)
+		);
+	});
+};
+
+const selfHandler = [
+	selfHandlerFn(200, userSelfData)
+];
+
+export default selfHandler;

__mocks__/handlers/tasks.handler.js

@@ -1,4 +1,5 @@
 import { tasks, PAGINATED_TASKS } from '../db/tasks';
+import usersData from '../../__mocks__/db/users';
 import { rest } from 'msw';
 const URL = process.env.NEXT_PUBLIC_BASE_URL;
 
@@ -12,8 +13,62 @@ const taskHandlers = [
             })
         );
     }),
-    rest.patch(`${URL}/tasks/:taskId`, (_, res, ctx) => {
-        return res(ctx.delay(5000), ctx.status(204));
+    rest.patch(`${URL}/tasks/:taskId`, async (req, res, ctx) => {
+        const { taskId } = req.params;
+        const { assignee } = await req.json();
+        const task = tasks.find(t => t.id === taskId);
+        const user = usersData.find(u => u.username === assignee);
+        if(!assignee) return res(
+            ctx.status(204),
+            ctx.delay(5000),
+        );
+        const currentUserResponse = await fetch(`${URL}/users/self`);
+        if(!currentUserResponse.ok) return res(
+            ctx.status(403),
+            ctx.delay(100),
+            ctx.json({
+                error: 'Forbidden',
+                message: 'You are restricted from performing this action'
+            }),
+        );
+        const currentUser = await currentUserResponse.json();
+        if(!(currentUser.roles.super_user || currentUser.roles.app_owner)) return res(
+            ctx.status(401),
+            ctx.delay(100),
+            ctx.json({
+                error: 'Unauthorized',
+                message: 'You are not authorized for this action.'
+            }),
+        );
+        if(!task) return res(
+            ctx.status(404),
+            ctx.delay(100),
+            ctx.json({
+                message: 'Task not found',
+                error: 'Not Found',
+            })
+        );
+        if(!user) return res(
+            ctx.status(404),
+            ctx.delay(100),
+            ctx.json({
+                message: 'User doesn\'t exist',
+                error: 'Not Found',
+            })  
+        );
+        if(user.status !== 'idle') return res(
+            ctx.delay(100),
+            ctx.status(404),
+            ctx.json({
+                message: 'Task cannot be assigned to users with active or OOO status',
+            })
+        );
+        return res(
+            ctx.json({
+                message: 'Task assigned',
+                Id: taskId,
+            }),
+        );
     }),
     rest.post(`${URL}/tasks`, async (req, res, ctx) => {
         const body = await req.json();
@@ -87,4 +142,4 @@ export const paginatedTasksHandler = [
             )
         );
     }),
-];
+];

__mocks__/handlers/users.handler.js

@@ -51,6 +51,24 @@ const usersHandler = [
             }
             })
         );
+    }),
+    rest.get(`${URL}/users/:userId`, (req, res, ctx) => {
+        const { userId } = req.params;
+        const user = usersData.find(user => user.username === userId);
+        if(!user)
+            return res(
+                ctx.delay(150),
+                ctx.status(404),
+                ctx.json({
+                    message: 'User doesn\'t exist',
+                    error: 'Not Found'
+                })
+            );
+        return res(
+            ctx.delay(150),
+            ctx.status(200),
+            ctx.json(user)
+        );
     })
 ];
 

__tests__/Unit/Components/availability-panel/drag-drop-context/index.test.tsx

@@ -0,0 +1,91 @@
+import DragDropContextWrapper from '@/components/availability-panel/drag-drop-context';
+import { tasks, TASK } from '../../../../../__mocks__/db/tasks';
+import { renderWithProviders } from '../../../../../src/test-utils/renderWithProvider';
+
+export const urlPattern =
+    /(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?\/[a-zA-Z0-9]{2,}|((https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?)|(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})?/g;
+export const idleMemberFallbackText = 'No idle members found';
+export const tasksFallbackText = 'No task found';
+
+describe('DrogDropContextWrapper Component', () => {
+    describe('should show placeholder', () => {
+        test('when there is no task & members', () => {
+            const { queryAllByAltText, getByText } = renderWithProviders(
+                <DragDropContextWrapper
+                    idleMembers={[]}
+                    unAssignedTasks={[]}
+                    refreshData={null}
+                />
+            );
+            getByText(idleMemberFallbackText);
+            getByText(tasksFallbackText);
+            const ghostNodes = queryAllByAltText('ghost');
+            expect(ghostNodes).toHaveLength(2);
+            expect(ghostNodes[0]).toHaveAttribute(
+                'src',
+                expect.stringMatching(urlPattern)
+            );
+            expect(ghostNodes[1]).toHaveAttribute(
+                'src',
+                expect.stringMatching(urlPattern)
+            );
+        });
+
+        test('when there is no task', () => {
+            const { getByAltText, getByText } = renderWithProviders(
+                <DragDropContextWrapper
+                    idleMembers={['Akash Shukla']}
+                    unAssignedTasks={[]}
+                    refreshData={null}
+                />
+            );
+            expect(getByText(tasksFallbackText)).toBeVisible();
+            expect(getByAltText('ghost')).toHaveAttribute(
+                'src',
+                expect.stringMatching(urlPattern)
+            );
+        });
+
+        test('when there is no idleMemeber', () => {
+            const { getByAltText, getByText } = renderWithProviders(
+                <DragDropContextWrapper
+                    idleMembers={[]}
+                    unAssignedTasks={tasks}
+                    refreshData={null}
+                />
+            );
+            expect(getByText(idleMemberFallbackText)).toBeVisible();
+            expect(getByAltText('ghost')).toHaveAttribute(
+                'src',
+                expect.stringMatching(urlPattern)
+            );
+        });
+    });
+
+    test('should render all the tasks & members as expected', () => {
+        const { queryAllByText, getByText } = renderWithProviders(
+            <DragDropContextWrapper
+                idleMembers={['Akash Shukla']}
+                unAssignedTasks={tasks}
+                refreshData={null}
+            />
+        );
+        const unAssignedTaskNodes = queryAllByText(TASK.title);
+        expect(unAssignedTaskNodes).toHaveLength(10);
+        expect(unAssignedTaskNodes[0]).toBeVisible();
+        expect(unAssignedTaskNodes[6]).toBeVisible();
+        getByText('Akash Shukla');
+    });
+
+    test('should have tasks & members items draggable', () => {
+        const { container } = renderWithProviders(
+            <DragDropContextWrapper
+                idleMembers={['Akash Shukla']}
+                unAssignedTasks={tasks}
+                refreshData={null}
+            />
+        );
+        const taskList = container.querySelectorAll('.memberCard');
+        expect(taskList[0].getAttribute('draggable')).toBeTruthy();
+    });
+});