From c6f8f9b84c1240991e431e988f7da99bb88010e4 Mon Sep 17 00:00:00 2001 From: AmirHossein Mahmoodi Date: Wed, 18 Oct 2023 15:23:21 +0330 Subject: [PATCH] CFE-4 implementation of mock handler structure --- mocks/handler.js | 153 ++---------------- mocks/handlers/experts.js | 20 +++ mocks/handlers/permissions.js | 23 +++ mocks/handlers/provinces.js | 19 +++ mocks/handlers/roles.js | 70 ++++++++ mocks/handlers/user.js | 25 +++ .../expert-management/DataTable/index.jsx | 4 +- .../Form/CreateForm/CreateContent/index.jsx | 4 +- .../Form/DeleteForm/index.jsx | 4 +- .../Form/UpdateForm/UpdateContent/index.jsx | 4 +- .../Form/CreateForm/CreateContent.jsx | 79 ++++----- .../Form/DeleteForm/DeleteContent.jsx | 8 +- .../Form/UpdateForm/UpdateContent.jsx | 25 +-- .../RoleManagementComponent.jsx | 6 +- src/components/first/__tests__/index.test.js | 4 +- src/core/data/apiRoutes.js | 16 +- src/lib/app/contexts/user.jsx | 4 +- 17 files changed, 252 insertions(+), 216 deletions(-) create mode 100644 mocks/handlers/experts.js create mode 100644 mocks/handlers/permissions.js create mode 100644 mocks/handlers/provinces.js create mode 100644 mocks/handlers/roles.js create mode 100644 mocks/handlers/user.js diff --git a/mocks/handler.js b/mocks/handler.js index 18458fb..fbb803a 100644 --- a/mocks/handler.js +++ b/mocks/handler.js @@ -1,146 +1,13 @@ -import { - GET_PERMISSIONS_LIST, - GET_ROLE_MANAGEMENT, - GET_SIDEBAR_NOTIFICATION, - GET_USER_ROUTE, - SET_USER_PASSWORD, - EXPERT_MANAGEMENT, - GET_PROVINCE_LIST, - GET_ROLE_LIST, -} from "@/core/data/apiRoutes"; -import {rest} from "msw"; +import {userHandler} from "./handlers/user"; +import {permissionsHandler} from "./handlers/permissions"; +import {rolesHandler} from "./handlers/roles"; +import {provincesHandler} from "./handlers/provinces"; +import {expertsHandler} from "./handlers/experts"; export const handler = [ - rest.get(GET_USER_ROUTE, (req, res, ctx) => { - return res(ctx.json({ - data: { - id: 10, - permissions: [ - "manage_users" - ], - } - })) - }), - rest.get(GET_SIDEBAR_NOTIFICATION, (req, res, ctx) => { - return res(ctx.json({ - data: [] - })) - }), - rest.post(SET_USER_PASSWORD, (req, res, ctx) => { - return res( - ctx.status(200), - ); - }), - rest.get(GET_PERMISSIONS_LIST, (req, res, ctx) => { - return res(ctx.json( - { - data: [ - { - id: 1, - name: "manage_passenger_office_navgan", - name_fa: "مدیریت کارتابل رییس اداره مسافری استان" - }, - { - id: 2, - name: "manage_province_working_group_navgan", - name_fa: "مدیریت کارتابل کارگروه استانی" - } - ] - } - )) - }), - rest.get(GET_ROLE_MANAGEMENT, (req, res, ctx) => { - return res( - ctx.json( - { - data: [ - { - created_at: "2023-10-01T07:20:07.000000Z", - guard_name: "api", - id: 1, - name: "admin", - name_fa: "ادمین", - permissions: [ - { - id: 1, - name: "manage_users", - }, - { - id: 2, - name: "manage_roles", - }, - ], - updated_at: "2023-10-10T07:38:12.000000Z" - }, - { - created_at: "2023-10-01T07:20:07.000000Z", - guard_name: "api", - id: 2, - name: "manager", - name_fa: "مدیر", - permissions: [ - { - id: 1, - name: "manage_users", - }, - { - id: 2, - name: "manage_roles", - }, - ], - updated_at: "2023-10-10T07:38:12.000000Z" - } - ], - meta: { - totalRowCount: 2 - } - } - ), - ); - }), - rest.get(GET_PROVINCE_LIST, (req, res, ctx) => { - return res(ctx.json({ - data: [ - { - id: 1, - name: "آذربایجان شرقی" - }, - { - id: 3, - name: "اردبیل" - } - ] - })) - }), - rest.get(GET_ROLE_LIST, (req, res, ctx) => { - return res(ctx.json({ - data: [ - { - id: 1, - name: "admin", - name_fa: "ادمین" - }, - { - id: 2, - name: "manager", - name_fa: "مدیر" - } - ] - })) - }), - rest.post(EXPERT_MANAGEMENT, (req, res, ctx) => { - return res( - ctx.status(200), - ); - }), - rest.delete(`${EXPERT_MANAGEMENT}/:id`, (req, res, ctx) => { - return res( - ctx.status(200), - ); - }), - rest.post(`${EXPERT_MANAGEMENT}/:id`, (req, res, ctx) => { - return res( - ctx.status(200), - ); - }), + ...userHandler, + ...permissionsHandler, + ...rolesHandler, + ...provincesHandler, + ...expertsHandler ] \ No newline at end of file diff --git a/mocks/handlers/experts.js b/mocks/handlers/experts.js new file mode 100644 index 0000000..1bf2a31 --- /dev/null +++ b/mocks/handlers/experts.js @@ -0,0 +1,20 @@ +import {rest} from "msw"; +import {ADD_EXPERT, DELETE_EXPERT, UPDATE_EXPERT} from "@/core/data/apiRoutes"; + +export const expertsHandler = [ + rest.post(ADD_EXPERT, (req, res, ctx) => { + return res( + ctx.status(200), + ); + }), + rest.delete(`${DELETE_EXPERT}/:id`, (req, res, ctx) => { + return res( + ctx.status(200), + ); + }), + rest.post(`${UPDATE_EXPERT}/:id`, (req, res, ctx) => { + return res( + ctx.status(200), + ); + }), +] \ No newline at end of file diff --git a/mocks/handlers/permissions.js b/mocks/handlers/permissions.js new file mode 100644 index 0000000..dfe792b --- /dev/null +++ b/mocks/handlers/permissions.js @@ -0,0 +1,23 @@ +import {rest} from "msw"; +import {GET_PERMISSIONS_LIST} from "@/core/data/apiRoutes"; + +export const permissionsHandler = [ + rest.get(GET_PERMISSIONS_LIST, (req, res, ctx) => { + return res(ctx.json( + { + data: [ + { + id: 1, + name: "manage_passenger_office_navgan", + name_fa: "مدیریت کارتابل رییس اداره مسافری استان" + }, + { + id: 2, + name: "manage_province_working_group_navgan", + name_fa: "مدیریت کارتابل کارگروه استانی" + } + ] + } + )) + }) +] \ No newline at end of file diff --git a/mocks/handlers/provinces.js b/mocks/handlers/provinces.js new file mode 100644 index 0000000..9065c12 --- /dev/null +++ b/mocks/handlers/provinces.js @@ -0,0 +1,19 @@ +import {rest} from "msw"; +import {GET_PROVINCE_LIST} from "@/core/data/apiRoutes"; + +export const provincesHandler = [ + rest.get(GET_PROVINCE_LIST, (req, res, ctx) => { + return res(ctx.json({ + data: [ + { + id: 1, + name: "آذربایجان شرقی" + }, + { + id: 3, + name: "اردبیل" + } + ] + })) + }), +] \ No newline at end of file diff --git a/mocks/handlers/roles.js b/mocks/handlers/roles.js new file mode 100644 index 0000000..1c26ef5 --- /dev/null +++ b/mocks/handlers/roles.js @@ -0,0 +1,70 @@ +import {rest} from "msw"; +import {GET_ROLE_LIST, GET_ROLES} from "@/core/data/apiRoutes"; + +export const rolesHandler = [ + rest.get(GET_ROLES, (req, res, ctx) => { + return res( + ctx.json( + { + data: [ + { + created_at: "2023-10-01T07:20:07.000000Z", + guard_name: "api", + id: 1, + name: "admin", + name_fa: "ادمین", + permissions: [ + { + id: 1, + name: "manage_users", + }, + { + id: 2, + name: "manage_roles", + }, + ], + updated_at: "2023-10-10T07:38:12.000000Z" + }, + { + created_at: "2023-10-01T07:20:07.000000Z", + guard_name: "api", + id: 2, + name: "manager", + name_fa: "مدیر", + permissions: [ + { + id: 1, + name: "manage_users", + }, + { + id: 2, + name: "manage_roles", + }, + ], + updated_at: "2023-10-10T07:38:12.000000Z" + } + ], + meta: { + totalRowCount: 2 + } + } + ), + ); + }), + rest.get(GET_ROLE_LIST, (req, res, ctx) => { + return res(ctx.json({ + data: [ + { + id: 1, + name: "admin", + name_fa: "ادمین" + }, + { + id: 2, + name: "manager", + name_fa: "مدیر" + } + ] + })) + }), +] \ No newline at end of file diff --git a/mocks/handlers/user.js b/mocks/handlers/user.js new file mode 100644 index 0000000..3f1fbe3 --- /dev/null +++ b/mocks/handlers/user.js @@ -0,0 +1,25 @@ +import {rest} from "msw"; +import {GET_SIDEBAR_NOTIFICATION, GET_USER, SET_USER_PASSWORD} from "@/core/data/apiRoutes"; + +export const userHandler = [ + rest.get(GET_USER, (req, res, ctx) => { + return res(ctx.json({ + data: { + id: 10, + permissions: [ + "manage_users" + ], + } + })) + }), + rest.get(GET_SIDEBAR_NOTIFICATION, (req, res, ctx) => { + return res(ctx.json({ + data: [] + })) + }), + rest.post(SET_USER_PASSWORD, (req, res, ctx) => { + return res( + ctx.status(200), + ); + }), +] \ No newline at end of file diff --git a/src/components/dashboard/expert-management/DataTable/index.jsx b/src/components/dashboard/expert-management/DataTable/index.jsx index 9c4e763..f91b93f 100644 --- a/src/components/dashboard/expert-management/DataTable/index.jsx +++ b/src/components/dashboard/expert-management/DataTable/index.jsx @@ -1,6 +1,6 @@ import DataTable from "@/core/components/DataTable"; import MuiDatePicker from "@/core/components/MuiDatePicker"; -import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes"; +import {GET_EXPERTS} from "@/core/data/apiRoutes"; import TableToolbar from "../TableToolbar"; import TableRowActions from "../TableRowActions"; import {Box, Typography} from "@mui/material"; @@ -165,7 +165,7 @@ function ExpertManagementDataTable() { return ( { formData.append("position", values.position); formData.append("roles", values.roles); - requestServer(`${EXPERT_MANAGEMENT}`, 'post', {auth: true, data: formData}) + requestServer(`${ADD_EXPERT}`, 'post', {auth: true, data: formData}) .then((response) => { setOpenCreateDialog(false) mutate(fetchUrl) diff --git a/src/components/dashboard/expert-management/Form/DeleteForm/index.jsx b/src/components/dashboard/expert-management/Form/DeleteForm/index.jsx index 03a9e82..d85e11f 100644 --- a/src/components/dashboard/expert-management/Form/DeleteForm/index.jsx +++ b/src/components/dashboard/expert-management/Form/DeleteForm/index.jsx @@ -10,7 +10,7 @@ import { } from "@mui/material"; import DeleteIcon from '@mui/icons-material/Delete'; import {useState} from "react"; -import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes"; +import {DELETE_EXPERT} from "@/core/data/apiRoutes"; import useRequest from "@/lib/app/hooks/useRequest"; import {useTranslations} from "next-intl"; @@ -22,7 +22,7 @@ const Delete = ({rowId, fetchUrl, mutate}) => { const handleDelete = () => { setIsSubmitting(true) - requestServer(`${EXPERT_MANAGEMENT}/${rowId}`, 'DELETE') + requestServer(`${DELETE_EXPERT}/${rowId}`, 'DELETE') .then((response) => { setOpenDeleteDialog(false); mutate(fetchUrl) diff --git a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/index.jsx b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/index.jsx index 3b60506..85de32b 100644 --- a/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/index.jsx +++ b/src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/index.jsx @@ -3,7 +3,7 @@ import * as Yup from "yup"; import {useTranslations} from "next-intl"; import {useFormik} from "formik"; import useRequest from "@/lib/app/hooks/useRequest"; -import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes"; +import {UPDATE_EXPERT} from "@/core/data/apiRoutes"; import PersonalInfo from "./PersonalInfo"; import UserInfo from "./UserInfo"; import RestInfo from "./RestInfo"; @@ -52,7 +52,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => { formData.append("position", values.position); formData.append("roles", values.roles); - requestServer(`${EXPERT_MANAGEMENT}/${row.original.id}`, 'post', {auth: true, data: formData}) + requestServer(`${UPDATE_EXPERT}/${row.original.id}`, 'post', {auth: true, data: formData}) .then((response) => { setOpenUpdateDialog(false) mutate(fetchUrl) diff --git a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx index db28f49..d027b85 100644 --- a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx @@ -1,21 +1,24 @@ import { Button, - Checkbox, CircularProgress, + Checkbox, + CircularProgress, DialogActions, - DialogContent, DialogTitle, + DialogContent, + DialogTitle, FormControl, FormControlLabel, FormHelperText, FormLabel, Grid, Stack, - TextField, Typography + TextField, + Typography } from "@mui/material"; import {useTranslations} from "next-intl"; import useRequest from "@/lib/app/hooks/useRequest"; import * as Yup from "yup"; import {useFormik} from "formik"; -import {ADD_ROLE_MANAGEMENT} from "@/core/data/apiRoutes"; +import {ADD_ROLE} from "@/core/data/apiRoutes"; import usePermissions from "@/lib/app/hooks/usePermissions"; const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => { @@ -40,7 +43,7 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => { formData.append(`permissions[${i}]`, values.permissions[i]); } - requestServer(ADD_ROLE_MANAGEMENT, 'post', { + requestServer(ADD_ROLE, 'post', { data: formData, }).then(() => { setOpenConfirmDialog(false) @@ -95,38 +98,40 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => { fullWidth > {formik.touched.permissions && formik.errors.permissions} - {isLoading ? - - - {t("AddDialog.loading_permissions_list")} - - :( - - <> - {permissions_list.map((permission) => ( - - { - if (e.target.checked) { - formik.setFieldValue("permissions", [...formik.values.permissions, permission.id]) - } else { - formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id)) - } - }} - /> - } - label={permission.name_fa} - /> - - ))} - - - ) - } + {isLoading ? + + + {t("AddDialog.loading_permissions_list")} + + : ( + + <> + {permissions_list.map((permission) => ( + + { + if (e.target.checked) { + formik.setFieldValue("permissions", [...formik.values.permissions, permission.id]) + } else { + formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id)) + } + }} + /> + } + label={permission.name_fa} + /> + + ))} + + + ) + } diff --git a/src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx b/src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx index 52674a5..a762980 100644 --- a/src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx +++ b/src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx @@ -1,5 +1,5 @@ import {Button, DialogActions, DialogContent, DialogTitle, Typography} from "@mui/material"; -import {DELETE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes"; +import {DELETE_ROLE} from "@/core/data/apiRoutes"; import {useState} from "react"; import useRequest from "@/lib/app/hooks/useRequest"; import useNotification from "@/lib/app/hooks/useNotification"; @@ -12,7 +12,7 @@ const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => { const {update_notification} = useNotification() const handleSubmit = () => { setIsSubmitting(true) - requestServer(`${DELETE_ROLE_MANAGEMENT}/${rowId}`, 'delete').then((response) => { + requestServer(`${DELETE_ROLE}/${rowId}`, 'delete').then((response) => { mutate(fetchUrl) update_notification() }).catch(() => { @@ -20,7 +20,7 @@ const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => { setIsSubmitting(false) }); } - return( + return ( <> {t("DeleteDialog.delete")} @@ -39,4 +39,4 @@ const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => { ) } -export default DeleteContent \ No newline at end of file +export default DeleteContent \ No newline at end of file diff --git a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx index 0815356..d5f3bb5 100644 --- a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx +++ b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx @@ -1,18 +1,21 @@ import { - Box, Button, - Checkbox, CircularProgress, DialogActions, - DialogContent, DialogTitle, + Checkbox, + CircularProgress, + DialogActions, + DialogContent, + DialogTitle, FormControl, FormControlLabel, FormHelperText, FormLabel, Grid, Stack, - TextField, Typography + TextField, + Typography } from "@mui/material"; import {useFormik} from "formik"; -import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes"; +import {UPDATE_ROLE} from "@/core/data/apiRoutes"; import * as Yup from "yup"; import usePermissions from "@/lib/app/hooks/usePermissions"; import useNotification from "@/lib/app/hooks/useNotification"; @@ -44,7 +47,7 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => { formData.append(`permissions[${i}]`, values.permissions[i]); } - requestServer(`${UPDATE_ROLE_MANAGEMENT}/${row.getValue("id")}`, 'post', { + requestServer(`${UPDATE_ROLE}/${row.getValue("id")}`, 'post', { data: formData, }).then((response) => { mutate(fetchUrl) @@ -56,7 +59,7 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => { }, }); - return( + return ( <> {t("UpdateDialog.update")} @@ -96,11 +99,13 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => { > {formik.touched.permissions && formik.errors.permissions} {isLoading ? - + - {t("UpdateDialog.loading_permissions_list")} + {t("UpdateDialog.loading_permissions_list")} - :( + : ( <> {permissions_list.map((permission) => ( diff --git a/src/components/dashboard/role-management/RoleManagementComponent.jsx b/src/components/dashboard/role-management/RoleManagementComponent.jsx index 0121c00..72cba70 100644 --- a/src/components/dashboard/role-management/RoleManagementComponent.jsx +++ b/src/components/dashboard/role-management/RoleManagementComponent.jsx @@ -1,5 +1,5 @@ import DataTable from "@/core/components/DataTable"; -import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes"; +import {GET_ROLES} from "@/core/data/apiRoutes"; import TableRowActions from "@/components/dashboard/role-management/TableRowActions"; import {Box, Typography} from "@mui/material"; import {useTranslations} from "next-intl"; @@ -65,10 +65,10 @@ const RoleManagementComponent = () => { datatype: "numeric", Cell: ({renderedCellValue}) => ({renderedCellValue}), }], []); - return( + return ( { describe("Rendering", () => { @@ -46,7 +46,7 @@ describe("First Component From First Page", () => { }); it("Show Login Button And Do Not Show Dashboard Button When User Authentication Is Expired", async () => { localStorage.setItem("_token", 'token'); - server.use([rest.get(GET_USER_ROUTE, (req, res, ctx) => { + server.use([rest.get(GET_USER, (req, res, ctx) => { return res(ctx.status(403)) })]) render(); diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index 34e4417..19534ca 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -21,22 +21,21 @@ export const SET_USER_PASSWORD = BASE_URL + "/api/profile/change_password"; //end change password //user data -export const GET_USER_ROUTE = BASE_URL + "/api/profile/info"; +export const GET_USER = BASE_URL + "/api/profile/info"; //user data //sidebar notification export const GET_SIDEBAR_NOTIFICATION = BASE_URL + "/dashboard/notification" //sidebar notification - // role management -export const GET_ROLE_MANAGEMENT = +export const GET_ROLES = BASE_URL + "/api/roles" -export const ADD_ROLE_MANAGEMENT = +export const ADD_ROLE = BASE_URL + "/api/roles" -export const UPDATE_ROLE_MANAGEMENT = +export const UPDATE_ROLE = BASE_URL + "/api/roles" -export const DELETE_ROLE_MANAGEMENT = +export const DELETE_ROLE = BASE_URL + "/api/roles" export const GET_PERMISSIONS_LIST = @@ -44,5 +43,8 @@ export const GET_PERMISSIONS_LIST = //role management //expert management -export const EXPERT_MANAGEMENT = BASE_URL + "/api/users"; +export const GET_EXPERTS = BASE_URL + "/api/users"; +export const ADD_EXPERT = BASE_URL + "/api/users"; +export const UPDATE_EXPERT = BASE_URL + "/api/users"; +export const DELETE_EXPERT = BASE_URL + "/api/users"; //expert management \ No newline at end of file diff --git a/src/lib/app/contexts/user.jsx b/src/lib/app/contexts/user.jsx index 899ac1b..8bf29cc 100644 --- a/src/lib/app/contexts/user.jsx +++ b/src/lib/app/contexts/user.jsx @@ -1,4 +1,4 @@ -import {GET_USER_ROUTE} from "@/core/data/apiRoutes"; +import {GET_USER} from "@/core/data/apiRoutes"; import axios from "axios"; import {createContext, useCallback, useEffect, useReducer} from "react"; import {errorRequest, errorResponse, errorSetting} from "@/core/utils/errorHandler"; @@ -71,7 +71,7 @@ export const UserProvider = ({children}) => { (callback = () => { }) => { axios - .get(GET_USER_ROUTE, { + .get(GET_USER, { headers: {authorization: `Bearer ${state.token}`}, }) .then(({data}) => {