CFE-4 role management test

.env.test

@@ -0,0 +1,12 @@
+NEXT_PUBLIC_API_NAME = "CRM Dashboard"
+NEXT_PUBLIC_API_VERSION = "0.0.1"
+NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa"
+NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"
+
+NEXT_PUBLIC_PRIMARY_MAIN = "#1b4332"
+NEXT_PUBLIC_SECONDARY_MAIN = "#800e13"
+
+NEXT_PUBLIC_BASE_URL = "https://crm.witel.ir"
+NEXT_PUBLIC_POWERED_BY_URL = "https://witel.ir"
+
+NODE_ENV = "development"

public/locales/fa/app.json

@@ -153,5 +153,33 @@
     "navgan_id": "کد ناوگان",
     "button-cancel": "انصراف",
     "button-add": "ثبت"
+  },
+  "UpdateDialog": {
+    "update": "ویرایش",
+    "description": "توضیحات خود را وارد نمائید",
+    "description_error": "وارد کردن توضیحات الزامی است!",
+    "next-state-id": "وضعیت",
+    "next-state-id-error": "وارد کردن وضعیت الزامیست",
+    "update-tooltip": "ویرایش",
+    "button-cancel": "بستن",
+    "refahi": "رفاهی",
+    "navgan": "ناوگان",
+    "phone_number": "شماره تلفن",
+    "national_id": "کد ملی",
+    "name_en": "نام انگلیسی",
+    "name_en_error": "وارد کردن نام انگلیسی الزامیست",
+    "name_fa": "نام فارسی",
+    "name_fa_error": "وارد کردن نام فارسی الزامیست",
+    "permission": "دسترسی",
+    "permission_min_error": "حداقل باید یک دسترسی انتخاب شود",
+    "type_id": "نوع کاربر",
+    "navgan_id": "کد ناوگان",
+    "button-update": "ثبت"
+  },
+  "DeleteDialog": {
+    "delete": "حذف",
+    "button-cancel": "انصراف",
+    "typography": "آیا از حدف این مورد اطمینان دارید ؟",
+    "button-delete": "حذف کردن"
   }
 }

src/components/dashboard/role-management/Form/CreateForm/__test__/CreateContent.test.js

@@ -1,4 +1,4 @@
-import {act, fireEvent, render, screen} from "@testing-library/react";
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
 import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
 import CreateContent from "@/components/dashboard/role-management/Form/CreateForm/CreateContent";
 
@@ -31,6 +31,16 @@ describe("Create Content component from Create Form Component in Role Management
             const textElement = screen.queryByLabelText("نام فارسی")
             expect(textElement).toBeInTheDocument()
         });
+        it('should see name_fa text', () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            expect(textElement).toBeInTheDocument()
+        });
+
     })
 
     describe("Behavior",()=>{
@@ -49,7 +59,6 @@ describe("Create Content component from Create Form Component in Role Management
             })
         });
         it('should see what fill in the name_fa input', async () => {
-            localStorage.setItem("_token", "token")
             render(
                 <MockAppWithProviders>
                     <CreateContent/>
@@ -63,8 +72,6 @@ describe("Create Content component from Create Form Component in Role Management
                 expect(nameFarsiInput).toHaveValue('testuser');
             })
         });
-
-
         it('should return permissions_list', async () => {
             render(
                 <MockAppWithProviders>
@@ -76,7 +83,76 @@ describe("Create Content component from Create Form Component in Role Management
         });
 
         it('should get checked if permission list item get clicked', () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
 
+            expect(checkboxElement).not.toBeChecked();
+
+            fireEvent.click(checkboxElement);
+
+            expect(checkboxElement).toBeChecked();
+        });
+    })
+    describe("Validation",()=>{
+        it('should see error text when name_fa input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const name_faInput = screen.getByLabelText("نام فارسی")
+            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.blur(name_faInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see error text when name_en input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const name_enInput = screen.getByLabelText("نام انگلیسی")
+            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.blur(name_enInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_enInput, {target : {value : "english name"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see errors when click on submit button and field not completed', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const submitButtonElement = screen.queryByText("ثبت")
+            fireEvent.click(submitButtonElement)
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            await waitFor(()=>{
+                expect(screen.queryByText("حداقل باید یک دسترسی انتخاب شود")).toBeInTheDocument()
+            })
         });
     })
 })

src/components/dashboard/role-management/Form/DeleteForm.jsx

@@ -1,67 +0,0 @@
-import {useTranslations} from "next-intl";
-import {useState} from "react";
-import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    Tooltip,
-    Typography
-} from "@mui/material";
-import DeleteIcon from '@mui/icons-material/Delete';
-import useRequest from "@/lib/app/hooks/useRequest";
-import useNotification from "@/lib/app/hooks/useNotification";
-import {DELETE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
-
-const DeleteForm = ({rowId, fetchUrl, mutate}) => {
-    const t = useTranslations();
-    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const requestServer = useRequest({auth: true})
-    const {update_notification} = useNotification()
-    const handleSubmit = () => {
-        setIsSubmitting(true)
-        requestServer(`${DELETE_ROLE_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
-            mutate(fetchUrl)
-            update_notification()
-        }).catch(() => {
-        }).finally(() => {
-            setIsSubmitting(false)
-        });
-    }
-
-    return (
-        <>
-            <Tooltip title={t("DeleteDialog.delete")}>
-                <IconButton
-                    color="primary"
-                    onClick={() => {
-                        setOpenConfirmDialog(true)
-                    }}
-                >
-                    <DeleteIcon/>
-                </IconButton>
-            </Tooltip>
-            <Dialog maxWidth="sm" open={openConfirmDialog}
-                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-                <DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
-                <DialogContent>
-                    <Typography>{t("DeleteDialog.typography")}</Typography>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
-                            disabled={isSubmitting} autoFocus>
-                        {t("DeleteDialog.button-cancel")}
-                    </Button>
-                    <Button onClick={handleSubmit} variant="contained" color="primary"
-                            disabled={isSubmitting}>
-                        {t("DeleteDialog.button-delete")}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
-    );
-};
-export default DeleteForm;

src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx

@@ -0,0 +1,42 @@
+import {Button, DialogActions, DialogContent, DialogTitle, Typography} from "@mui/material";
+import {DELETE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import {useState} from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+import {useTranslations} from "next-intl";
+
+const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+    const handleSubmit = () => {
+        setIsSubmitting(true)
+        requestServer(`${DELETE_ROLE_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
+            mutate(fetchUrl)
+            update_notification()
+        }).catch(() => {
+        }).finally(() => {
+            setIsSubmitting(false)
+        });
+    }
+    return(
+        <>
+            <DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
+            <DialogContent>
+                <Typography>{t("DeleteDialog.typography")}</Typography>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={isSubmitting} autoFocus>
+                    {t("DeleteDialog.button-cancel")}
+                </Button>
+                <Button onClick={handleSubmit} variant="contained" color="primary"
+                        disabled={isSubmitting}>
+                    {t("DeleteDialog.button-delete")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export  default DeleteContent

src/components/dashboard/role-management/Form/DeleteForm/__test__/DeleteContent.test.js

@@ -0,0 +1,53 @@
+import {act, render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+
+describe("Create Content component from Create Form Component in Role Management Component",()=> {
+    describe("Rendering", () => {
+        it('should see DeleteDialog text in the top ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("حذف")
+            act(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        })
+        it('should see DeleteDialog text content ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("آیا از حدف این مورد اطمینان دارید ؟")
+            act(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        })
+        it('should see delete text in the delete button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("حذف کردن")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+        it('should see cancel text in the cancel button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("انصراف")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+    })
+})

src/components/dashboard/role-management/Form/DeleteForm/__test__/index.test.js

@@ -0,0 +1,29 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+
+describe("Create Form Component from Role Management Component",()=> {
+    describe("Rendering", () => {
+        it('should see Dialog text',  () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateForm/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("ویرایش")
+            expect(textElement).toBeInTheDocument()
+        });
+        it('should see Dialog text when mouse is over', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteForm />
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("حذف")
+            fireEvent.mouseOver(textElement);
+            const tooltipTextElement = screen.getByText("حذف");
+            expect(tooltipTextElement).toBeInTheDocument();
+        });
+    })
+})

src/components/dashboard/role-management/Form/DeleteForm/index.jsx

@@ -0,0 +1,39 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    Tooltip,
+} from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
+
+const DeleteForm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+
+    return (
+        <>
+            <Tooltip title={t("DeleteDialog.delete")}>
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    sx={{textTransform: "unset", alignSelf: "center"}}
+                    startIcon={<DeleteIcon/>}
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    {t("DeleteDialog.delete")}
+                </Button>
+            </Tooltip>
+            <Dialog maxWidth="sm" open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DeleteContent rowId={rowId} fetchUrl={fetchUrl} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default DeleteForm;

src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx

@@ -1,7 +1,7 @@
 import {
     Button,
     Checkbox, DialogActions,
-    DialogContent,
+    DialogContent, DialogTitle,
     FormControl,
     FormControlLabel,
     FormHelperText,
@@ -17,29 +17,27 @@ import usePermissions from "@/lib/app/hooks/usePermissions";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
 import {useTranslations} from "next-intl";
-import {useState} from "react";
 
-const UpdateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
+const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
     const t = useTranslations();
     const requestServer = useRequest({auth: true})
     const {update_notification} = useNotification()
     const {permissions_list} = usePermissions()
-    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
 
     const validationSchema = Yup.object().shape({
-        name: Yup.string().required(t("UpdateDialog.name_error")),
+        name_en: Yup.string().required(t("UpdateDialog.name_en_error")),
         name_fa: Yup.string().required(t("UpdateDialog.name_fa_error")),
         permissions: Yup.array().min(1, t("UpdateDialog.permission_min_error")).required(t("UpdateDialog.permission")),
     });
 
     const formik = useFormik({
         initialValues: {
-            name: row.getValue("name"),
+            name_en: row.getValue("name"),
             name_fa: row.getValue("name_fa"),
             permissions: row.original.permissions.map((obj) => obj.id),
         }, validationSchema, onSubmit: (values, {setSubmitting}) => {
             const formData = new FormData();
-            formData.append("name", values.name);
+            formData.append("name", values.name_en);
             formData.append("name_fa", values.name_fa);
             for (let i = 0; i < values.permissions.length; i++) {
                 formData.append(`permissions[${i}]`, values.permissions[i]);
@@ -59,19 +57,20 @@ const UpdateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
 
     return(
         <>
+            <DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
             <DialogContent>
                 <Stack spacing={2}>
                     <Stack direction="row" spacing={2} sx={{mt: 1}}>
                         <TextField
-                            name="name"
+                            name="name_en"
-                            label={t("UpdateDialog.name")}
+                            label={t("UpdateDialog.name_en")}
-                            value={formik.values.name}
+                            value={formik.values.name_en}
                             onChange={formik.handleChange}
                             fullWidth
                             variant="outlined"
-                            onBlur={formik.handleBlur("name")}
+                            onBlur={formik.handleBlur("name_en")}
-                            error={formik.touched.name && Boolean(formik.errors.name)}
+                            error={formik.touched.name_en && Boolean(formik.errors.name_en)}
-                            helperText={formik.touched.name && formik.errors.name}
+                            helperText={formik.touched.name_en && formik.errors.name_en}
                         />
                         <TextField
                             name="name_fa"
@@ -101,6 +100,7 @@ const UpdateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
                                                 <FormControlLabel
                                                     control={
                                                         <Checkbox
+                                                            data-testid="PermissionList-checkbox"
                                                             checked={formik.values.permissions.includes(permission.id)}
                                                             onChange={(e) => {
                                                                 if (e.target.checked) {

src/components/dashboard/role-management/Form/UpdateForm/__test__/UpdateContent.test.js

@@ -0,0 +1,201 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+const row = {
+    id : 0,
+    getValue : name => {
+        if (name === "name") {
+            return "manage_passenger_office_navgan";
+        }
+        else if (name === "name_fa") {
+            return "مدیریت کارتابل رییس اداره مسافری استان";
+        }
+    },
+    original : {
+        permissions : [
+            {
+                id: 1,
+                name: "manage_passenger_office_navgan",
+                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
+            },
+            {
+                id: 2,
+                name: "manage_passenger_office_navgan",
+                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
+            }
+        ]
+    }
+}
+
+describe("Create Content component from Create Form Component in Role Management Component",()=>{
+    describe("Rendering", ()=>{
+        it('should see AddDialog text in the top ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("ویرایش")
+            act(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_en text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام انگلیسی")
+            act(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_fa text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            act(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see update text in the submit button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("ثبت")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+        it('should see cancel text in the cancel button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("بستن")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+    })
+
+    describe("Behavior", ()=>{
+        it('should see what fill in the name_en input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
+
+            fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameEnglishInput).toHaveValue('testuser');
+            })
+        });
+        it('should see what fill in the name_fa input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const nameFarsiInput = screen.getByLabelText('نام فارسی');
+
+            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameFarsiInput).toHaveValue('testuser');
+            })
+        });
+        it('should return permissions_list', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
+            expect(checkboxElement).toHaveLength(2)
+        });
+        it('should see the value of the name_en that pass to input value', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enElement = screen.getByLabelText("نام انگلیسی")
+            expect(name_enElement).toHaveValue("manage_passenger_office_navgan")
+        });
+        it('should see the value of the name_fa that pass to input value', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enElement = screen.getByLabelText("نام فارسی")
+            expect(name_enElement).toHaveValue("مدیریت کارتابل رییس اداره مسافری استان")
+        });
+        it('should get checked if the id exists in permission lists', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
+
+            expect(checkboxElement).toBeChecked();
+        });
+    })
+    describe("Validation", ()=>{
+        it('should see error text when name_fa input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_faInput = screen.getByLabelText("نام فارسی")
+            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.change(name_faInput, {target : {value : ''}});
+
+            fireEvent.blur(name_faInput)
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see error text when name_en input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enInput = screen.getByLabelText("نام انگلیسی")
+            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+
+            fireEvent.change(name_enInput, {target : {value : null}});
+            fireEvent.blur(name_enInput)
+
+            await waitFor(()=>{
+
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_enInput, {target : {value : "english name"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+    })
+})

src/components/dashboard/role-management/Form/UpdateForm/__test__/index.test.js

@@ -0,0 +1,30 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+
+describe("Create Form Component from Role Management Component",()=>{
+    describe("Rendering",()=>{
+        it('should see Dialog text',  () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateForm/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("ویرایش")
+            expect(textElement).toBeInTheDocument()
+        });
+
+        it('should see Tooltip text when mouse over',  () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateForm />
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.getByText("ویرایش");
+            fireEvent.mouseOver(buttonElement);
+            const tooltipTextElement = screen.getByText("ویرایش");
+            expect(tooltipTextElement).toBeInTheDocument();
+        });
+    })
+})

src/components/dashboard/role-management/Form/UpdateForm/index.jsx

@@ -2,9 +2,9 @@ import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
 import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
 import {useTranslations} from "next-intl";
 import {useState} from "react";
-import CreateContent from "./CreateContent";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
 
-const UpdateForm = ({mutate, fetchUrl}) => {
+const UpdateForm = ({mutate, fetchUrl, row}) => {
     const t = useTranslations();
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
 
@@ -26,8 +26,7 @@ const UpdateForm = ({mutate, fetchUrl}) => {
             </Tooltip>
             <Dialog maxWidth={"md"} open={openConfirmDialog}
                     PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-                <DialogTitle>{t("UpdateDialog.update ")}</DialogTitle>
+                <UpdateContent mutate={mutate} row={row} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
-                <CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
             </Dialog>
         </Stack>
     )

src/components/dashboard/role-management/TableRowActions.jsx

@@ -1,6 +1,6 @@
 import {Box} from "@mui/material";
-import DeleteForm from "./Form/DeleteForm"
 import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
 
 
 const TableRowActions = ({row, mutate, fetchUrl}) => {

src/components/dashboard/role-management/__test__/RoleManagementComponent.test.js

@@ -10,7 +10,7 @@ describe("Role Management Component from Role Management page",()=>{
                     <RoleManagementComponent />
                 </MockAppWithProviders>
             ))
-            const textElement = screen.getByText("کد یکتا")
+            const textElement = screen.queryByText("کد یکتا")
             expect(textElement).toBeInTheDocument()
         });
     })

src/core/components/DataTable.jsx

@@ -159,7 +159,6 @@ function DataTable(props) {
                 </>
             )}
             state={{
-                isLoading: isValidating,
                 columnFilters,
                 columnFilterFns,
                 pagination,

src/lib/app/contexts/language.jsx

@@ -18,7 +18,7 @@ export const LanguageProvider = ({children}) => {
     ];
     const {user, userChangedLanguage, changeLanguageState} = useUser();
     const [languageIsReady, setLanguageIsReady] = useState(false);
-    const [languageApp, setLanguageApp] = useState();
+    const [languageApp, setLanguageApp] = useState(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
     const [directionApp, setDirectionApp] = useState(
         process.env.NEXT_PUBLIC_DEFAULT_DIRECTION
     );
@@ -26,9 +26,7 @@ export const LanguageProvider = ({children}) => {
     useEffect(() => {
         const lang = localStorage.getItem("_language");
 
-        if (!lang && !languageApp) {
+        if (lang) {
-            setLanguageApp(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
-        } else if (lang) {
             setLanguageApp(lang);
         }
     }, []);