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

add gender/telephone id and change name to full_name and role_id to roles and compelete rest of test instead CreatContent component

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-14 15:52:02 +03:30
parent e17c22e5a0
commit 11fe52c339
9 changed files with 188 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -123,7 +123,7 @@
},
"ExpertMangement": {
"id": "کد یکتا",
"name": "نام",
"name": "نام کامل",
"username": "نام کاربری",
"email": "پست الکترونیک",
"phone_number": "شماره همراه",
@@ -136,15 +136,17 @@
"personal_info": "مشخصات کارشناس",
"user_info": "اطلاعات کاربری",
"rest_info": "اطلاعات تکمیلی",
"text_field_name": "نام",
"text_field_full_name": "نام کامل",
"text_field_username": "نام کاربری",
"text_field_email": "پست الکترونیک",
"text_field_phone_number": "شماره همراه",
"text_field_telephone_id": "کد تلفن",
"text_field_gender": "جنسیت",
"text_field_national_id": "کد ملی",
"text_field_password": "رمز عبور",
"text_field_position": "سمت",
"text_field_province_id": "استان",
"text_field_role_id": "نقش",
"text_field_roles": "نقش",
"text_field_loading_provinces_list": "درحال دریافت شهر ها",
"text_field_error_fetching_provinces": "خطا در دریافت شهر ها",
"text_field_loading_roles_list": "درحال دریافت نقش ها",
@@ -153,16 +155,18 @@
"text_field_loading_cities_list": "درحال دریافت شهر ها",
"text_field_error_fetching_cities": "خطا در دریافت شهر ها",
"text_field_new_password": "رمز عبور جدید",
"error_message_name": "نام خود را وارد کنید",
"error_message_full_name": "نام کامل خود را وارد کنید",
"error_message_username": "نام کاربری خود را وارد کنید",
"error_message_email": "پست الکترونیک خود را وارد کنید",
"error_message_phone_number": "شماره همراه خود را وارد کنید",
"error_message_telephone_id": "کد تلفن خود را وارد کنید",
"error_message_gender": "جنسیت خود را وارد کنید",
"error_message_national_id": "کد ملی خود را وارد کنید",
"error_message_password": "رمز عبور خود را وارد کنید",
"error_message_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
"error_message_position": "سمت خود را وارد کنید",
"error_message_province_id": "استان خود را وارد کنید",
"error_message_role_id": "نقش خود را وارد کنید",
"error_message_roles": "نقش خود را وارد کنید",
"error_message_new_password": "رمز عبور جدید را وارد کنید",
"error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
"button_cancel": "بستن",

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

@@ -5,23 +5,28 @@ 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";
import Province from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province";
const CreateFormMock = ({Component}) => {
const t = useTranslations();
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("ExpertMangement.error_message_name")),
full_name: Yup.string().required(t("ExpertMangement.error_message_full_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"))
telephone_id: Yup.string().required(t("ExpertMangement.error_message_telephone_id")),
national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
gender: Yup.string().required(t("ExpertMangement.error_message_gender"))
});
return (
<Formik
initialValues={{
name: "",
full_name: "",
email: "",
phone_number: "",
telephone_id: "",
national_id: "",
gender: ""
}}
validationSchema={validationSchema}
onSubmit={(values, {}) => {
@@ -35,11 +40,11 @@ const CreateFormMock = ({Component}) => {
describe("PersonalInfo Component From Expert Management", () => {
describe("Rendering", () => {
it("Name TextField Rendered", async () => {
it("full_name TextField Rendered", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
await waitFor(() => {
const nameTextField = screen.queryByLabelText('نام');
expect(nameTextField).toBeInTheDocument();
const fullNameTextField = screen.queryByLabelText('نام کامل');
expect(fullNameTextField).toBeInTheDocument();
});
});
it("Email TextField Rendered", async () => {
@@ -56,6 +61,13 @@ describe("PersonalInfo Component From Expert Management", () => {
expect(phoneNumberTextField).toBeInTheDocument();
});
});
it("telephone id TextField Rendered", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
await waitFor(() => {
const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
expect(telephoneIdTextField).toBeInTheDocument();
});
});
it("National Id TextField Rendered", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
await waitFor(() => {
@@ -63,11 +75,18 @@ describe("PersonalInfo Component From Expert Management", () => {
expect(nationalIdTextField).toBeInTheDocument();
});
});
it("Gender Select Box Rendered", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
await waitFor(() => {
const genderSelectBox = screen.getByTestId('select-box');
expect(genderSelectBox).toBeInTheDocument();
});
});
});
describe("Behavioral", () => {
it("Name TextField Work Correctly", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
const nameTextField = screen.queryByLabelText('نام');
const nameTextField = screen.queryByLabelText('نام کامل');
fireEvent.change(nameTextField, {target: {value: 'exampleName'}});
await act(() => {
expect(nameTextField).toHaveValue('exampleName');
@@ -89,6 +108,14 @@ describe("PersonalInfo Component From Expert Management", () => {
expect(phoneNumberTextField).toHaveValue('examplePhoneNumber');
})
});
it("Telephone Id TextField Work Correctly", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
fireEvent.change(telephoneIdTextField, {target: {value: 'exampleTelephoneId'}});
await act(() => {
expect(telephoneIdTextField).toHaveValue('exampleTelephoneId');
})
});
it("National Id TextField Work Correctly", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
const nationalIdTextField = screen.queryByLabelText('کد ملی');
@@ -97,18 +124,34 @@ describe("PersonalInfo Component From Expert Management", () => {
expect(nationalIdTextField).toHaveValue('exampleNationalId');
})
});
it("Gender Select Box Work Correctly", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
const genderSelectBox = screen.getByTestId('select-box');
const genderSelectOpener = await waitFor(() => screen.getByTestId("option-opener-gender"));
await waitFor(() => {
expect(genderSelectBox).toBeInTheDocument();
});
fireEvent.mouseDown(genderSelectOpener);
await waitFor(() => {
const selectItem = screen.queryByText("مرد");
expect(selectItem).toBeInTheDocument();
});
});
});
describe("validation", () => {
it('Should See Error When Name Input Is Empty', async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
const nameInput = screen.queryByLabelText('نام');
const nameInput = screen.queryByLabelText('نام کامل');
fireEvent.change(nameInput, {target: {value: ''}});
fireEvent.blur(nameInput);
await waitFor(() => {
expect(screen.queryByText("نام خود را وارد کنید")).toBeInTheDocument()
expect(screen.queryByText("نام کامل خود را وارد کنید")).toBeInTheDocument()
});
});
it('Should See Error When Email Input Is Empty', async () => {
@@ -135,6 +178,18 @@ describe("PersonalInfo Component From Expert Management", () => {
expect(screen.queryByText("شماره همراه خود را وارد کنید")).toBeInTheDocument()
});
});
it('Should See Error When telephone Id Input Is Empty', async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
fireEvent.change(telephoneIdTextField, {target: {value: ''}});
fireEvent.blur(telephoneIdTextField);
await waitFor(() => {
expect(screen.queryByText("کد تلفن خود را وارد کنید")).toBeInTheDocument()
});
});
it('Should See Error When National Id Input Is Empty', async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
@@ -147,5 +202,18 @@ describe("PersonalInfo Component From Expert Management", () => {
expect(screen.queryByText("کد ملی خود را وارد کنید")).toBeInTheDocument()
});
});
it('Should Select An Item With Valid Value of gender', async () => {
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
const genderInput = screen.getByTestId("input-gender")
const genderSelectOpener = await waitFor(() => screen.getByTestId("option-opener-gender"));
fireEvent.mouseDown(genderSelectOpener);
const selectItem = await waitFor(() => screen.queryByText("مرد"));
expect(selectItem).toBeInTheDocument();
fireEvent.click(selectItem);
await waitFor(() => {
expect(genderInput.value).toBe('male')
});
});
})
});

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

@@ -1,27 +1,32 @@
import {Grid, TextField} from "@mui/material";
import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
import {useTranslations} from "next-intl";
const PersonalInfo = ({formik}) => {
const t = useTranslations();
const genderList = [
{id: 1, name_en: "male", name_fa: "مرد"},
{id: 2, name_en: "female", name_fa: "زن"}
]
return (
<Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Grid item xs={12} sm={6} md={4}>
<TextField
name="name"
label={t("ExpertMangement.text_field_name")}
name="full_name"
label={t("ExpertMangement.text_field_full_name")}
variant="outlined"
margin="normal"
size="small"
value={formik.values.name}
value={formik.values.full_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}
error={formik.touched.full_name && !!formik.errors.full_name}
helperText={formik.touched.full_name && formik.errors.full_name ? formik.errors.full_name : null}
sx={{width: "100%"}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Grid item xs={12} sm={6} md={4}>
<TextField
name="national_id"
label={t("ExpertMangement.text_field_national_id")}
@@ -36,7 +41,7 @@ const PersonalInfo = ({formik}) => {
sx={{width: "100%"}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Grid item xs={12} sm={6} md={4}>
<TextField
name="phone_number"
label={t("ExpertMangement.text_field_phone_number")}
@@ -51,7 +56,7 @@ const PersonalInfo = ({formik}) => {
sx={{width: "100%"}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<Grid item xs={12} sm={6} md={4}>
<TextField
name="email"
label={t("ExpertMangement.text_field_email")}
@@ -66,6 +71,57 @@ const PersonalInfo = ({formik}) => {
sx={{width: "100%"}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<TextField
name="telephone_id"
label={t("ExpertMangement.text_field_telephone_id")}
variant="outlined"
margin="normal"
size="small"
value={formik.values.telephone_id}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.telephone_id && !!formik.errors.telephone_id}
helperText={formik.touched.telephone_id && formik.errors.telephone_id ? formik.errors.telephone_id : null}
sx={{width: "100%"}}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<FormControl
error={formik.touched.gender && !!formik.errors.gender}
sx={{width: "100%", mt: 2}}
size="small"
>
<InputLabel>{t("ExpertMangement.text_field_gender")}</InputLabel>
<Select
name="gender"
label={t("ExpertMangement.text_field_gender")}
value={formik.values.gender}
onChange={(e) => {
formik.setFieldValue("gender", e.target.value);
}}
inputProps={{
"data-testid": "input-gender"
}}
data-testid="select-box"
SelectDisplayProps={{"data-testid": 'option-opener-gender'}}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"
>
{(
genderList.map((item) => (
<MenuItem key={item.id} value={item.name_en}>
{item.name_fa}
</MenuItem>
))
)}
</Select>
<FormHelperText>
{formik.touched.gender && formik.errors.gender ? formik.errors.gender : ""}
</FormHelperText>
</FormControl>
</Grid>
</Grid>
)
}

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

@@ -11,13 +11,13 @@ 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"))
roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
});
return (
<Formik
initialValues={{
position: "",
role_id: ""
roles: ""
}}
validationSchema={validationSchema}
onSubmit={(values, {}) => {
@@ -56,7 +56,7 @@ describe("CreateContent Component From Expert Management", () => {
});
it("Role Select Box Work Correctly", async () => {
render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
const roleSelect = screen.getByTestId("option-opener");
const roleSelect = screen.getByTestId("option-opener-role");
await waitFor(() => {
expect(roleSelect).toBeInTheDocument();
});
@@ -83,7 +83,7 @@ describe("CreateContent Component From Expert Management", () => {
it('Should Select An Item With Valid Value of role', async () => {
render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
const roleInput = screen.getByTestId("input-role-id")
const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));
const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener-role"));
fireEvent.mouseDown(roleSelectOpener);
const selectItem = await waitFor(() => screen.queryByText("ادمین"));

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

@@ -28,15 +28,15 @@ const PositionAndRole = ({formik}) => {
</Grid>
<Grid item xs={12} sm={6}>
<FormControl
error={formik.touched.role_id && !!formik.errors.role_id}
error={formik.touched.roles && !!formik.errors.roles}
sx={{width: "100%", mt: 2}}
size="small"
>
<InputLabel>{t("ExpertMangement.text_field_role_id")}</InputLabel>
<InputLabel>{t("ExpertMangement.text_field_roles")}</InputLabel>
<Select
name="role_id"
label={t("ExpertMangement.text_field_role_id")}
value={formik.values.role_id}
name="roles"
label={t("ExpertMangement.text_field_roles")}
value={formik.values.roles}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
fullWidth
@@ -44,7 +44,7 @@ const PositionAndRole = ({formik}) => {
"data-testid": "input-role-id"
}}
data-testid="select-box"
SelectDisplayProps={{"data-testid": 'option-opener'}}
SelectDisplayProps={{"data-testid": 'option-opener-role'}}
variant="outlined"
>
{isLoadingRoleList ? (
@@ -64,7 +64,7 @@ const PositionAndRole = ({formik}) => {
)}
</Select>
<FormHelperText>
{formik.touched.role_id && formik.errors.role_id ? formik.errors.role_id : ""}
{formik.touched.roles && formik.errors.roles ? formik.errors.roles : ""}
</FormHelperText>
</FormControl>
</Grid>

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

@@ -41,7 +41,7 @@ describe("CreateContent Component From Expert Management", () => {
it("Province Select Box Work Correctly", async () => {
render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
const provinceSelectBox = screen.getByTestId('select-box');
const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));
const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));
await waitFor(() => {
expect(provinceSelectBox).toBeInTheDocument();
@@ -59,7 +59,7 @@ describe("CreateContent Component From Expert Management", () => {
it('Should Select An Item With Valid Value of province', async () => {
render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
const provinceInput = screen.getByTestId("input-province-id")
const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener"));
const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));
fireEvent.mouseDown(provinceSelectOpener);
const selectItem = await waitFor(() => screen.queryByText("آذربایجان شرقی"));

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

@@ -30,7 +30,7 @@ const Province = ({formik}) => {
"data-testid": "input-province-id"
}}
data-testid="select-box"
SelectDisplayProps={{"data-testid": 'option-opener'}}
SelectDisplayProps={{"data-testid": 'option-opener-province'}}
onBlur={formik.handleBlur}
fullWidth
variant="outlined"

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

@@ -21,9 +21,9 @@ describe("CreateContent Component From Expert Management", () => {
});
describe("Form Submission", () => {
it('Should enable the submit button when the inputs are valid', async () => {
render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
const submitButton = screen.getByText('ثبت');
const submitButton = screen.queryByText('ثبت');
const nameInput = screen.queryByLabelText('نام');
const usernameInput = screen.queryByLabelText('نام کاربری');
@@ -32,8 +32,10 @@ describe("CreateContent Component From Expert Management", () => {
const nationalIdInput = screen.queryByLabelText('کد ملی');
const passwordInput = screen.queryByLabelText('رمز عبور');
const positionInput = screen.queryByLabelText('سمت');
// const provinceInput = screen.queryByLabelText('استان');
// const roleInput = screen.queryByLabelText('نقش');
const provinceSelectOpener = screen.getByTestId("option-opener-province");
const roleSelectOpener = screen.getByTestId("option-opener-role");
fireEvent.mouseDown(provinceSelectOpener);
fireEvent.mouseDown(roleSelectOpener);
fireEvent.change(nameInput, {target: {value: 'nameTest'}});
fireEvent.change(usernameInput, {target: {value: 'usernameTest'}});
@@ -42,8 +44,10 @@ describe("CreateContent Component From Expert Management", () => {
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}});
const selectItemProvince = await waitFor(() => screen.queryByText("آذربایجان شرقی"));
fireEvent.click(selectItemProvince);
const selectItemRole = await waitFor(() => screen.queryByText("ادمین"));
fireEvent.click(selectItemRole);
await waitFor(() => {
expect(submitButton).not.toBeDisabled();

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

@@ -13,10 +13,12 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
const requestServer = useRequest()
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("ExpertMangement.error_message_name")),
full_name: Yup.string().required(t("ExpertMangement.error_message_full_name")),
username: Yup.string().required(t("ExpertMangement.error_message_username")),
email: Yup.string().required(t("ExpertMangement.error_message_email")),
phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
telephone_id: Yup.string().required(t("ExpertMangement.error_message_telephone_id")),
gender: Yup.string().required(t("ExpertMangement.error_message_gender")),
national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
password: Yup.string()
.required(t("ExpertMangement.error_message_password"))
@@ -26,33 +28,37 @@ 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")),
role_id: Yup.string().required(t("ExpertMangement.error_message_role_id"))
roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
});
const formik = useFormik({
initialValues: {
name: "",
full_name: "",
username: "",
email: "",
phone_number: "",
telephone_id: "",
gender: "",
national_id: "",
password: "",
position: "",
province_id: "",
role_id: ""
roles: ""
},
validationSchema,
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("name", values.name);
formData.append("full_name", values.full_name);
formData.append("national_id", values.national_id);
formData.append("phone_number", values.phone_number);
formData.append("telephone_id", values.telephone_id);
formData.append("gender", values.gender);
formData.append("email", values.email);
formData.append("username", values.username);
formData.append("password", values.password);
formData.append("province_id", values.province_id);
formData.append("position", values.position);
formData.append("role_id", values.role_id);
formData.append("roles", values.roles);
requestServer(`${CREATE_EXPERT_MANAGEMENT}`, 'post', {auth: true, data: formData})
.then((response) => {