CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CFE-3 complete structure and behavior of create form of expert management

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-10 10:58:00 +03:30
parent 783fbf2842
commit b3ea71862a
12 changed files with 466 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/locales/fa/app.json
View File

@@ -167,6 +167,8 @@
"error_message_city_id": "شهر خود را وارد کنید",
"error_message_role_id": "نقش خود را وارد کنید",
"error_message_new_password": "رمز عبور جدید را وارد کنید",
"error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد"
"error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
"button_cancel": "بستن",
"button_confirm": "ثبت"
}
}

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

@@ -0,0 +1,71 @@
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
import React from 'react';
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
import CreateContent from "../../../CreateContent";
describe("PersonalInfo Component From Expert Management", () => {
describe("Rendering", () => {
it("Name TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const nameTextField = screen.queryByLabelText('نام');
expect(nameTextField).toBeInTheDocument();
});
});
it("Email TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const emailTextField = screen.queryByLabelText('پست الکترونیک');
expect(emailTextField).toBeInTheDocument();
});
});
it("Phone Number TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
expect(phoneNumberTextField).toBeInTheDocument();
});
});
it("National Id TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const nationalIdTextField = screen.queryByLabelText('کد ملی');
expect(nationalIdTextField).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("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');
})
});
});
});

125
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/index.jsx
View File

@@ -3,71 +3,70 @@ 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 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

69
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Position&Role.jsx Normal file
View File

@@ -0,0 +1,69 @@
import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
import {useTranslations} from "next-intl";
import useRequest from "@/lib/app/hooks/useRequest";
import useRole from "@/lib/app/hooks/useRole";
const PositionAndRole = ({formik}) => {
const t = useTranslations();
const requestServer = useRequest()
const {roleList, isLoadingRoleList, errorRoleList} = useRole();
return (
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6}>
<TextField
name="position"
label={t("ExpertMangement.text_field_position")}
variant="outlined"
margin="normal"
size="small"
value={formik.values.position}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.position && !!formik.errors.position}
helperText={formik.touched.position && formik.errors.position ? formik.errors.position : null}
sx={{width: "100%"}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl
error={formik.touched.role_id && !!formik.errors.role_id}
sx={{width: "100%", mt: 2}}
size="small"
>
<InputLabel>{t("ExpertMangement.text_field_role_id")}</InputLabel>
<Select
name="role_id"
label={t("ExpertMangement.text_field_role_id")}
data-testid="role-select"
value={formik.values.role_id}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{isLoadingRoleList ? (
<MenuItem>
{t("ExpertMangement.text_field_loading_roles_list")}
</MenuItem>
) : errorRoleList ? (
<MenuItem>
{t("ExpertMangement.text_field_error_fetching_roles")}
</MenuItem>
) : (
roleList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name_fa}
</MenuItem>
))
)}
</Select>
<FormHelperText>
{formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""}
</FormHelperText>
</FormControl>
</Grid>
</Grid>
)
}
export default PositionAndRole

110
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province&City.jsx Normal file
View File

@@ -0,0 +1,110 @@
import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select} from "@mui/material";
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 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}>
<FormControl
error={formik.touched.province_id && !!formik.errors.province_id}
sx={{width: "100%", mt: 2}}
size="small"
>
<InputLabel>{t("ExpertMangement.text_field_province_id")}</InputLabel>
<Select
name="province_id"
disabled={isLoadingProvinceList || errorProvinceList}
label={t("ExpertMangement.text_field_province_id")}
data-testid="province-select"
value={formik.values.province_id}
onChange={(e) => {
formik.setFieldValue("province_id", e.target.value);
getCities(e.target.value)
}}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{isLoadingProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_loading_provinces_list")}
</MenuItem>
) : errorProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_error_fetching_provinces")}
</MenuItem>
) : (
provinceList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name}
</MenuItem>
))
)}
</Select>
<FormHelperText>
{formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""}
</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

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

@@ -0,0 +1,65 @@
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');
// })
// });
});
});

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

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

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

@@ -0,0 +1,42 @@
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("UserName TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const usernameTextField = screen.queryByLabelText('نام کاربری');
expect(usernameTextField).toBeInTheDocument();
});
});
it("Password TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const passwordTextField = screen.queryByLabelText('رمز عبور');
expect(passwordTextField).toBeInTheDocument();
});
});
});
describe("Behavioral", () => {
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("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');
})
});
});
});

7
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/index.jsx
View File

@@ -1,9 +1,16 @@
import {Grid, IconButton, InputAdornment, TextField} from "@mui/material";
import {useTranslations} from "next-intl";
import {Visibility, VisibilityOff} from "@mui/icons-material";
import {useState} from "react";
const UserInfo = ({formik}) => {
const t = useTranslations();
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
return (
<>
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>

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

@@ -1,156 +1,21 @@
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
import {render, screen} from "@testing-library/react";
import React from 'react';
import CreateContent from "../../CreateContent";
import MockAppWithProviders from "../../../../../../../../mocks/AppWithProvider";
describe("CreateContent Component From Expert Management", () => {
describe("Rendering", () => {
it("Name TextField Rendered", async () => {
it("Password TextField Rendered", () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const nameTextField = screen.queryByLabelText('نام');
expect(nameTextField).toBeInTheDocument();
});
const cancelBtn = screen.queryByText('بستن');
expect(cancelBtn).toBeInTheDocument();
});
it("UserName TextField Rendered", async () => {
it("Password TextField Rendered", () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const usernameTextField = screen.queryByLabelText('نام کاربری');
expect(usernameTextField).toBeInTheDocument();
});
});
it("Email TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const emailTextField = screen.queryByLabelText('پست الکترونیک');
expect(emailTextField).toBeInTheDocument();
});
});
it("Phone Number TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
expect(phoneNumberTextField).toBeInTheDocument();
});
});
it("National Id TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const nationalIdTextField = screen.queryByLabelText('کد ملی');
expect(nationalIdTextField).toBeInTheDocument();
});
});
it("Password TextField Rendered", async () => {
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
await waitFor(() => {
const passwordTextField = screen.queryByLabelText('رمز عبور');
expect(passwordTextField).toBeInTheDocument();
});
});
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();
});
const cancelBtn = screen.queryByText('ثبت');
expect(cancelBtn).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');
// })
// });
});
});

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

@@ -1,63 +1,16 @@
import {
Box,
Button,
Chip,
DialogActions,
DialogContent,
Divider,
FormControl,
FormHelperText,
Grid,
IconButton,
InputAdornment,
InputLabel,
MenuItem,
Select,
TextField,
} from "@mui/material";
import {Box, Button, Chip, DialogActions, DialogContent, Divider,} from "@mui/material";
import * as Yup from "yup";
import {useTranslations} from "next-intl";
import {useFormik} from "formik";
import {useState} from "react";
import useRequest from "@/lib/app/hooks/useRequest";
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 {CREATE_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
import UserInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo";
import RestInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo";
const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
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();
const {roleList, isLoadingRoleList, errorRoleList} = useRole();
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
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"))
});
}
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("ExpertMangement.error_message_name")),
@@ -125,7 +78,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
/>
</Divider>
</Box>
<PersonalInfo formik={formik}/>
{!formik ? null : <PersonalInfo formik={formik}/>}
<Box sx={{my: 1}}>
<Divider>
<Chip
@@ -133,7 +86,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
/>
</Divider>
</Box>
<UserInfo formik={formik}/>
{!formik ? null : <UserInfo formik={formik}/>}
<Box sx={{my: 1}}>
<Divider>
<Chip
@@ -141,136 +94,17 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
/>
</Divider>
</Box>
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6}>
<FormControl
error={formik.touched.province_id && !!formik.errors.province_id}
sx={{width: "100%", mt: 2}}
size="small"
>
<InputLabel>{t("ExpertMangement.text_field_province_id")}</InputLabel>
<Select
name="province_id"
disabled={isLoadingProvinceList || errorProvinceList}
label={t("ExpertMangement.text_field_province_id")}
data-testid="province-select"
value={formik.values.province_id}
onChange={(e) => {
formik.setFieldValue("province_id", e.target.value);
getCities(e.target.value)
}}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{isLoadingProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_loading_provinces_list")}
</MenuItem>
) : errorProvinceList ? (
<MenuItem>
{t("ExpertMangement.text_field_error_fetching_provinces")}
</MenuItem>
) : (
provinceList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name}
</MenuItem>
))
)}
</Select>
<FormHelperText>
{formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""}
</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>
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6}>
<TextField
name="position"
label={t("ExpertMangement.text_field_position")}
variant="outlined"
margin="normal"
size="small"
value={formik.values.position}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.position && !!formik.errors.position}
helperText={formik.touched.position && formik.errors.position ? formik.errors.position : null}
sx={{width: "100%"}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FormControl
error={formik.touched.role_id && !!formik.errors.role_id}
sx={{width: "100%", mt: 2}}
size="small"
>
<InputLabel>{t("ExpertMangement.text_field_role_id")}</InputLabel>
<Select
name="role_id"
label={t("ExpertMangement.text_field_role_id")}
data-testid="role-select"
value={formik.values.role_id}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{isLoadingRoleList ? (
<MenuItem>
{t("ExpertMangement.text_field_loading_roles_list")}
</MenuItem>
) : errorRoleList ? (
<MenuItem>
{t("ExpertMangement.text_field_error_fetching_roles")}
</MenuItem>
) : (
roleList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name_fa}
</MenuItem>
))
)}
</Select>
<FormHelperText>
{formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""}
</FormHelperText>
</FormControl>
</Grid>
</Grid>
{!formik ? null : <RestInfo formik={formik}/>}
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenCreateDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("ExpertMangement.button_cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting}>
{t("ExpertMangement.button_confirm")}
</Button>
</DialogActions>
</>
)

8
src/core/data/apiRoutes.js
View File

@@ -1,5 +1,9 @@
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
//login
export const GET_USER_TOKEN = BASE_URL + "/api/auth/login";
//end login
// role list
export const GET_ROLE_LIST = BASE_URL + "/dashboard/roles/list";
// role list
@@ -9,10 +13,6 @@ export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
export const GET_CITY_LIST = BASE_URL + "/api/cities";
// province/city list
//login
export const GET_USER_TOKEN = BASE_URL + "/api/auth/login";
//end login
//change password
export const SET_USER_PASSWORD = BASE_URL + "/dashboard/profile/change_password";
//end change password