From 783fbf28420787fefe2205a599fcc7e3ef22a675 Mon Sep 17 00:00:00 2001
From: Mohammad Jalali <muhammad.art79@gmail.com>
Date: Sat, 7 Oct 2023 17:44:02 +0330
Subject: [PATCH] CFE-3 Fencing CreateContent component because of rendering
 problem that caused in testing

---
 .../PersonalInfo/__tests__/index.test.js      |   0
 .../CreateContent/PersonalInfo/index.jsx      |  73 +++++++++++
 .../RestInfo/__tests__/index.test.js          |   0
 .../CreateContent/RestInfo/index.jsx          |   0
 .../UserInfo/__test__/index.test.js           |   0
 .../CreateContent/UserInfo/index.jsx          |  54 ++++++++
 .../CreateContent/__tests__/index.test.js     | 119 ++++++++++++++----
 .../Form/CreateForm/CreateContent/index.jsx   | 110 +---------------
 8 files changed, 228 insertions(+), 128 deletions(-)
 create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/__tests__/index.test.js
 create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/index.jsx
 create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/__tests__/index.test.js
 create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/index.jsx
 create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/__test__/index.test.js
 create mode 100644 src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/index.jsx

diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/__tests__/index.test.js b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/__tests__/index.test.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/index.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/index.jsx
new file mode 100644
index 0000000..9254771
--- /dev/null
+++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/index.jsx
@@ -0,0 +1,73 @@
+import {Grid, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+const PersonalInfo = ({formik}) => {
+    const t = useTranslations();
+    return (
+        <>
+            <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+                <Grid item xs={12} sm={6} md={4} lg={3}>
+                    <TextField
+                        name="name"
+                        label={t("ExpertMangement.text_field_name")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.name}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.name && !!formik.errors.name}
+                        helperText={formik.touched.name && formik.errors.name ? formik.errors.name : null}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4} lg={3}>
+                    <TextField
+                        name="national_id"
+                        label={t("ExpertMangement.text_field_national_id")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.national_id}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.national_id && !!formik.errors.national_id}
+                        helperText={formik.touched.national_id && formik.errors.national_id ? formik.errors.national_id : null}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4} lg={3}>
+                    <TextField
+                        name="phone_number"
+                        label={t("ExpertMangement.text_field_phone_number")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.phone_number}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.phone_number && !!formik.errors.phone_number}
+                        helperText={formik.touched.phone_number && formik.errors.phone_number ? formik.errors.phone_number : null}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4} lg={3}>
+                    <TextField
+                        name="email"
+                        label={t("ExpertMangement.text_field_email")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.email}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.email && !!formik.errors.email}
+                        helperText={formik.touched.email && formik.errors.email ? formik.errors.email : null}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+            </Grid>
+        </>
+    )
+}
+export default PersonalInfo
\ No newline at end of file
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/__tests__/index.test.js b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/__tests__/index.test.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/index.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/index.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/__test__/index.test.js b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/__test__/index.test.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/index.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/index.jsx
new file mode 100644
index 0000000..189f997
--- /dev/null
+++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/index.jsx
@@ -0,0 +1,54 @@
+import {Grid, IconButton, InputAdornment, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {Visibility, VisibilityOff} from "@mui/icons-material";
+
+const UserInfo = ({formik}) => {
+    const t = useTranslations();
+    return (
+        <>
+            <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        name="username"
+                        label={t("ExpertMangement.text_field_username")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.username}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.username && !!formik.errors.username}
+                        helperText={formik.touched.username && formik.errors.username ? formik.errors.username : null}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        name="password"
+                        label={t("ExpertMangement.text_field_password")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.password}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.password && !!formik.errors.password}
+                        helperText={formik.touched.password && formik.errors.password ? formik.errors.password : null}
+                        type={showPassword ? "text" : "password"}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton onClick={handleClickShowPassword}>
+                                        {showPassword ? <Visibility/> : <VisibilityOff/>}
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
+                        }}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+            </Grid>
+        </>
+    )
+}
+export default UserInfo
\ No newline at end of file
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/__tests__/index.test.js b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/__tests__/index.test.js
index cf93005..fee508f 100644
--- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/__tests__/index.test.js
+++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/__tests__/index.test.js
@@ -1,4 +1,4 @@
-import {act, render, screen, waitFor} from "@testing-library/react";
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
 import React from 'react';
 import CreateContent from "../../CreateContent";
 import MockAppWithProviders from "../../../../../../../../mocks/AppWithProvider";
@@ -15,69 +15,142 @@ describe("CreateContent Component From Expert Management", () => {
         it("UserName TextField Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.queryByLabelText('نام کاربری');
-                expect(nameTextField).toBeInTheDocument();
+                const usernameTextField = screen.queryByLabelText('نام کاربری');
+                expect(usernameTextField).toBeInTheDocument();
             });
         });
         it("Email TextField Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.queryByLabelText('پست الکترونیک');
-                expect(nameTextField).toBeInTheDocument();
+                const emailTextField = screen.queryByLabelText('پست الکترونیک');
+                expect(emailTextField).toBeInTheDocument();
             });
         });
         it("Phone Number TextField Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.queryByLabelText('شماره همراه');
-                expect(nameTextField).toBeInTheDocument();
+                const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
+                expect(phoneNumberTextField).toBeInTheDocument();
             });
         });
         it("National Id TextField Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.queryByLabelText('کد ملی');
-                expect(nameTextField).toBeInTheDocument();
+                const nationalIdTextField = screen.queryByLabelText('کد ملی');
+                expect(nationalIdTextField).toBeInTheDocument();
             });
         });
         it("Password TextField Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.queryByLabelText('رمز عبور');
-                expect(nameTextField).toBeInTheDocument();
+                const passwordTextField = screen.queryByLabelText('رمز عبور');
+                expect(passwordTextField).toBeInTheDocument();
             });
 
         });
         it("Position TextField Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.queryByLabelText('سمت');
-                expect(nameTextField).toBeInTheDocument();
+                const positionTextField = screen.queryByLabelText('سمت');
+                expect(positionTextField).toBeInTheDocument();
             });
         });
-        it("Province TextField Rendered", async () => {
+        it("Province Select Box Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.getByTestId('province-select');
-                expect(nameTextField).toBeInTheDocument();
+                const provinceSelectBox = screen.getByTestId('province-select');
+                expect(provinceSelectBox).toBeInTheDocument();
             });
         });
-        it("City TextField Rendered", async () => {
+        it("City Select Box Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.getByTestId('city-select');
-                expect(nameTextField).toBeInTheDocument();
+                const citySelectBox = screen.getByTestId('city-select');
+                expect(citySelectBox).toBeInTheDocument();
             });
         });
-        it("Role TextField Rendered", async () => {
+        it("Role Select Box Rendered", async () => {
             render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
             await waitFor(() => {
-                const nameTextField = screen.getByTestId('role-select');
-                expect(nameTextField).toBeInTheDocument();
+                const roleSelectBox = screen.getByTestId('role-select');
+                expect(roleSelectBox).toBeInTheDocument();
             });
         });
     });
     describe("Behavioral", () => {
-
+        it("Name TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            const nameTextField = screen.queryByLabelText('نام');
+            fireEvent.change(nameTextField, {target: {value: 'exampleName'}});
+            await act(() => {
+                expect(nameTextField).toHaveValue('exampleName');
+            })
+        });
+        it("Username TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            const usernameTextField = screen.queryByLabelText('نام کاربری');
+            fireEvent.change(usernameTextField, {target: {value: 'exampleUsername'}});
+            await act(() => {
+                expect(usernameTextField).toHaveValue('exampleUsername');
+            })
+        });
+        it("Email TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            const emailTextField = screen.queryByLabelText('پست الکترونیک');
+            fireEvent.change(emailTextField, {target: {value: 'exampleEmail'}});
+            await act(() => {
+                expect(emailTextField).toHaveValue('exampleEmail');
+            })
+        });
+        it("Phone Number TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
+            fireEvent.change(phoneNumberTextField, {target: {value: 'examplePhoneNumber'}});
+            await act(() => {
+                expect(phoneNumberTextField).toHaveValue('examplePhoneNumber');
+            })
+        });
+        it("National Id TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            const nationalIdTextField = screen.queryByLabelText('کد ملی');
+            fireEvent.change(nationalIdTextField, {target: {value: 'exampleNationalId'}});
+            await act(() => {
+                expect(nationalIdTextField).toHaveValue('exampleNationalId');
+            })
+        });
+        it("Password TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            const passwordTextField = screen.queryByLabelText('رمز عبور');
+            fireEvent.change(passwordTextField, {target: {value: 'examplePassword'}});
+            await act(() => {
+                expect(passwordTextField).toHaveValue('examplePassword');
+            })
+        });
+        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();
+            }, {timeout: 4000});
+            // 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');
+        //     })
+        // });
     });
 });
\ No newline at end of file
diff --git a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx
index 8f24ef4..ae6485d 100644
--- a/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx
+++ b/src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx
@@ -24,6 +24,8 @@ import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST} from "@/core/data/apiRoutes";
 import useRole from "@/lib/app/hooks/useRole";
 import {Visibility, VisibilityOff} from "@mui/icons-material";
 import useProvince from "@/lib/app/hooks/useProvince";
+import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
+import UserInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo";
 
 const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
     const t = useTranslations();
@@ -123,68 +125,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
                         />
                     </Divider>
                 </Box>
-                <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
-                    <Grid item xs={12} sm={6} md={4} lg={3}>
-                        <TextField
-                            name="name"
-                            label={t("ExpertMangement.text_field_name")}
-                            variant="outlined"
-                            margin="normal"
-                            size="small"
-                            value={formik.values.name}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            error={formik.touched.name && !!formik.errors.name}
-                            helperText={formik.touched.name && formik.errors.name ? formik.errors.name : null}
-                            sx={{width: "100%"}}
-                        />
-                    </Grid>
-                    <Grid item xs={12} sm={6} md={4} lg={3}>
-                        <TextField
-                            name="national_id"
-                            label={t("ExpertMangement.text_field_national_id")}
-                            variant="outlined"
-                            margin="normal"
-                            size="small"
-                            value={formik.values.national_id}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            error={formik.touched.national_id && !!formik.errors.national_id}
-                            helperText={formik.touched.national_id && formik.errors.national_id ? formik.errors.national_id : null}
-                            sx={{width: "100%"}}
-                        />
-                    </Grid>
-                    <Grid item xs={12} sm={6} md={4} lg={3}>
-                        <TextField
-                            name="phone_number"
-                            label={t("ExpertMangement.text_field_phone_number")}
-                            variant="outlined"
-                            margin="normal"
-                            size="small"
-                            value={formik.values.phone_number}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            error={formik.touched.phone_number && !!formik.errors.phone_number}
-                            helperText={formik.touched.phone_number && formik.errors.phone_number ? formik.errors.phone_number : null}
-                            sx={{width: "100%"}}
-                        />
-                    </Grid>
-                    <Grid item xs={12} sm={6} md={4} lg={3}>
-                        <TextField
-                            name="email"
-                            label={t("ExpertMangement.text_field_email")}
-                            variant="outlined"
-                            margin="normal"
-                            size="small"
-                            value={formik.values.email}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            error={formik.touched.email && !!formik.errors.email}
-                            helperText={formik.touched.email && formik.errors.email ? formik.errors.email : null}
-                            sx={{width: "100%"}}
-                        />
-                    </Grid>
-                </Grid>
+                <PersonalInfo formik={formik}/>
                 <Box sx={{my: 1}}>
                     <Divider>
                         <Chip
@@ -192,48 +133,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
                         />
                     </Divider>
                 </Box>
-                <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
-                    <Grid item xs={12} sm={6}>
-                        <TextField
-                            name="username"
-                            label={t("ExpertMangement.text_field_username")}
-                            variant="outlined"
-                            margin="normal"
-                            size="small"
-                            value={formik.values.username}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            error={formik.touched.username && !!formik.errors.username}
-                            helperText={formik.touched.username && formik.errors.username ? formik.errors.username : null}
-                            sx={{width: "100%"}}
-                        />
-                    </Grid>
-                    <Grid item xs={12} sm={6}>
-                        <TextField
-                            name="password"
-                            label={t("ExpertMangement.text_field_password")}
-                            variant="outlined"
-                            margin="normal"
-                            size="small"
-                            value={formik.values.password}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
-                            error={formik.touched.password && !!formik.errors.password}
-                            helperText={formik.touched.password && formik.errors.password ? formik.errors.password : null}
-                            type={showPassword ? "text" : "password"}
-                            InputProps={{
-                                endAdornment: (
-                                    <InputAdornment position="end">
-                                        <IconButton onClick={handleClickShowPassword}>
-                                            {showPassword ? <Visibility/> : <VisibilityOff/>}
-                                        </IconButton>
-                                    </InputAdornment>
-                                ),
-                            }}
-                            sx={{width: "100%"}}
-                        />
-                    </Grid>
-                </Grid>
+                <UserInfo formik={formik}/>
                 <Box sx={{my: 1}}>
                     <Divider>
                         <Chip
@@ -286,8 +186,8 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
                     </Grid>
                     <Grid item xs={12} sm={6}>
                         <FormControl
-                            disabled={cityList.length === 0 ? true : false}
                             error={formik.touched.city_id && !!formik.errors.city_id}
+                            disabled={cityList.length === 0 ? true : false}
                             sx={{width: "100%", mt: 2}}
                             size="small"
                         >