CFE-3 Merge branch 'feature/CFE-3_implemention_expert_page_with_testing' into 'develop'
This commit is contained in:
AmirHossein Mahmoodi
@@ -3,7 +3,10 @@ import {
|
||||
GET_ROLE_MANAGEMENT,
|
||||
GET_SIDEBAR_NOTIFICATION,
|
||||
GET_USER_ROUTE,
|
||||
SET_USER_PASSWORD
|
||||
SET_USER_PASSWORD,
|
||||
EXPERT_MANAGEMENT,
|
||||
GET_PROVINCE_LIST,
|
||||
GET_ROLE_LIST,
|
||||
} from "@/core/data/apiRoutes";
|
||||
import {rest} from "msw";
|
||||
|
||||
@@ -95,5 +98,49 @@ export const handler = [
|
||||
),
|
||||
);
|
||||
}),
|
||||
|
||||
rest.get(GET_PROVINCE_LIST, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: "آذربایجان شرقی"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "اردبیل"
|
||||
}
|
||||
]
|
||||
}))
|
||||
}),
|
||||
rest.get(GET_ROLE_LIST, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: "admin",
|
||||
name_fa: "ادمین"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "manager",
|
||||
name_fa: "مدیر"
|
||||
}
|
||||
]
|
||||
}))
|
||||
}),
|
||||
rest.post(EXPERT_MANAGEMENT, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.status(200),
|
||||
);
|
||||
}),
|
||||
rest.delete(`${EXPERT_MANAGEMENT}/:id`, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.status(200),
|
||||
);
|
||||
}),
|
||||
rest.post(`${EXPERT_MANAGEMENT}/:id`, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.status(200),
|
||||
);
|
||||
}),
|
||||
]
|
||||
@@ -35,7 +35,8 @@
|
||||
"change-password": "تغییر رمز عبور",
|
||||
"edit-profile": "ویرایش پروفایل",
|
||||
"role-management": "مدیریت نقش ها",
|
||||
"admin": "مدیریت"
|
||||
"admin": "مدیریت",
|
||||
"expert-management": "مدیریت کارشناسان"
|
||||
},
|
||||
"secondary": {
|
||||
},
|
||||
@@ -74,7 +75,8 @@
|
||||
"dashboard_page": "داشبورد",
|
||||
"change_password": "تغییر رمز عبور",
|
||||
"edit_profile": "ویرایش پروفایل",
|
||||
"role_management_page": "مدیریت نقش ها"
|
||||
"role_management_page": "مدیریت نقش ها",
|
||||
"expert_management": "مدیریت کارشناسان"
|
||||
},
|
||||
"MuiDatePicker": {
|
||||
"date_picker_birthday": "تاریخ"
|
||||
@@ -188,5 +190,65 @@
|
||||
"button-cancel": "انصراف",
|
||||
"typography": "آیا از حدف این مورد اطمینان دارید ؟",
|
||||
"button-delete": "حذف کردن"
|
||||
},
|
||||
"ExpertMangement": {
|
||||
"id": "کد یکتا",
|
||||
"name": "نام کامل",
|
||||
"username": "نام کاربری",
|
||||
"email": "پست الکترونیک",
|
||||
"phone_number": "شماره همراه",
|
||||
"national_id": "کد ملی",
|
||||
"position": "سمت",
|
||||
"province_fa": "استان",
|
||||
"role_name": "نقش",
|
||||
"gender": "جنسیت",
|
||||
"male": "مرد",
|
||||
"female": "زن",
|
||||
"updated_at": "آخرین بروزرسانی",
|
||||
"create": "افزودن کارشناس",
|
||||
"personal_info": "مشخصات کارشناس",
|
||||
"user_info": "اطلاعات کاربری",
|
||||
"rest_info": "اطلاعات تکمیلی",
|
||||
"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_roles": "نقش",
|
||||
"text_field_loading_provinces_list": "درحال دریافت شهر ها",
|
||||
"text_field_error_fetching_provinces": "خطا در دریافت شهر ها",
|
||||
"text_field_loading_roles_list": "درحال دریافت نقش ها",
|
||||
"text_field_error_fetching_roles": "خطا در دریافت نقش ها",
|
||||
"text_field_please_select_province": "ابتدا استان خود را انتخاب کنید",
|
||||
"text_field_loading_cities_list": "درحال دریافت شهر ها",
|
||||
"text_field_error_fetching_cities": "خطا در دریافت شهر ها",
|
||||
"text_field_new_password": "رمز عبور جدید",
|
||||
"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_roles": "نقش خود را وارد کنید",
|
||||
"error_message_new_password": "رمز عبور جدید را وارد کنید",
|
||||
"error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
|
||||
"button_cancel": "بستن",
|
||||
"button_confirm": "ثبت",
|
||||
"delete_expert": "حذف کارشناس",
|
||||
"are_you_sure_text": "آیا از انجام این عملیات اطمینان دارید؟",
|
||||
"button_delete": "حذف",
|
||||
"delete_tooltip": "حذف",
|
||||
"update_tooltip": "ویرایش",
|
||||
"update_expert": "ویرایش کارشناس"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import {render, screen} from "@testing-library/react";
|
||||
import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
|
||||
import ExpertManagementDataTable from "@/components/dashboard/expert-management/DataTable";
|
||||
|
||||
describe("ExpertManagementDatatable Component From Expert Management", () => {
|
||||
describe("Rendering", () => {
|
||||
it("Table Headers Rendered", () => {
|
||||
render(<MockAppWithProviders><ExpertManagementDataTable/></MockAppWithProviders>);
|
||||
const idHeader = screen.queryByText("کد یکتا");
|
||||
const nameHeader = screen.queryByText("نام کامل");
|
||||
const usernameHeader = screen.queryByText("نام کاربری");
|
||||
const emailHeader = screen.queryByText("پست الکترونیک");
|
||||
const phone_numberHeader = screen.queryByText("شماره همراه");
|
||||
const national_idHeader = screen.queryByText("کد ملی");
|
||||
const positionHeader = screen.queryByText("سمت");
|
||||
const province_nameHeader = screen.queryByText("استان");
|
||||
const role_nameHeader = screen.queryByText("نقش");
|
||||
const genderHeader = screen.queryByText("جنسیت");
|
||||
const updated_atHeader = screen.queryByText("آخرین بروزرسانی");
|
||||
expect(idHeader).toBeInTheDocument();
|
||||
expect(nameHeader).toBeInTheDocument();
|
||||
expect(usernameHeader).toBeInTheDocument();
|
||||
expect(emailHeader).toBeInTheDocument();
|
||||
expect(phone_numberHeader).toBeInTheDocument();
|
||||
expect(national_idHeader).toBeInTheDocument();
|
||||
expect(positionHeader).toBeInTheDocument();
|
||||
expect(province_nameHeader).toBeInTheDocument();
|
||||
expect(role_nameHeader).toBeInTheDocument();
|
||||
expect(genderHeader).toBeInTheDocument();
|
||||
expect(updated_atHeader).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
189
src/components/dashboard/expert-management/DataTable/index.jsx
Normal file
189
src/components/dashboard/expert-management/DataTable/index.jsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import DataTable from "@/core/components/DataTable";
|
||||
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
||||
import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import TableToolbar from "../TableToolbar";
|
||||
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();
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("ExpertMangement.id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: [
|
||||
"equals",
|
||||
"notEquals",
|
||||
"contains",
|
||||
"lessThan",
|
||||
"greaterThan",
|
||||
"between",
|
||||
],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.full_name,
|
||||
id: "name",
|
||||
header: t("ExpertMangement.name"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.username,
|
||||
id: "username",
|
||||
header: t("ExpertMangement.username"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.email,
|
||||
id: "email",
|
||||
header: t("ExpertMangement.email"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.phone_number,
|
||||
id: "phone_number",
|
||||
header: t("ExpertMangement.phone_number"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.national_id,
|
||||
id: "national_id",
|
||||
header: t("ExpertMangement.national_id"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.position,
|
||||
id: "position",
|
||||
header: t("ExpertMangement.position"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.province_fa,
|
||||
id: "province_fa",
|
||||
header: t("ExpertMangement.province_fa"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.roles[0].name_fa,
|
||||
id: "roles[0].name_fa",
|
||||
header: t("ExpertMangement.role_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography variant="body2">{renderedCellValue}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.gender,
|
||||
id: "gender",
|
||||
header: t("ExpertMangement.gender"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "text",
|
||||
filterFn: "contains",
|
||||
columnFilterModeOptions: ["contains", "equals", "notEquals"],
|
||||
Cell: ({renderedCellValue}) => (
|
||||
<Typography
|
||||
variant="body2">{renderedCellValue === "male" ? t("ExpertMangement.male") : t("ExpertMangement.female")}</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) =>
|
||||
moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
|
||||
id: "updated_at",
|
||||
header: t("ExpertMangement.updated_at"),
|
||||
enableColumnFilter: true,
|
||||
datatype: "date",
|
||||
filterFn: "lessThan",
|
||||
columnFilterModeOptions: ["lessThan", "greaterThan"],
|
||||
Cell: ({renderedCellValue}) => {
|
||||
return <Typography variant="body2">{renderedCellValue}</Typography>;
|
||||
},
|
||||
Header: ({column}) => <>{column.columnDef.header}</>,
|
||||
Filter: ({column}) => {
|
||||
return (
|
||||
<MuiDatePicker column={column}/>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={EXPERT_MANAGEMENT}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
CustomToolbar={TableToolbar}
|
||||
enableCustomToolbar={true}
|
||||
enableLastUpdate={true}
|
||||
enablePinning={true}
|
||||
enableDensityToggle={false}
|
||||
initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
|
||||
enableColumnFilters={true}
|
||||
enableHiding={true}
|
||||
enableFullScreenToggle={false}
|
||||
enableGlobalFilter={false}
|
||||
enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
|
||||
enableRowActions={true}
|
||||
TableRowAction={TableRowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default ExpertManagementDataTable;
|
||||
@@ -0,0 +1,7 @@
|
||||
const ChangePassword = () => {
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChangePassword
|
||||
@@ -0,0 +1,219 @@
|
||||
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
|
||||
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({
|
||||
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")),
|
||||
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={{
|
||||
full_name: "",
|
||||
email: "",
|
||||
phone_number: "",
|
||||
telephone_id: "",
|
||||
national_id: "",
|
||||
gender: ""
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={(values, {}) => {
|
||||
}}
|
||||
>
|
||||
{formikProps => (<Component formik={formikProps}></Component>)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
describe("PersonalInfo Component From Expert Management (create)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("full_name TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const fullNameTextField = screen.queryByLabelText('نام کامل');
|
||||
expect(fullNameTextField).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it("Email TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const emailTextField = screen.queryByLabelText('پست الکترونیک');
|
||||
expect(emailTextField).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it("Phone Number TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
|
||||
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(() => {
|
||||
const nationalIdTextField = screen.queryByLabelText('کد ملی');
|
||||
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('نام کامل');
|
||||
fireEvent.change(nameTextField, {target: {value: 'exampleName'}});
|
||||
await act(() => {
|
||||
expect(nameTextField).toHaveValue('exampleName');
|
||||
})
|
||||
});
|
||||
it("Email TextField Work Correctly", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></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><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
|
||||
fireEvent.change(phoneNumberTextField, {target: {value: 'examplePhoneNumber'}});
|
||||
await act(() => {
|
||||
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('کد ملی');
|
||||
fireEvent.change(nationalIdTextField, {target: {value: 'exampleNationalId'}});
|
||||
await act(() => {
|
||||
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('نام کامل');
|
||||
|
||||
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 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>);
|
||||
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
|
||||
fireEvent.change(nationalIdInput, {target: {value: ''}});
|
||||
fireEvent.blur(nationalIdInput);
|
||||
|
||||
await waitFor(() => {
|
||||
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')
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,128 @@
|
||||
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}>
|
||||
<TextField
|
||||
name="full_name"
|
||||
label={t("ExpertMangement.text_field_full_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
value={formik.values.full_name}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
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}>
|
||||
<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}>
|
||||
<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}>
|
||||
<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 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>
|
||||
)
|
||||
}
|
||||
export default PersonalInfo
|
||||
@@ -0,0 +1,96 @@
|
||||
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 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")),
|
||||
roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
|
||||
});
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
position: "",
|
||||
roles: ""
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={(values, {}) => {
|
||||
}}
|
||||
>
|
||||
{formikProps => (<Component formik={formikProps}></Component>)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
describe("PositionAndRole Component From Expert Management (create)", () => {
|
||||
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>);
|
||||
const roleSelect = screen.getByTestId('select-box');
|
||||
await waitFor(() => {
|
||||
expect(roleSelect).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>);
|
||||
const roleSelect = screen.getByTestId("option-opener-role");
|
||||
await waitFor(() => {
|
||||
expect(roleSelect).toBeInTheDocument();
|
||||
});
|
||||
fireEvent.mouseDown(roleSelect);
|
||||
await waitFor(() => {
|
||||
const selectItem = screen.queryByText("ادمین");
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
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 Select An Item With Valid Value of role', async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
|
||||
const roleInput = await waitFor(() => screen.getByTestId("input-role-id"));
|
||||
const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener-role"));
|
||||
|
||||
fireEvent.mouseDown(roleSelectOpener);
|
||||
const selectItem = await waitFor(() => screen.queryByText("ادمین"));
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
fireEvent.click(selectItem);
|
||||
await waitFor(() => {
|
||||
expect(roleInput.value).toBe('1')
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
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";
|
||||
import {log} from "next/dist/server/typescript/utils";
|
||||
|
||||
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.roles && !!formik.errors.roles}
|
||||
sx={{width: "100%", mt: 2}}
|
||||
size="small"
|
||||
>
|
||||
<InputLabel>{t("ExpertMangement.text_field_roles")}</InputLabel>
|
||||
<Select
|
||||
name="roles"
|
||||
label={t("ExpertMangement.text_field_roles")}
|
||||
value={formik.values.roles}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
fullWidth
|
||||
inputProps={{
|
||||
"data-testid": "input-role-id"
|
||||
}}
|
||||
data-testid="select-box"
|
||||
SelectDisplayProps={{"data-testid": 'option-opener-role'}}
|
||||
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.roles && formik.errors.roles ? formik.errors.roles : ""}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
export default PositionAndRole
|
||||
@@ -0,0 +1,71 @@
|
||||
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("Province Component From Expert Management (create)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("Province Select Box Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const provinceSelectBox = screen.getByTestId('select-box');
|
||||
expect(provinceSelectBox).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Behavioral", () => {
|
||||
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-province"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(provinceSelectBox).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.mouseDown(provinceSelectOpener);
|
||||
await waitFor(() => {
|
||||
const selectItem = screen.queryByText("آذربایجان شرقی");
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
describe("validation", () => {
|
||||
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-province"));
|
||||
|
||||
fireEvent.mouseDown(provinceSelectOpener);
|
||||
const selectItem = await waitFor(() => screen.queryByText("آذربایجان شرقی"));
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
fireEvent.click(selectItem);
|
||||
await waitFor(() => {
|
||||
expect(provinceInput.value).toBe('1')
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
|
||||
const Province = ({formik}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest()
|
||||
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
|
||||
|
||||
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")}
|
||||
value={formik.values.province_id}
|
||||
onChange={(e) => {
|
||||
formik.setFieldValue("province_id", e.target.value);
|
||||
}}
|
||||
inputProps={{
|
||||
"data-testid": "input-province-id"
|
||||
}}
|
||||
data-testid="select-box"
|
||||
SelectDisplayProps={{"data-testid": 'option-opener-province'}}
|
||||
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>
|
||||
)
|
||||
}
|
||||
export default Province
|
||||
@@ -0,0 +1,12 @@
|
||||
import Province from "./Province";
|
||||
import PositionAndRole from "./PositionAndRole";
|
||||
|
||||
const RestInfo = ({formik}) => {
|
||||
return (
|
||||
<>
|
||||
<Province formik={formik}/>
|
||||
<PositionAndRole formik={formik}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RestInfo
|
||||
@@ -0,0 +1,123 @@
|
||||
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import {Formik} from "formik";
|
||||
import UserInfo from "../../UserInfo";
|
||||
|
||||
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("UserInfo Component From Expert Management (create)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("UserName TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const usernameTextField = screen.queryByLabelText('نام کاربری');
|
||||
expect(usernameTextField).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it("Password TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const passwordTextField = screen.queryByLabelText('رمز عبور');
|
||||
expect(passwordTextField).toBeInTheDocument();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
describe("Behavioral", () => {
|
||||
it("Username TextField Work Correctly", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></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><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
|
||||
const passwordTextField = screen.queryByLabelText('رمز عبور');
|
||||
fireEvent.change(passwordTextField, {target: {value: 'examplePassword'}});
|
||||
await act(() => {
|
||||
expect(passwordTextField).toHaveValue('examplePassword');
|
||||
})
|
||||
});
|
||||
});
|
||||
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()
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
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}}>
|
||||
<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
|
||||
@@ -0,0 +1,67 @@
|
||||
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import CreateContent from "../../CreateContent";
|
||||
import MockAppWithProviders from "../../../../../../../../mocks/AppWithProvider";
|
||||
|
||||
function selectDropdownItem(screen, openerTestId, itemText) {
|
||||
const opener = screen.getByTestId(openerTestId);
|
||||
fireEvent.mouseDown(opener);
|
||||
const selectItem = screen.queryByText(itemText);
|
||||
fireEvent.click(selectItem);
|
||||
}
|
||||
|
||||
function setInputValue(screen, inputElement, value) {
|
||||
fireEvent.change(inputElement, {target: {value}});
|
||||
}
|
||||
|
||||
describe("CreateContent Component From Expert Management (create)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("close button Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const cancelBtn = screen.queryByText('بستن');
|
||||
expect(cancelBtn).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it("confirm button Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const cancelBtn = screen.queryByText('ثبت');
|
||||
expect(cancelBtn).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Form Submission", () => {
|
||||
it('Should enable the submit button when the inputs are valid', async () => {
|
||||
render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
|
||||
|
||||
const submitButton = screen.queryByText('ثبت');
|
||||
|
||||
const nameInput = screen.queryByLabelText('نام کامل');
|
||||
const usernameInput = screen.queryByLabelText('نام کاربری');
|
||||
const emailInput = screen.queryByLabelText('پست الکترونیک');
|
||||
const phoneNumberInput = screen.queryByLabelText('شماره همراه');
|
||||
const telephoneIdInput = screen.queryByLabelText('کد تلفن');
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
const passwordInput = screen.queryByLabelText('رمز عبور');
|
||||
const positionInput = screen.queryByLabelText('سمت');
|
||||
|
||||
selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
|
||||
selectDropdownItem(screen, "option-opener-role", "ادمین");
|
||||
selectDropdownItem(screen, "option-opener-gender", "مرد");
|
||||
|
||||
setInputValue(screen, nameInput, 'nameTest');
|
||||
setInputValue(screen, usernameInput, 'usernameTest');
|
||||
setInputValue(screen, emailInput, 'emailTest');
|
||||
setInputValue(screen, phoneNumberInput, 'phoneNumberTest');
|
||||
setInputValue(screen, telephoneIdInput, 'telephoneIdTest');
|
||||
setInputValue(screen, nationalIdInput, 'nationalIdTest');
|
||||
setInputValue(screen, passwordInput, 'passwordTest');
|
||||
setInputValue(screen, positionInput, 'positionTest');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(submitButton).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,116 @@
|
||||
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 useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {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 validationSchema = Yup.object().shape({
|
||||
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"))
|
||||
.matches(
|
||||
/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
|
||||
t("ExpertMangement.error_message_password_regex")
|
||||
),
|
||||
position: Yup.string().required(t("ExpertMangement.error_message_position")),
|
||||
province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
|
||||
roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
full_name: "",
|
||||
username: "",
|
||||
email: "",
|
||||
phone_number: "",
|
||||
telephone_id: "",
|
||||
gender: "",
|
||||
national_id: "",
|
||||
password: "",
|
||||
position: "",
|
||||
province_id: "",
|
||||
roles: ""
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
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("roles", values.roles);
|
||||
|
||||
requestServer(`${EXPERT_MANAGEMENT}`, 'post', {auth: true, data: formData})
|
||||
.then((response) => {
|
||||
setOpenCreateDialog(false)
|
||||
mutate(fetchUrl)
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.personal_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<PersonalInfo formik={formik}/>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.user_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<UserInfo formik={formik}/>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.rest_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<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 || !formik.isValid || !formik.dirty}>
|
||||
{t("ExpertMangement.button_confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateContent
|
||||
@@ -0,0 +1,131 @@
|
||||
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
|
||||
import CreateForm from "../../CreateForm";
|
||||
|
||||
function selectDropdownItem(screen, openerTestId, itemText) {
|
||||
const opener = screen.getByTestId(openerTestId);
|
||||
fireEvent.mouseDown(opener);
|
||||
const selectItem = screen.queryByText(itemText);
|
||||
fireEvent.click(selectItem);
|
||||
}
|
||||
|
||||
function setInputValue(screen, inputElement, value) {
|
||||
fireEvent.change(inputElement, {target: {value}});
|
||||
}
|
||||
|
||||
describe("CreateForm Component From Expert Management", () => {
|
||||
describe("Rendering", () => {
|
||||
it("Create Button Rendered", () => {
|
||||
render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
|
||||
const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
|
||||
expect(CreateButton).toBeInTheDocument();
|
||||
});
|
||||
it("Dialog Header Rendered", () => {
|
||||
render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
|
||||
const CreateDialogHeader = screen.queryByText("افزودن کارشناس");
|
||||
expect(CreateDialogHeader).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
describe("Behavioral", () => {
|
||||
it("by Clicking Create Button Dialog Should Append To Document", async () => {
|
||||
render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
|
||||
const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
|
||||
fireEvent.click(CreateButton);
|
||||
await act(() => {
|
||||
const CreateDialog = screen.getByRole('dialog', {name: "افزودن کارشناس"})
|
||||
expect(CreateDialog).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Form Submission", () => {
|
||||
it('Should request to api and if get success close dialog', async () => {
|
||||
render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
|
||||
|
||||
const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
|
||||
fireEvent.click(CreateButton);
|
||||
|
||||
const submitButton = screen.queryByText('ثبت');
|
||||
|
||||
const nameInput = screen.queryByLabelText('نام کامل');
|
||||
const usernameInput = screen.queryByLabelText('نام کاربری');
|
||||
const emailInput = screen.queryByLabelText('پست الکترونیک');
|
||||
const phoneNumberInput = screen.queryByLabelText('شماره همراه');
|
||||
const telephoneIdInput = screen.queryByLabelText('کد تلفن');
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
const passwordInput = screen.queryByLabelText('رمز عبور');
|
||||
const positionInput = screen.queryByLabelText('سمت');
|
||||
|
||||
selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
|
||||
selectDropdownItem(screen, "option-opener-role", "ادمین");
|
||||
selectDropdownItem(screen, "option-opener-gender", "مرد");
|
||||
|
||||
setInputValue(screen, nameInput, 'nameTest');
|
||||
setInputValue(screen, usernameInput, 'usernameTest');
|
||||
setInputValue(screen, emailInput, 'emailTest@gmail.com');
|
||||
setInputValue(screen, phoneNumberInput, '0914577458');
|
||||
setInputValue(screen, telephoneIdInput, '091');
|
||||
setInputValue(screen, nationalIdInput, 'nationalIdTest');
|
||||
setInputValue(screen, passwordInput, 'passwordTest12');
|
||||
setInputValue(screen, positionInput, 'positionTest');
|
||||
|
||||
expect(submitButton).not.toBeDisabled();
|
||||
fireEvent.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
const dialogContent = screen.queryByTestId('create-dialog-content');
|
||||
expect(dialogContent).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('Should request to api and if get error keep previous data', async () => {
|
||||
render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
|
||||
|
||||
const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
|
||||
fireEvent.click(CreateButton);
|
||||
|
||||
const submitButton = screen.queryByText('ثبت');
|
||||
|
||||
const nameInput = screen.queryByLabelText('نام کامل');
|
||||
const usernameInput = screen.queryByLabelText('نام کاربری');
|
||||
const emailInput = screen.queryByLabelText('پست الکترونیک');
|
||||
const phoneNumberInput = screen.queryByLabelText('شماره همراه');
|
||||
const telephoneIdInput = screen.queryByLabelText('کد تلفن');
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
const passwordInput = screen.queryByLabelText('رمز عبور');
|
||||
const positionInput = screen.queryByLabelText('سمت');
|
||||
const provinceInput = screen.getByTestId("input-province-id")
|
||||
const roleInput = screen.getByTestId("input-role-id")
|
||||
const genderInput = screen.getByTestId("input-gender")
|
||||
|
||||
selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
|
||||
selectDropdownItem(screen, "option-opener-role", "ادمین");
|
||||
selectDropdownItem(screen, "option-opener-gender", "مرد");
|
||||
|
||||
setInputValue(screen, nameInput, 'nameTest');
|
||||
setInputValue(screen, usernameInput, 'usernameTest');
|
||||
setInputValue(screen, emailInput, 'emailTest@gmail.com');
|
||||
setInputValue(screen, phoneNumberInput, '0914577458');
|
||||
setInputValue(screen, telephoneIdInput, '091');
|
||||
setInputValue(screen, nationalIdInput, 'nationalIdTest');
|
||||
setInputValue(screen, passwordInput, 'passwordTest12');
|
||||
setInputValue(screen, positionInput, 'positionTest');
|
||||
|
||||
expect(submitButton).not.toBeDisabled();
|
||||
await fireEvent.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(nameInput).toHaveValue('nameTest');
|
||||
expect(usernameInput).toHaveValue('usernameTest');
|
||||
expect(emailInput).toHaveValue('emailTest@gmail.com');
|
||||
expect(phoneNumberInput).toHaveValue('0914577458');
|
||||
expect(telephoneIdInput).toHaveValue('091');
|
||||
expect(nationalIdInput).toHaveValue('nationalIdTest');
|
||||
expect(passwordInput).toHaveValue('passwordTest12');
|
||||
expect(positionInput).toHaveValue('positionTest');
|
||||
expect(provinceInput).toHaveValue('1');
|
||||
expect(roleInput).toHaveValue('1');
|
||||
expect(genderInput).toHaveValue('male');
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
||||
import {useState} from "react";
|
||||
import CreateContent from "./CreateContent";
|
||||
|
||||
const Create = ({mutate, fetchUrl}) => {
|
||||
const t = useTranslations();
|
||||
const [openCreateDialog, setOpenCreateDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Tooltip title={t("ExpertMangement.create")} arrow placement="right">
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
size="small"
|
||||
sx={{textTransform: "unset", alignSelf: "center"}}
|
||||
startIcon={<DataSaverOnIcon/>}
|
||||
onClick={() => {
|
||||
setOpenCreateDialog(true)
|
||||
}}
|
||||
>
|
||||
{t("ExpertMangement.create")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
<Dialog data-testid="create-dialog-content" fullWidth maxWidth={'lg'} open={openCreateDialog}
|
||||
TransitionProps={{unmountOnExit: true}}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ExpertMangement.create")}</DialogTitle>
|
||||
<CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate} fetchUrl={fetchUrl}/>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Create
|
||||
@@ -0,0 +1,66 @@
|
||||
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
|
||||
import React from "react";
|
||||
import DeleteForm from "@/components/dashboard/expert-management/Form/DeleteForm";
|
||||
|
||||
describe("CreateForm Component From Expert Management", () => {
|
||||
describe("Rendering", () => {
|
||||
it("Delete Expert Button And Tooltip Rendered", () => {
|
||||
render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
|
||||
const DeleteButton = screen.getByTestId('delete-button');
|
||||
expect(DeleteButton).toBeInTheDocument();
|
||||
});
|
||||
it("Delete Dialog Rendered", () => {
|
||||
render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
|
||||
const DeleteButton = screen.getByTestId('delete-button');
|
||||
fireEvent.click(DeleteButton);
|
||||
const DeleteDialogHeader = screen.queryByText("حذف کارشناس");
|
||||
expect(DeleteDialogHeader).toBeInTheDocument();
|
||||
});
|
||||
it("Delete Dialog Text Rendered", () => {
|
||||
render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
|
||||
const DeleteButton = screen.getByTestId('delete-button');
|
||||
fireEvent.click(DeleteButton);
|
||||
const DeleteDialogText = screen.queryByText("آیا از انجام این عملیات اطمینان دارید؟");
|
||||
expect(DeleteDialogText).toBeInTheDocument();
|
||||
});
|
||||
it("Delete Dialog Delete Button Rendered", () => {
|
||||
render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
|
||||
const DeleteButton = screen.getByTestId('delete-button');
|
||||
fireEvent.click(DeleteButton);
|
||||
const DeleteButtonDialog = screen.getByRole('button', {name: "حذف"});
|
||||
expect(DeleteButtonDialog).toBeInTheDocument();
|
||||
});
|
||||
it("Delete Dialog Cancel Button Rendered", () => {
|
||||
render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
|
||||
const DeleteButton = screen.getByTestId('delete-button');
|
||||
fireEvent.click(DeleteButton);
|
||||
const CancelButtonDialog = screen.getByRole('button', {name: "بستن"});
|
||||
expect(CancelButtonDialog).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
describe("Behavioral", () => {
|
||||
it("By Clicking Delete Button Dialog Should Append To Document", async () => {
|
||||
render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
|
||||
const DeleteButton = screen.getByTestId('delete-button');
|
||||
fireEvent.click(DeleteButton);
|
||||
await waitFor(() => {
|
||||
const DeleteDialog = screen.getByRole('dialog', {name: "حذف کارشناس"})
|
||||
expect(DeleteDialog).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Form Submission", () => {
|
||||
it("By Clicking Delete Button Request To Api And Delete Item", async () => {
|
||||
render(<MockAppWithProviders><DeleteForm rowId={1}/></MockAppWithProviders>);
|
||||
const DeleteButton = screen.getByTestId('delete-button');
|
||||
fireEvent.click(DeleteButton);
|
||||
const DeleteButtonDialog = screen.getByRole('button', {name: "حذف"});
|
||||
fireEvent.click(DeleteButtonDialog);
|
||||
await waitFor(() => {
|
||||
const DeleteDialog = screen.queryByRole('dialog', {name: "حذف کارشناس"});
|
||||
expect(DeleteDialog).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Tooltip
|
||||
} from "@mui/material";
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import {useState} from "react";
|
||||
import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
const Delete = ({rowId, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest({auth: true});
|
||||
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleDelete = () => {
|
||||
setIsSubmitting(true)
|
||||
requestServer(`${EXPERT_MANAGEMENT}/${rowId}`, 'DELETE')
|
||||
.then((response) => {
|
||||
setOpenDeleteDialog(false);
|
||||
mutate(fetchUrl)
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
.finally(() => {
|
||||
setIsSubmitting(false)
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ExpertMangement.delete_tooltip")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
data-testid="delete-button"
|
||||
onClick={() => {
|
||||
setOpenDeleteDialog(true);
|
||||
}}
|
||||
>
|
||||
<DeleteIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openDeleteDialog}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogTitle>{t("ExpertMangement.delete_expert")}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>{t("ExpertMangement.are_you_sure_text")}</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenDeleteDialog(false)} color="secondary" autoFocus>
|
||||
{t("ExpertMangement.button_cancel")}
|
||||
</Button>
|
||||
<Button onClick={handleDelete} variant="contained" color="primary" disabled={isSubmitting}>
|
||||
{t("ExpertMangement.button_delete")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Delete;
|
||||
@@ -0,0 +1,219 @@
|
||||
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
|
||||
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({
|
||||
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")),
|
||||
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={{
|
||||
full_name: "",
|
||||
email: "",
|
||||
phone_number: "",
|
||||
telephone_id: "",
|
||||
national_id: "",
|
||||
gender: ""
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={(values, {}) => {
|
||||
}}
|
||||
>
|
||||
{formikProps => (<Component formik={formikProps}></Component>)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
describe("PersonalInfo Component From Expert Management (update)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("full_name TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const fullNameTextField = screen.queryByLabelText('نام کامل');
|
||||
expect(fullNameTextField).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it("Email TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const emailTextField = screen.queryByLabelText('پست الکترونیک');
|
||||
expect(emailTextField).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it("Phone Number TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
|
||||
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(() => {
|
||||
const nationalIdTextField = screen.queryByLabelText('کد ملی');
|
||||
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('نام کامل');
|
||||
fireEvent.change(nameTextField, {target: {value: 'exampleName'}});
|
||||
await act(() => {
|
||||
expect(nameTextField).toHaveValue('exampleName');
|
||||
})
|
||||
});
|
||||
it("Email TextField Work Correctly", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></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><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
|
||||
const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
|
||||
fireEvent.change(phoneNumberTextField, {target: {value: 'examplePhoneNumber'}});
|
||||
await act(() => {
|
||||
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('کد ملی');
|
||||
fireEvent.change(nationalIdTextField, {target: {value: 'exampleNationalId'}});
|
||||
await act(() => {
|
||||
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('نام کامل');
|
||||
|
||||
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 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>);
|
||||
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
|
||||
fireEvent.change(nationalIdInput, {target: {value: ''}});
|
||||
fireEvent.blur(nationalIdInput);
|
||||
|
||||
await waitFor(() => {
|
||||
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')
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,128 @@
|
||||
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}>
|
||||
<TextField
|
||||
name="full_name"
|
||||
label={t("ExpertMangement.text_field_full_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
value={formik.values.full_name}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
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}>
|
||||
<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}>
|
||||
<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}>
|
||||
<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 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>
|
||||
)
|
||||
}
|
||||
export default PersonalInfo
|
||||
@@ -0,0 +1,96 @@
|
||||
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 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")),
|
||||
roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
|
||||
});
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
position: "",
|
||||
roles: ""
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={(values, {}) => {
|
||||
}}
|
||||
>
|
||||
{formikProps => (<Component formik={formikProps}></Component>)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
describe("PositionAndRole Component From Expert Management (update)", () => {
|
||||
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>);
|
||||
const roleSelect = screen.getByTestId('select-box');
|
||||
await waitFor(() => {
|
||||
expect(roleSelect).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>);
|
||||
const roleSelect = screen.getByTestId("option-opener-role");
|
||||
await waitFor(() => {
|
||||
expect(roleSelect).toBeInTheDocument();
|
||||
});
|
||||
fireEvent.mouseDown(roleSelect);
|
||||
await waitFor(() => {
|
||||
const selectItem = screen.queryByText("ادمین");
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
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 Select An Item With Valid Value of role', async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
|
||||
const roleInput = await waitFor(() => screen.getByTestId("input-role-id"));
|
||||
const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener-role"));
|
||||
|
||||
fireEvent.mouseDown(roleSelectOpener);
|
||||
const selectItem = await waitFor(() => screen.queryByText("ادمین"));
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
fireEvent.click(selectItem);
|
||||
await waitFor(() => {
|
||||
expect(roleInput.value).toBe('1')
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
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";
|
||||
import {log} from "next/dist/server/typescript/utils";
|
||||
|
||||
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.roles && !!formik.errors.roles}
|
||||
sx={{width: "100%", mt: 2}}
|
||||
size="small"
|
||||
>
|
||||
<InputLabel>{t("ExpertMangement.text_field_roles")}</InputLabel>
|
||||
<Select
|
||||
name="roles"
|
||||
label={t("ExpertMangement.text_field_roles")}
|
||||
disabled={isLoadingRoleList || errorRoleList}
|
||||
value={isLoadingRoleList || errorRoleList ? "" : formik.values.roles}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
fullWidth
|
||||
inputProps={{
|
||||
"data-testid": "input-role-id"
|
||||
}}
|
||||
data-testid="select-box"
|
||||
SelectDisplayProps={{"data-testid": 'option-opener-role'}}
|
||||
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.roles && formik.errors.roles ? formik.errors.roles : ""}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
export default PositionAndRole
|
||||
@@ -0,0 +1,71 @@
|
||||
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("Province Component From Expert Management (update)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("Province Select Box Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const provinceSelectBox = screen.getByTestId('select-box');
|
||||
expect(provinceSelectBox).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Behavioral", () => {
|
||||
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-province"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(provinceSelectBox).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.mouseDown(provinceSelectOpener);
|
||||
await waitFor(() => {
|
||||
const selectItem = screen.queryByText("آذربایجان شرقی");
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
describe("validation", () => {
|
||||
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-province"));
|
||||
|
||||
fireEvent.mouseDown(provinceSelectOpener);
|
||||
const selectItem = await waitFor(() => screen.queryByText("آذربایجان شرقی"));
|
||||
expect(selectItem).toBeInTheDocument();
|
||||
fireEvent.click(selectItem);
|
||||
await waitFor(() => {
|
||||
expect(provinceInput.value).toBe('1')
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
|
||||
const Province = ({formik}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest()
|
||||
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
|
||||
|
||||
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")}
|
||||
value={isLoadingProvinceList || errorProvinceList ? "" : formik.values.province_id}
|
||||
onChange={(e) => {
|
||||
formik.setFieldValue("province_id", e.target.value);
|
||||
}}
|
||||
inputProps={{
|
||||
"data-testid": "input-province-id"
|
||||
}}
|
||||
data-testid="select-box"
|
||||
SelectDisplayProps={{"data-testid": 'option-opener-province'}}
|
||||
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>
|
||||
)
|
||||
}
|
||||
export default Province
|
||||
@@ -0,0 +1,13 @@
|
||||
import Province from "@/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/Province";
|
||||
import PositionAndRole
|
||||
from "@/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/PositionAndRole";
|
||||
|
||||
const RestInfo = ({formik}) => {
|
||||
return (
|
||||
<>
|
||||
<Province formik={formik}/>
|
||||
<PositionAndRole formik={formik}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default RestInfo
|
||||
@@ -0,0 +1,62 @@
|
||||
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import {Formik} from "formik";
|
||||
import UserInfo from "../../UserInfo";
|
||||
|
||||
const CreateFormMock = ({Component}) => {
|
||||
const t = useTranslations();
|
||||
const validationSchema = Yup.object().shape({
|
||||
username: Yup.string().required(t("ExpertMangement.error_message_username")),
|
||||
});
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
username: "",
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={(values, {}) => {
|
||||
}}
|
||||
>
|
||||
{formikProps => (<Component formik={formikProps}></Component>)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
describe("UserInfo Component From Expert Management (update)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("UserName TextField Rendered", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const usernameTextField = screen.queryByLabelText('نام کاربری');
|
||||
expect(usernameTextField).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Behavioral", () => {
|
||||
it("Username TextField Work Correctly", async () => {
|
||||
render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
|
||||
const usernameTextField = screen.queryByLabelText('نام کاربری');
|
||||
fireEvent.change(usernameTextField, {target: {value: 'exampleUsername'}});
|
||||
await act(() => {
|
||||
expect(usernameTextField).toHaveValue('exampleUsername');
|
||||
})
|
||||
});
|
||||
});
|
||||
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()
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
import {Grid, TextField} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default UserInfo
|
||||
@@ -0,0 +1,87 @@
|
||||
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import MockAppWithProviders from "../../../../../../../../mocks/AppWithProvider";
|
||||
import UpdateContent from "../../UpdateContent";
|
||||
|
||||
const row = {
|
||||
original: {
|
||||
avatar: null,
|
||||
created_at: "2023-10-10T13:05:01.000000Z",
|
||||
email: "fisher.sigrid@yahoo.com",
|
||||
full_name: "Anibal Labadie",
|
||||
gender: "female",
|
||||
id: 85,
|
||||
national_id: "5944646138",
|
||||
phone_number: "09731311720",
|
||||
position: "boss1",
|
||||
province_fa: "اردبیل",
|
||||
province_id: 3,
|
||||
roles: [{
|
||||
created_at: "2023-10-10T13:03:18.000000Z",
|
||||
guard_name: "api",
|
||||
id: 2,
|
||||
name: "manager",
|
||||
name_fa: "مدیر"
|
||||
}],
|
||||
telephone_id: "tel-3110",
|
||||
updated_at: "2023-10-17T10:57:12.000000Z",
|
||||
username: "florence.kihn",
|
||||
}
|
||||
}
|
||||
|
||||
function selectDropdownItem(screen, openerTestId, itemText) {
|
||||
const opener = screen.getByTestId(openerTestId);
|
||||
fireEvent.mouseDown(opener);
|
||||
const selectItem = screen.queryByText(itemText);
|
||||
fireEvent.click(selectItem);
|
||||
}
|
||||
|
||||
function setInputValue(screen, inputElement, value) {
|
||||
fireEvent.change(inputElement, {target: {value}});
|
||||
}
|
||||
|
||||
describe("UpdateContent Component From Expert Management (update)", () => {
|
||||
describe("Rendering", () => {
|
||||
it("close button Rendered", async () => {
|
||||
render(<MockAppWithProviders><UpdateContent row={row}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const cancelBtn = screen.queryByText('بستن');
|
||||
expect(cancelBtn).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it("confirm button Rendered", async () => {
|
||||
render(<MockAppWithProviders><UpdateContent row={row}/></MockAppWithProviders>);
|
||||
await waitFor(() => {
|
||||
const confirmBtn = screen.queryByText('ثبت');
|
||||
expect(confirmBtn).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Form Submission", () => {
|
||||
it('Should enable the submit button when the inputs are valid', async () => {
|
||||
render(<MockAppWithProviders><UpdateContent row={row}/></MockAppWithProviders>);
|
||||
|
||||
const submitButton = screen.queryByText('ثبت');
|
||||
|
||||
const nameInput = screen.queryByLabelText('نام کامل');
|
||||
const usernameInput = screen.queryByLabelText('نام کاربری');
|
||||
const emailInput = screen.queryByLabelText('پست الکترونیک');
|
||||
const phoneNumberInput = screen.queryByLabelText('شماره همراه');
|
||||
const telephoneIdInput = screen.queryByLabelText('کد تلفن');
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
const positionInput = screen.queryByLabelText('سمت');
|
||||
|
||||
setInputValue(screen, nameInput, 'nameTest');
|
||||
setInputValue(screen, usernameInput, 'usernameTest');
|
||||
setInputValue(screen, emailInput, 'emailTest');
|
||||
setInputValue(screen, phoneNumberInput, 'phoneNumberTest');
|
||||
setInputValue(screen, telephoneIdInput, 'telephoneIdTest');
|
||||
setInputValue(screen, nationalIdInput, 'nationalIdTest');
|
||||
setInputValue(screen, positionInput, 'positionTest');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(submitButton).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,108 @@
|
||||
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 useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import PersonalInfo from "./PersonalInfo";
|
||||
import UserInfo from "./UserInfo";
|
||||
import RestInfo from "./RestInfo";
|
||||
|
||||
const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest()
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
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")),
|
||||
position: Yup.string().required(t("ExpertMangement.error_message_position")),
|
||||
province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
|
||||
roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
|
||||
});
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues: {
|
||||
full_name: row.original.full_name,
|
||||
username: row.original.username,
|
||||
email: row.original.email,
|
||||
phone_number: row.original.phone_number,
|
||||
telephone_id: row.original.telephone_id,
|
||||
gender: row.original.gender,
|
||||
national_id: row.original.national_id,
|
||||
position: row.original.position,
|
||||
province_id: row.original.province_id,
|
||||
roles: row.original.roles[0].id
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values, {setSubmitting}) => {
|
||||
const formData = new FormData();
|
||||
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("province_id", values.province_id);
|
||||
formData.append("position", values.position);
|
||||
formData.append("roles", values.roles);
|
||||
|
||||
requestServer(`${EXPERT_MANAGEMENT}/${row.original.id}`, 'post', {auth: true, data: formData})
|
||||
.then((response) => {
|
||||
setOpenUpdateDialog(false)
|
||||
mutate(fetchUrl)
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.personal_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<PersonalInfo formik={formik}/>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.user_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<UserInfo formik={formik}/>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("ExpertMangement.rest_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<RestInfo formik={formik}/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenUpdateDialog(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 || !formik.isValid || !formik.dirty}>
|
||||
{t("ExpertMangement.button_confirm")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpdateContent
|
||||
@@ -0,0 +1,147 @@
|
||||
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
|
||||
import React from 'react';
|
||||
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
|
||||
import UpdateForm from "../../UpdateForm";
|
||||
|
||||
const row = {
|
||||
original: {
|
||||
avatar: null,
|
||||
created_at: "2023-10-10T13:05:01.000000Z",
|
||||
email: "fisher.sigrid@yahoo.com",
|
||||
full_name: "Anibal Labadie",
|
||||
gender: "female",
|
||||
id: 85,
|
||||
national_id: "5944646138",
|
||||
phone_number: "09731311720",
|
||||
position: "boss1",
|
||||
province_fa: "اردبیل",
|
||||
province_id: 3,
|
||||
roles: [{
|
||||
created_at: "2023-10-10T13:03:18.000000Z",
|
||||
guard_name: "api",
|
||||
id: 2,
|
||||
name: "manager",
|
||||
name_fa: "مدیر"
|
||||
}],
|
||||
telephone_id: "tel-3110",
|
||||
updated_at: "2023-10-17T10:57:12.000000Z",
|
||||
username: "florence.kihn",
|
||||
}
|
||||
}
|
||||
|
||||
function selectDropdownItem(screen, openerTestId, itemText) {
|
||||
const opener = screen.getByTestId(openerTestId);
|
||||
fireEvent.mouseDown(opener);
|
||||
const selectItem = screen.queryByText(itemText);
|
||||
fireEvent.click(selectItem);
|
||||
}
|
||||
|
||||
function setInputValue(screen, inputElement, value) {
|
||||
fireEvent.change(inputElement, {target: {value}});
|
||||
}
|
||||
|
||||
describe("CreateForm Component From Expert Management", () => {
|
||||
describe("Rendering", () => {
|
||||
it("Update Expert Button Rendered", () => {
|
||||
render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
|
||||
const UpdateButton = screen.getByTestId('update-button');
|
||||
expect(UpdateButton).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
describe("Behavioral", () => {
|
||||
it("by Clicking Update Button Dialog Should Append To Document", async () => {
|
||||
render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
|
||||
const UpdateButton = screen.getByTestId('update-button');
|
||||
fireEvent.click(UpdateButton);
|
||||
await act(() => {
|
||||
const UpdateDialog = screen.getByRole('dialog', {name: "ویرایش کارشناس"})
|
||||
expect(UpdateDialog).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
describe("Form Submission", () => {
|
||||
it('Should request to api and if get success close dialog', async () => {
|
||||
render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
|
||||
|
||||
const UpdateButton = screen.getByTestId('update-button');
|
||||
fireEvent.click(UpdateButton);
|
||||
|
||||
const submitButton = screen.queryByText('ثبت');
|
||||
|
||||
const nameInput = screen.queryByLabelText('نام کامل');
|
||||
const usernameInput = screen.queryByLabelText('نام کاربری');
|
||||
const emailInput = screen.queryByLabelText('پست الکترونیک');
|
||||
const phoneNumberInput = screen.queryByLabelText('شماره همراه');
|
||||
const telephoneIdInput = screen.queryByLabelText('کد تلفن');
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
const positionInput = screen.queryByLabelText('سمت');
|
||||
|
||||
selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
|
||||
selectDropdownItem(screen, "option-opener-role", "ادمین");
|
||||
selectDropdownItem(screen, "option-opener-gender", "مرد");
|
||||
|
||||
setInputValue(screen, nameInput, 'nameTest');
|
||||
setInputValue(screen, usernameInput, 'usernameTest');
|
||||
setInputValue(screen, emailInput, 'email@gmail.com');
|
||||
setInputValue(screen, phoneNumberInput, '0914577458');
|
||||
setInputValue(screen, telephoneIdInput, '091');
|
||||
setInputValue(screen, nationalIdInput, 'nationalIdTest');
|
||||
setInputValue(screen, positionInput, 'positionTest');
|
||||
|
||||
expect(submitButton).not.toBeDisabled();
|
||||
fireEvent.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
const dialogContent = screen.queryByTestId('update-dialog-content');
|
||||
expect(dialogContent).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
it('Should request to api and if get error keep previous data', async () => {
|
||||
render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
|
||||
|
||||
const UpdateButton = screen.getByTestId('update-button');
|
||||
fireEvent.click(UpdateButton);
|
||||
|
||||
const submitButton = screen.queryByText('ثبت');
|
||||
|
||||
const nameInput = screen.queryByLabelText('نام کامل');
|
||||
const usernameInput = screen.queryByLabelText('نام کاربری');
|
||||
const emailInput = screen.queryByLabelText('پست الکترونیک');
|
||||
const phoneNumberInput = screen.queryByLabelText('شماره همراه');
|
||||
const telephoneIdInput = screen.queryByLabelText('کد تلفن');
|
||||
const nationalIdInput = screen.queryByLabelText('کد ملی');
|
||||
const positionInput = screen.queryByLabelText('سمت');
|
||||
const provinceInput = screen.getByTestId("input-province-id")
|
||||
const roleInput = screen.getByTestId("input-role-id")
|
||||
const genderInput = screen.getByTestId("input-gender")
|
||||
|
||||
selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
|
||||
selectDropdownItem(screen, "option-opener-role", "ادمین");
|
||||
selectDropdownItem(screen, "option-opener-gender", "مرد");
|
||||
|
||||
setInputValue(screen, nameInput, 'nameTest');
|
||||
setInputValue(screen, usernameInput, 'usernameTest');
|
||||
setInputValue(screen, emailInput, 'emailTest@gmail.com');
|
||||
setInputValue(screen, phoneNumberInput, '0914577458');
|
||||
setInputValue(screen, telephoneIdInput, '091');
|
||||
setInputValue(screen, nationalIdInput, 'nationalIdTest');
|
||||
setInputValue(screen, positionInput, 'positionTest');
|
||||
|
||||
expect(submitButton).not.toBeDisabled();
|
||||
await fireEvent.click(submitButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(nameInput).toHaveValue('nameTest');
|
||||
expect(usernameInput).toHaveValue('usernameTest');
|
||||
expect(emailInput).toHaveValue('emailTest@gmail.com');
|
||||
expect(phoneNumberInput).toHaveValue('0914577458');
|
||||
expect(telephoneIdInput).toHaveValue('091');
|
||||
expect(nationalIdInput).toHaveValue('nationalIdTest');
|
||||
expect(positionInput).toHaveValue('positionTest');
|
||||
expect(provinceInput).toHaveValue('1');
|
||||
expect(roleInput).toHaveValue('1');
|
||||
expect(genderInput).toHaveValue('male');
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import {useState} from "react";
|
||||
import UpdateContent from "./UpdateContent";
|
||||
|
||||
|
||||
const Update = ({row, fetchUrl, mutate}) => {
|
||||
const t = useTranslations();
|
||||
const [openUpdateDialog, setOpenUpdateDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={t("ExpertMangement.update_tooltip")}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
data-testid="update-button"
|
||||
onClick={() => {
|
||||
setOpenUpdateDialog(true)
|
||||
}}
|
||||
>
|
||||
<EditIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog data-testid="update-dialog-content" fullWidth maxWidth={'lg'} open={openUpdateDialog}
|
||||
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
|
||||
<DialogTitle>{t("ExpertMangement.update_expert")}</DialogTitle>
|
||||
<UpdateContent row={row} mutate={mutate} fetchUrl={fetchUrl} setOpenUpdateDialog={setOpenUpdateDialog}/>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Update;
|
||||
@@ -0,0 +1,28 @@
|
||||
import {Box} from "@mui/material";
|
||||
import Update from "./Form/UpdateForm"
|
||||
import Delete from "./Form/DeleteForm";
|
||||
import ChangePassword from "./Form/ChangePassword";
|
||||
|
||||
const TableRowActions = ({row, mutate, fetchUrl}) => {
|
||||
return (
|
||||
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
|
||||
<Update
|
||||
row={row}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
{/*<ChangePassword*/}
|
||||
{/* rowId={row.getValue("id")}*/}
|
||||
{/* mutate={mutate}*/}
|
||||
{/* fetchUrl={fetchUrl}*/}
|
||||
{/*/>*/}
|
||||
<Delete
|
||||
rowId={row.getValue("id")}
|
||||
mutate={mutate}
|
||||
fetchUrl={fetchUrl}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableRowActions;
|
||||
14
src/components/dashboard/expert-management/TableToolbar.jsx
Normal file
14
src/components/dashboard/expert-management/TableToolbar.jsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import Create from "./Form/CreateForm";
|
||||
import {Box} from "@mui/material";
|
||||
|
||||
function TableToolbar({mutate, fetchUrl}) {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Box>
|
||||
<Create mutate={mutate} fetchUrl={fetchUrl}/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableToolbar;
|
||||
12
src/components/dashboard/expert-management/index.jsx
Normal file
12
src/components/dashboard/expert-management/index.jsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import DashboardLayouts from "@/layouts/DashboardLayout";
|
||||
import ExpertManagementDataTable from "@/components/dashboard/expert-management/DataTable";
|
||||
|
||||
function DashboardExpertManagementComponent() {
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<ExpertManagementDataTable/>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardExpertManagementComponent;
|
||||
@@ -8,6 +8,14 @@ export const GET_USER_TOKEN = BASE_URL + "/api/auth/login";
|
||||
export const UPDATE_AVATAR = BASE_URL + "";
|
||||
//end edit profile
|
||||
|
||||
// role list
|
||||
export const GET_ROLE_LIST = BASE_URL + "/api/roles/list";
|
||||
// role list
|
||||
|
||||
// province list
|
||||
export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
|
||||
// province list
|
||||
|
||||
//change password
|
||||
export const SET_USER_PASSWORD = BASE_URL + "/api/profile/change_password";
|
||||
//end change password
|
||||
@@ -34,3 +42,7 @@ export const DELETE_ROLE_MANAGEMENT =
|
||||
export const GET_PERMISSIONS_LIST =
|
||||
BASE_URL + "/api/permissions/list"
|
||||
//role management
|
||||
|
||||
//expert management
|
||||
export const EXPERT_MANAGEMENT = BASE_URL + "/api/users";
|
||||
//expert management
|
||||
@@ -1,5 +1,6 @@
|
||||
import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
|
||||
import AccessibilityIcon from '@mui/icons-material/Accessibility';
|
||||
import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
|
||||
|
||||
const sidebarMenu = [
|
||||
[
|
||||
@@ -11,6 +12,15 @@ const sidebarMenu = [
|
||||
selected: false,
|
||||
permission: "all",
|
||||
},
|
||||
{
|
||||
key: "sidebar.expert-management",
|
||||
type: "page",
|
||||
name: "expert_management",
|
||||
route: "/dashboard/expert-management",
|
||||
icon: <ManageAccountsIcon/>,
|
||||
selected: false,
|
||||
permission: "all",
|
||||
},
|
||||
{
|
||||
key: "sidebar.role-management",
|
||||
name : "role_management",
|
||||
|
||||
30
src/lib/app/hooks/useProvince.jsx
Normal file
30
src/lib/app/hooks/useProvince.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import {GET_PROVINCE_LIST} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useSWR from "swr";
|
||||
|
||||
const useProvince = () => {
|
||||
const requestServer = useRequest({auth: true, notification: false})
|
||||
|
||||
//swr config
|
||||
const fetcher = (...args) => {
|
||||
return requestServer(args, 'get').then(({data}) => {
|
||||
return data.data;
|
||||
}).catch(() => {
|
||||
})
|
||||
};
|
||||
|
||||
const {data, isLoading} = useSWR(GET_PROVINCE_LIST, fetcher, {
|
||||
revalidateIfStale: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
keepPreviousData: true
|
||||
});
|
||||
|
||||
return {
|
||||
provinceList: data,
|
||||
isLoadingProvinceList: isLoading,
|
||||
errorProvinceList: !data
|
||||
}
|
||||
};
|
||||
|
||||
export default useProvince;
|
||||
30
src/lib/app/hooks/useRole.jsx
Normal file
30
src/lib/app/hooks/useRole.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import {GET_ROLE_LIST} from "@/core/data/apiRoutes";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useSWR from "swr";
|
||||
|
||||
const useRole = () => {
|
||||
const requestServer = useRequest({auth: true, notification: false})
|
||||
|
||||
//swr config
|
||||
const fetcher = (...args) => {
|
||||
return requestServer(args, 'get').then(({data}) => {
|
||||
return data.data;
|
||||
}).catch(() => {
|
||||
})
|
||||
};
|
||||
|
||||
const {data, isLoading} = useSWR(GET_ROLE_LIST, fetcher, {
|
||||
revalidateIfStale: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
keepPreviousData: true
|
||||
});
|
||||
|
||||
return {
|
||||
roleList: data,
|
||||
isLoadingRoleList: isLoading,
|
||||
errorRoleList: !data
|
||||
}
|
||||
};
|
||||
|
||||
export default useRole;
|
||||
23
src/pages/dashboard/expert-management/index.jsx
Normal file
23
src/pages/dashboard/expert-management/index.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import WithAuthMiddleware from "@/middlewares/WithAuth";
|
||||
import {parse} from "next-useragent";
|
||||
import DashboardExpertManagementComponent from "@/components/dashboard/expert-management";
|
||||
|
||||
export default function ExpertManagement() {
|
||||
return (
|
||||
<WithAuthMiddleware>
|
||||
<DashboardExpertManagementComponent/>
|
||||
</WithAuthMiddleware>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps({req, locale}) {
|
||||
const {isBot} = parse(req.headers["user-agent"]);
|
||||
return {
|
||||
props: {
|
||||
messages: (await import(`&/locales/${locale}/app.json`)).default,
|
||||
title: "Dashboard.expert_management",
|
||||
isBot,
|
||||
locale
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user