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

CFE-3 Fencing CreateContent component because of rendering problem that caused in testing

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-07 17:44:02 +03:30
parent ab568e0b28
commit 783fbf2842
8 changed files with 228 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

@@ -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

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

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

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

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

@@ -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

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

@@ -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');
// })
// });
});
});

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

@@ -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"
>