CFE-3 complete and debug all structure and write validation part of test for inputs and work on select box of mui after this

mocks/handler.js

@@ -28,13 +28,13 @@ export const handler = [
             data: [
                 {
                     id: 1,
-                    name: "passenger_office_chief",
+                    name: "admin",
-                    name_fa: "رئیس اداره مسافری استان"
+                    name_fa: "ادمین"
                 },
                 {
-                    id: 4,
+                    id: 2,
-                    name: "province_manager",
+                    name: "manager",
-                    name_fa: "مدیر کل استانی"
+                    name_fa: "مدیر"
                 }
             ]
         }))

public/locales/fa/app.json

@@ -129,8 +129,7 @@
     "phone_number": "شماره همراه",
     "national_id": "کد ملی",
     "position": "سمت",
-    "province_name": "استان",
+    "province_fa": "استان",
-    "city_name": "شهر",
     "role_name": "نقش",
     "updated_at": "آخرین بروزرسانی",
     "create": "افزودن کارشناس",
@@ -145,7 +144,6 @@
     "text_field_password": "رمز عبور",
     "text_field_position": "سمت",
     "text_field_province_id": "استان",
-    "text_field_city_id": "شهر",
     "text_field_role_id": "نقش",
     "text_field_loading_provinces_list": "درحال دریافت شهر ها",
     "text_field_error_fetching_provinces": "خطا در دریافت شهر ها",
@@ -164,7 +162,6 @@
     "error_message_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
     "error_message_position": "سمت خود را وارد کنید",
     "error_message_province_id": "استان خود را وارد کنید",
-    "error_message_city_id": "شهر خود را وارد کنید",
     "error_message_role_id": "نقش خود را وارد کنید",
     "error_message_new_password": "رمز عبور جدید را وارد کنید",
     "error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",

src/components/dashboard/expert-management/DataTable/index.jsx

@@ -6,6 +6,7 @@ import TableRowActions from "../TableRowActions";
 import {Box, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
 import {useMemo} from "react";
+import moment from "jalali-moment";
 
 function ExpertManagementDataTable() {
     const t = useTranslations();
@@ -31,7 +32,7 @@ function ExpertManagementDataTable() {
                 ),
             },
             {
-                accessorFn: (row) => row.name,
+                accessorFn: (row) => row.full_name,
                 id: "name",
                 header: t("ExpertMangement.name"),
                 enableColumnFilter: true,
@@ -103,21 +104,9 @@ function ExpertManagementDataTable() {
                 ),
             },
             {
-                accessorFn: (row) => row.province_name,
+                accessorFn: (row) => row.province_fa,
-                id: "province_name",
+                id: "province_fa",
-                header: t("ExpertMangement.province_name"),
+                header: t("ExpertMangement.province_fa"),
-                enableColumnFilter: false,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: ["contains", "equals", "notEquals"],
-                Cell: ({renderedCellValue}) => (
-                    <Typography variant="body2">{renderedCellValue}</Typography>
-                ),
-            },
-            {
-                accessorFn: (row) => row.city_name,
-                id: "city_name",
-                header: t("ExpertMangement.city_name"),
                 enableColumnFilter: false,
                 datatype: "text",
                 filterFn: "contains",

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/__tests__/index.test.js

@@ -1,33 +1,63 @@
 import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
 import React from 'react';
 import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
-import CreateContent from "../../../CreateContent";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
+import {useTranslations} from "next-intl";
+
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        name: Yup.string().required(t("ExpertMangement.error_message_name")),
+        email: Yup.string().required(t("ExpertMangement.error_message_email")),
+        phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
+        national_id: Yup.string().required(t("ExpertMangement.error_message_national_id"))
+    });
+    return (
+        <Formik
+            initialValues={{
+                name: "",
+                email: "",
+                phone_number: "",
+                national_id: "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
 
 describe("PersonalInfo Component From Expert Management", () => {
     describe("Rendering", () => {
         it("Name TextField Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             await waitFor(() => {
                 const nameTextField = screen.queryByLabelText('نام');
                 expect(nameTextField).toBeInTheDocument();
             });
         });
         it("Email TextField Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             await waitFor(() => {
                 const emailTextField = screen.queryByLabelText('پست الکترونیک');
                 expect(emailTextField).toBeInTheDocument();
             });
         });
         it("Phone Number TextField Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             await waitFor(() => {
                 const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
                 expect(phoneNumberTextField).toBeInTheDocument();
             });
         });
         it("National Id TextField Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             await waitFor(() => {
                 const nationalIdTextField = screen.queryByLabelText('کد ملی');
                 expect(nationalIdTextField).toBeInTheDocument();
@@ -36,7 +66,7 @@ describe("PersonalInfo Component From Expert Management", () => {
     });
     describe("Behavioral", () => {
         it("Name TextField Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             const nameTextField = screen.queryByLabelText('نام');
             fireEvent.change(nameTextField, {target: {value: 'exampleName'}});
             await act(() => {
@@ -44,7 +74,7 @@ describe("PersonalInfo Component From Expert Management", () => {
             })
         });
         it("Email TextField Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             const emailTextField = screen.queryByLabelText('پست الکترونیک');
             fireEvent.change(emailTextField, {target: {value: 'exampleEmail'}});
             await act(() => {
@@ -52,7 +82,7 @@ describe("PersonalInfo Component From Expert Management", () => {
             })
         });
         it("Phone Number TextField Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
             fireEvent.change(phoneNumberTextField, {target: {value: 'examplePhoneNumber'}});
             await act(() => {
@@ -60,7 +90,7 @@ describe("PersonalInfo Component From Expert Management", () => {
             })
         });
         it("National Id TextField Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
             const nationalIdTextField = screen.queryByLabelText('کد ملی');
             fireEvent.change(nationalIdTextField, {target: {value: 'exampleNationalId'}});
             await act(() => {
@@ -68,4 +98,54 @@ describe("PersonalInfo Component From Expert Management", () => {
             })
         });
     });
+    describe("validation", () => {
+        it('Should See Error When Name Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const nameInput = screen.queryByLabelText('نام');
+
+            fireEvent.change(nameInput, {target: {value: ''}});
+            fireEvent.blur(nameInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("نام خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Email Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+
+            fireEvent.change(emailInput, {target: {value: ''}});
+            fireEvent.blur(emailInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("پست الکترونیک خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Phone Number Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+
+            fireEvent.change(phoneNumberInput, {target: {value: ''}});
+            fireEvent.blur(phoneNumberInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("شماره همراه خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When National Id Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+
+            fireEvent.change(nationalIdInput, {target: {value: ''}});
+            fireEvent.blur(nationalIdInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("کد ملی خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+    })
 });

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/__tests__/index.test.js

@@ -0,0 +1,90 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
+import PositionAndRole from "../../PositionAndRole";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        position: Yup.string().required(t("ExpertMangement.error_message_position")),
+        role_id: Yup.string().required(t("ExpertMangement.error_message_role_id"))
+    });
+    return (
+        <Formik
+            initialValues={{
+                position: "",
+                role_id: ""
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("CreateContent Component From Expert Management", () => {
+    describe("Rendering", () => {
+        it("Position TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const positionTextField = screen.queryByLabelText('سمت');
+                expect(positionTextField).toBeInTheDocument();
+            });
+        });
+        it("Role Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const roleSelectBox = screen.getByTestId('role-select');
+                expect(roleSelectBox).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Position TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const positionTextField = screen.queryByLabelText('سمت');
+            fireEvent.change(positionTextField, {target: {value: 'examplePosition'}});
+            await waitFor(() => {
+                expect(positionTextField).toHaveValue('examplePosition');
+            })
+        });
+        // it("Role Select Box Work Correctly", async () => {
+        //     render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+        //     await waitFor(() => {
+        //         expect(screen.queryByText("ادمین")).toBeInTheDocument();
+        //     }, {timeout: 3000});
+        //     const roleSelectBox = screen.getByTestId('role-select');
+        // });
+    });
+    describe("validation", () => {
+        it('Should See Error When Position Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+
+            const positionInput = screen.queryByLabelText('سمت');
+
+            fireEvent.change(positionInput, {target: {value: ''}});
+            fireEvent.blur(positionInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("سمت خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        // it('Should See Error When Role Select Is Empty', async () => {
+        //     render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+        //
+        //     const roleSelect = screen.queryByLabelText('نقش');
+        //
+        //     fireEvent.change(roleSelect, {target: {value: 1}});
+        //     fireEvent.blur(roleSelect);
+        //
+        //     await waitFor(() => {
+        //         expect(screen.queryByText("نقش خود را وارد کنید")).toBeInTheDocument()
+        //     });
+        // });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/index.jsx

@@ -2,6 +2,7 @@ import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextFie
 import {useTranslations} from "next-intl";
 import useRequest from "@/lib/app/hooks/useRequest";
 import useRole from "@/lib/app/hooks/useRole";
+import {log} from "next/dist/server/typescript/utils";
 
 const PositionAndRole = ({formik}) => {
     const t = useTranslations();

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province/__tests__/index.test.js

@@ -0,0 +1,62 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import Province from "../../Province";
+import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
+    });
+    return (
+        <Formik
+            initialValues={{
+                province_id: "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("CreateContent Component From Expert Management", () => {
+    describe("Rendering", () => {
+        it("Province Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const provinceSelectBox = screen.getByTestId('province-select');
+                expect(provinceSelectBox).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Province Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            const provinceSelectBox = screen.getByTestId('province-select');
+            fireEvent.click(provinceSelectBox)
+            await waitFor(() => {
+                expect(screen.queryByText("آذربایجان شرقی")).toBeInTheDocument();
+            });
+        });
+    });
+    describe("validation", () => {
+        // it('Should See Error When Province Select Is Empty', async () => {
+        //     render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+        //
+        //     const provinceSelect = screen.queryByLabelText('استان');
+        //
+        //     fireEvent.change(provinceSelect, {target: {value: 1}});
+        //     fireEvent.blur(provinceSelect);
+        //
+        //     await waitFor(() => {
+        //         expect(screen.queryByText("استان خود را وارد کنید")).toBeInTheDocument()
+        //     });
+        // });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province/index.jsx

@@ -2,35 +2,13 @@ import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select} from "@
 import {useTranslations} from "next-intl";
 import {useState} from "react";
 import useProvince from "@/lib/app/hooks/useProvince";
-import {GET_CITY_LIST} from "@/core/data/apiRoutes";
 import useRequest from "@/lib/app/hooks/useRequest";
 
-const ProvinceAndCity = ({formik}) => {
+const Province = ({formik}) => {
     const t = useTranslations();
     const requestServer = useRequest()
-    const [cityList, setCityList] = useState([]);
-    const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
     const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
 
-    function getCities(province_id) {
-        formik.setFieldTouched("city_id", false, false);
-        formik.setFieldValue("city_id", "")
-        setCityTextField(t("ExpertMangement.text_field_loading_cities_list"))
-        requestServer(`${GET_CITY_LIST}?province_id=${province_id}`, "get", {auth: true, notification: false})
-            .then(({data}) => {
-                const result = data.data;
-                const formattedData = result.map((city, index) => ({
-                    id: index,
-                    name: city.name,
-                    value: city.id,
-                }));
-                setCityList(formattedData);
-                setCityTextField(t("ExpertMangement.text_field_city_id"))
-            }).catch(() => {
-            setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"))
-        });
-    }
-
     return (
         <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
             <Grid item xs={12} sm={6}>
@@ -48,7 +26,6 @@ const ProvinceAndCity = ({formik}) => {
                         value={formik.values.province_id}
                         onChange={(e) => {
                             formik.setFieldValue("province_id", e.target.value);
-                            getCities(e.target.value)
                         }}
                         onBlur={formik.handleBlur}
                         fullWidth
@@ -75,36 +52,7 @@ const ProvinceAndCity = ({formik}) => {
                     </FormHelperText>
                 </FormControl>
             </Grid>
-            <Grid item xs={12} sm={6}>
-                <FormControl
-                    error={formik.touched.city_id && !!formik.errors.city_id}
-                    disabled={cityList.length === 0 ? true : false}
-                    sx={{width: "100%", mt: 2}}
-                    size="small"
-                >
-                    <InputLabel>{cityTextField}</InputLabel>
-                    <Select
-                        name="city_id"
-                        label={t("ExpertMangement.text_field_city_id")}
-                        data-testid="city-select"
-                        value={formik.values.city_id}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        fullWidth
-                        variant="outlined"
-                    >
-                        {cityList.map((item) => (
-                            <MenuItem key={item.value} value={item.value}>
-                                {item.name}
-                            </MenuItem>
-                        ))}
-                    </Select>
-                    <FormHelperText>
-                        {formik.touched.city_id && formik.errors.city_id ? formik.errors.city_id : ""}
-                    </FormHelperText>
-                </FormControl>
-            </Grid>
         </Grid>
     )
 }
-export default ProvinceAndCity
+export default Province

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/__tests__/index.test.js

@@ -1,65 +0,0 @@
-import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
-import React from 'react';
-import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
-import CreateContent from "../../../CreateContent";
-
-describe("CreateContent Component From Expert Management", () => {
-    describe("Rendering", () => {
-        it("Position TextField Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
-            await waitFor(() => {
-                const positionTextField = screen.queryByLabelText('سمت');
-                expect(positionTextField).toBeInTheDocument();
-            });
-        });
-        it("Province Select Box Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
-            await waitFor(() => {
-                const provinceSelectBox = screen.getByTestId('province-select');
-                expect(provinceSelectBox).toBeInTheDocument();
-            });
-        });
-        it("City Select Box Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
-            await waitFor(() => {
-                const citySelectBox = screen.getByTestId('city-select');
-                expect(citySelectBox).toBeInTheDocument();
-            });
-        });
-        it("Role Select Box Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
-            await waitFor(() => {
-                const roleSelectBox = screen.getByTestId('role-select');
-                expect(roleSelectBox).toBeInTheDocument();
-            });
-        });
-    });
-    describe("Behavioral", () => {
-        it("Position TextField Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
-            const positionTextField = screen.queryByLabelText('سمت');
-            fireEvent.change(positionTextField, {target: {value: 'examplePosition'}});
-            await act(() => {
-                expect(positionTextField).toHaveValue('examplePosition');
-            })
-        });
-        it("Province Select Box Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
-            screen.debug()
-            await waitFor(() => {
-                expect(screen.queryByText("آذربایجان شرقی")).toBeInTheDocument();
-            });
-            // const provinceSelectBox = screen.getByTestId('province-select');
-            // fireEvent.change(provinceSelectBox, {target: {value: 1}});
-            // expect(provinceSelectBox).toHaveValue(1);
-        });
-        // it("Role Select Box Work Correctly", async () => {
-        //     render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
-        //     const roleSelectBox = screen.getByTestId('role-select');
-        //     fireEvent.change(roleSelectBox, {target: {value: '1'}});
-        //     await act(() => {
-        //         expect(roleSelectBox).toHaveValue('1');
-        //     })
-        // });
-    });
-});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/index.jsx

@@ -1,10 +1,10 @@
-import ProvinceAndCity from "./Province&City";
+import Province from "./Province";
-import PositionAndRole from "./Position&Role";
+import PositionAndRole from "./PositionAndRole";
 
 const RestInfo = ({formik}) => {
     return (
         <>
-            <ProvinceAndCity formik={formik}/>
+            <Province formik={formik}/>
             <PositionAndRole formik={formik}/>
         </>
     )

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/__test__/index.test.js

@@ -1,19 +1,49 @@
 import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
 import React from 'react';
 import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
-import CreateContent from "../../../CreateContent";
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import UserInfo from "../../UserInfo";
+import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        username: Yup.string().required(t("ExpertMangement.error_message_username")),
+        password: Yup.string()
+            .required(t("ExpertMangement.error_message_password"))
+            .matches(
+                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
+                t("ExpertMangement.error_message_password_regex")
+            ),
+    });
+    return (
+        <Formik
+            initialValues={{
+                username: "",
+                password: "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
 
 describe("CreateContent Component From Expert Management", () => {
     describe("Rendering", () => {
         it("UserName TextField Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
             await waitFor(() => {
                 const usernameTextField = screen.queryByLabelText('نام کاربری');
                 expect(usernameTextField).toBeInTheDocument();
             });
         });
         it("Password TextField Rendered", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
             await waitFor(() => {
                 const passwordTextField = screen.queryByLabelText('رمز عبور');
                 expect(passwordTextField).toBeInTheDocument();
@@ -23,7 +53,7 @@ describe("CreateContent Component From Expert Management", () => {
     });
     describe("Behavioral", () => {
         it("Username TextField Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
             const usernameTextField = screen.queryByLabelText('نام کاربری');
             fireEvent.change(usernameTextField, {target: {value: 'exampleUsername'}});
             await act(() => {
@@ -31,7 +61,7 @@ describe("CreateContent Component From Expert Management", () => {
             })
         });
         it("Password TextField Work Correctly", async () => {
-            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
             const passwordTextField = screen.queryByLabelText('رمز عبور');
             fireEvent.change(passwordTextField, {target: {value: 'examplePassword'}});
             await act(() => {
@@ -39,4 +69,56 @@ describe("CreateContent Component From Expert Management", () => {
             })
         });
     });
+    describe("validation", () => {
+        it('Should See Error When Username Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+
+            fireEvent.change(usernameInput, {target: {value: ''}});
+            fireEvent.blur(usernameInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("نام کاربری خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Password Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+
+            const passwordInput = screen.queryByLabelText('رمز عبور');
+
+            fireEvent.change(passwordInput, {target: {value: ''}});
+            fireEvent.blur(passwordInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Password Field Is Not On Correct Format', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+
+            const passwordInput = screen.queryByLabelText('رمز عبور');
+            
+            // check without text or symbol
+            fireEvent.change(passwordInput, {target: {value: '12345678'}});
+            fireEvent.blur(passwordInput);
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
+            });
+
+            // check without number
+            fireEvent.change(passwordInput, {target: {value: 'abcdefgh'}});
+            fireEvent.blur(passwordInput);
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
+            });
+
+            // check under 8 character
+            fireEvent.change(passwordInput, {target: {value: '11Sa'}});
+            fireEvent.blur(passwordInput);
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
+            });
+        });
+    })
 });

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/__tests__/index.test.js

@@ -1,7 +1,8 @@
-import {render, screen} from "@testing-library/react";
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import React from 'react';
 import CreateContent from "../../CreateContent";
 import MockAppWithProviders from "../../../../../../../../mocks/AppWithProvider";
+import CreateForm from "@/components/dashboard/expert-management/Form/CreateForm";
 
 describe("CreateContent Component From Expert Management", () => {
     describe("Rendering", () => {
@@ -18,4 +19,35 @@ describe("CreateContent Component From Expert Management", () => {
     });
     describe("Behavioral", () => {
     });
+    // describe("Form Submission", () => {
+    //     it('Should enable the submit button when the inputs are valid', async () => {
+    //         render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+    //
+    //         const submitButton = screen.getByRole('button', {name: 'ثبت'});
+    //
+    //         const nameInput = screen.queryByLabelText('نام');
+    //         const usernameInput = screen.queryByLabelText('نام کاربری');
+    //         const emailInput = screen.queryByLabelText('پست الکترونیک');
+    //         const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+    //         const nationalIdInput = screen.queryByLabelText('کد ملی');
+    //         const passwordInput = screen.queryByLabelText('رمز عبور');
+    //         const positionInput = screen.queryByLabelText('سمت');
+    //         const provinceInput = screen.queryByLabelText('استان');
+    //         const roleInput = screen.queryByLabelText('نقش');
+    //
+    //         fireEvent.change(nameInput, {target: {value: 'nameTest'}});
+    //         fireEvent.change(usernameInput, {target: {value: 'usernameTest'}});
+    //         fireEvent.change(emailInput, {target: {value: 'emailTest'}});
+    //         fireEvent.change(phoneNumberInput, {target: {value: 'phoneNumberTest'}});
+    //         fireEvent.change(nationalIdInput, {target: {value: 'nationalIdTest'}});
+    //         fireEvent.change(passwordInput, {target: {value: 'passwordTest'}});
+    //         fireEvent.change(positionInput, {target: {value: 'positionTest'}});
+    //         fireEvent.change(provinceInput, {target: {value: 1}});
+    //         fireEvent.change(roleInput, {target: {value: 1}});
+    //
+    //         await waitFor(() => {
+    //             expect(submitButton).not.toBeDisabled();
+    //         });
+    //     });
+    // })
 });

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx

@@ -26,7 +26,6 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
             ),
         position: Yup.string().required(t("ExpertMangement.error_message_position")),
         province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
-        city_id: Yup.string().required(t("ExpertMangement.error_message_city_id")),
         role_id: Yup.string().required(t("ExpertMangement.error_message_role_id"))
     });
 
@@ -40,7 +39,6 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
             password: "",
             position: "",
             province_id: "",
-            city_id: "",
             role_id: ""
         },
         validationSchema,
@@ -53,7 +51,6 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
             formData.append("username", values.username);
             formData.append("password", values.password);
             formData.append("province_id", values.province_id);
-            formData.append("city_id", values.city_id);
             formData.append("position", values.position);
             formData.append("role_id", values.role_id);
 
@@ -78,7 +75,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
                         />
                     </Divider>
                 </Box>
-                {!formik ? null : <PersonalInfo formik={formik}/>}
+                <PersonalInfo formik={formik}/>
                 <Box sx={{my: 1}}>
                     <Divider>
                         <Chip
@@ -86,7 +83,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
                         />
                     </Divider>
                 </Box>
-                {!formik ? null : <UserInfo formik={formik}/>}
+                <UserInfo formik={formik}/>
                 <Box sx={{my: 1}}>
                     <Divider>
                         <Chip
@@ -94,7 +91,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
                         />
                     </Divider>
                 </Box>
-                {!formik ? null : <RestInfo formik={formik}/>}
+                <RestInfo formik={formik}/>
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => setOpenCreateDialog(false)} variant="outlined" color="secondary"
@@ -102,7 +99,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
                     {t("ExpertMangement.button_cancel")}
                 </Button>
                 <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.isValid || !formik.dirty}>
                     {t("ExpertMangement.button_confirm")}
                 </Button>
             </DialogActions>

src/core/data/apiRoutes.js

@@ -5,13 +5,12 @@ export const GET_USER_TOKEN = BASE_URL + "/api/auth/login";
 //end login
 
 // role list
-export const GET_ROLE_LIST = BASE_URL + "/dashboard/roles/list";
+export const GET_ROLE_LIST = BASE_URL + "/api/roles/list";
 // role list
 
-// province/city list
+// province list
 export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
-export const GET_CITY_LIST = BASE_URL + "/api/cities";
+// province list
-// province/city list
 
 //change password
 export const SET_USER_PASSWORD = BASE_URL + "/dashboard/profile/change_password";
@@ -22,6 +21,6 @@ export const GET_USER_ROUTE = BASE_URL + "/api/profile/info";
 //user data
 
 //expert management
-export const GET_EXPERT_MANAGEMENT_LIST = BASE_URL + "/dashboard/experts/show";
+export const GET_EXPERT_MANAGEMENT_LIST = BASE_URL + "/api/users";
-export const CREATE_EXPERT_MANAGEMENT = BASE_URL + "/dashboard/experts/store";
+export const CREATE_EXPERT_MANAGEMENT = BASE_URL + "/api/users";
 //expert management