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

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

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-10 17:30:22 +03:30
parent b3ea71862a
commit 45f2597dac
14 changed files with 387 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
mocks/handler.js
View File

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

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

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

21
src/components/dashboard/expert-management/DataTable/index.jsx
View File

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

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

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

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

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

1
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Position&Role.jsx → src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/index.jsx
View File

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

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

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

56
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province&City.jsx → src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province/index.jsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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