CFE-26 Merging from develop
This commit is contained in:
194
.gitlab-ci.yml
194
.gitlab-ci.yml
@@ -1,118 +1,118 @@
|
||||
image: node:latest
|
||||
|
||||
stages:
|
||||
- build
|
||||
- test
|
||||
- test:build
|
||||
- deploy
|
||||
- build
|
||||
- test
|
||||
- test:build
|
||||
- deploy
|
||||
|
||||
merge:build:
|
||||
stage: build
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: build
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
merge:test:jest:
|
||||
stage: test
|
||||
script:
|
||||
- npm run test
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: test
|
||||
script:
|
||||
- npm run test
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
merge:test:lint:
|
||||
stage: test
|
||||
script:
|
||||
- npm run lint
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: test
|
||||
script:
|
||||
- npm run lint
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
merge:test:build:
|
||||
stage: test:build
|
||||
script:
|
||||
- npm run build
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: test:build
|
||||
script:
|
||||
- npm run build
|
||||
only:
|
||||
- merge_requests
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
build:
|
||||
stage: build
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: build
|
||||
script:
|
||||
- npm install
|
||||
- cp example.env.local .env.local
|
||||
- cp example.env.local .env.test
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
test:jest:
|
||||
stage: test
|
||||
script:
|
||||
- npm run test
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: test
|
||||
script:
|
||||
- npm run test
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
test:lint:
|
||||
stage: test
|
||||
script:
|
||||
- npm run lint
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: test
|
||||
script:
|
||||
- npm run lint
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
test:build:
|
||||
stage: test:build
|
||||
script:
|
||||
- npm run build
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
stage: test:build
|
||||
script:
|
||||
- npm run build
|
||||
only:
|
||||
- develop
|
||||
- main
|
||||
artifacts:
|
||||
paths:
|
||||
- node_modules
|
||||
- .env.local
|
||||
- .env.test
|
||||
|
||||
deploy:
|
||||
stage: deploy
|
||||
script:
|
||||
- echo "Run deploy project"
|
||||
only:
|
||||
- main
|
||||
stage: deploy
|
||||
script:
|
||||
- echo "Run deploy project"
|
||||
only:
|
||||
- main
|
||||
106
mocks/handler.js
106
mocks/handler.js
@@ -1,99 +1,13 @@
|
||||
import {
|
||||
GET_PERMISSIONS_LIST,
|
||||
GET_ROLE_MANAGEMENT,
|
||||
GET_SIDEBAR_NOTIFICATION,
|
||||
GET_USER_ROUTE,
|
||||
SET_USER_PASSWORD
|
||||
} from "@/core/data/apiRoutes";
|
||||
import {rest} from "msw";
|
||||
import {userHandler} from "./handlers/user";
|
||||
import {permissionsHandler} from "./handlers/permissions";
|
||||
import {rolesHandler} from "./handlers/roles";
|
||||
import {provincesHandler} from "./handlers/provinces";
|
||||
import {expertsHandler} from "./handlers/experts";
|
||||
|
||||
export const handler = [
|
||||
rest.get(GET_USER_ROUTE, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: {
|
||||
id: 10,
|
||||
permissions: [
|
||||
"manage_users"
|
||||
],
|
||||
}
|
||||
}))
|
||||
}),
|
||||
rest.get(GET_SIDEBAR_NOTIFICATION, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: []
|
||||
}))
|
||||
}),
|
||||
rest.post(SET_USER_PASSWORD, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.status(200),
|
||||
);
|
||||
}),
|
||||
rest.get(GET_PERMISSIONS_LIST, (req, res, ctx) => {
|
||||
return res(ctx.json(
|
||||
{
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: "manage_passenger_office_navgan",
|
||||
name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "manage_province_working_group_navgan",
|
||||
name_fa: "مدیریت کارتابل کارگروه استانی"
|
||||
}
|
||||
]
|
||||
}
|
||||
))
|
||||
}),
|
||||
rest.get(GET_ROLE_MANAGEMENT, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.json(
|
||||
{
|
||||
data: [
|
||||
{
|
||||
created_at: "2023-10-01T07:20:07.000000Z",
|
||||
guard_name: "api",
|
||||
id: 1,
|
||||
name: "admin",
|
||||
name_fa: "ادمین",
|
||||
permissions: [
|
||||
{
|
||||
id: 1,
|
||||
name: "manage_users",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "manage_roles",
|
||||
},
|
||||
],
|
||||
updated_at: "2023-10-10T07:38:12.000000Z"
|
||||
},
|
||||
{
|
||||
created_at: "2023-10-01T07:20:07.000000Z",
|
||||
guard_name: "api",
|
||||
id: 2,
|
||||
name: "manager",
|
||||
name_fa: "مدیر",
|
||||
permissions: [
|
||||
{
|
||||
id: 1,
|
||||
name: "manage_users",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "manage_roles",
|
||||
},
|
||||
],
|
||||
updated_at: "2023-10-10T07:38:12.000000Z"
|
||||
}
|
||||
],
|
||||
meta: {
|
||||
totalRowCount: 2
|
||||
}
|
||||
}
|
||||
),
|
||||
);
|
||||
}),
|
||||
|
||||
...userHandler,
|
||||
...permissionsHandler,
|
||||
...rolesHandler,
|
||||
...provincesHandler,
|
||||
...expertsHandler
|
||||
]
|
||||
20
mocks/handlers/experts.js
Normal file
20
mocks/handlers/experts.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import {rest} from "msw";
|
||||
import {ADD_EXPERT, DELETE_EXPERT, UPDATE_EXPERT} from "@/core/data/apiRoutes";
|
||||
|
||||
export const expertsHandler = [
|
||||
rest.post(ADD_EXPERT, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.status(200),
|
||||
);
|
||||
}),
|
||||
rest.delete(`${DELETE_EXPERT}/:id`, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.status(200),
|
||||
);
|
||||
}),
|
||||
rest.post(`${UPDATE_EXPERT}/:id`, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.status(200),
|
||||
);
|
||||
}),
|
||||
]
|
||||
23
mocks/handlers/permissions.js
Normal file
23
mocks/handlers/permissions.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import {rest} from "msw";
|
||||
import {GET_PERMISSIONS_LIST} from "@/core/data/apiRoutes";
|
||||
|
||||
export const permissionsHandler = [
|
||||
rest.get(GET_PERMISSIONS_LIST, (req, res, ctx) => {
|
||||
return res(ctx.json(
|
||||
{
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: "manage_passenger_office_navgan",
|
||||
name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "manage_province_working_group_navgan",
|
||||
name_fa: "مدیریت کارتابل کارگروه استانی"
|
||||
}
|
||||
]
|
||||
}
|
||||
))
|
||||
})
|
||||
]
|
||||
19
mocks/handlers/provinces.js
Normal file
19
mocks/handlers/provinces.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import {rest} from "msw";
|
||||
import {GET_PROVINCE_LIST} from "@/core/data/apiRoutes";
|
||||
|
||||
export const provincesHandler = [
|
||||
rest.get(GET_PROVINCE_LIST, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: "آذربایجان شرقی"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "اردبیل"
|
||||
}
|
||||
]
|
||||
}))
|
||||
}),
|
||||
]
|
||||
70
mocks/handlers/roles.js
Normal file
70
mocks/handlers/roles.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import {rest} from "msw";
|
||||
import {GET_ROLE_LIST, GET_ROLES} from "@/core/data/apiRoutes";
|
||||
|
||||
export const rolesHandler = [
|
||||
rest.get(GET_ROLES, (req, res, ctx) => {
|
||||
return res(
|
||||
ctx.json(
|
||||
{
|
||||
data: [
|
||||
{
|
||||
created_at: "2023-10-01T07:20:07.000000Z",
|
||||
guard_name: "api",
|
||||
id: 1,
|
||||
name: "admin",
|
||||
name_fa: "ادمین",
|
||||
permissions: [
|
||||
{
|
||||
id: 1,
|
||||
name: "manage_users",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "manage_roles",
|
||||
},
|
||||
],
|
||||
updated_at: "2023-10-10T07:38:12.000000Z"
|
||||
},
|
||||
{
|
||||
created_at: "2023-10-01T07:20:07.000000Z",
|
||||
guard_name: "api",
|
||||
id: 2,
|
||||
name: "manager",
|
||||
name_fa: "مدیر",
|
||||
permissions: [
|
||||
{
|
||||
id: 1,
|
||||
name: "manage_users",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "manage_roles",
|
||||
},
|
||||
],
|
||||
updated_at: "2023-10-10T07:38:12.000000Z"
|
||||
}
|
||||
],
|
||||
meta: {
|
||||
totalRowCount: 2
|
||||
}
|
||||
}
|
||||
),
|
||||
);
|
||||
}),
|
||||
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: "مدیر"
|
||||
}
|
||||
]
|
||||
}))
|
||||
}),
|
||||
]
|
||||
25
mocks/handlers/user.js
Normal file
25
mocks/handlers/user.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import {rest} from "msw";
|
||||
import {GET_SIDEBAR_NOTIFICATION, GET_USER, SET_USER_PASSWORD} from "@/core/data/apiRoutes";
|
||||
|
||||
export const userHandler = [
|
||||
rest.get(GET_USER, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: {
|
||||
id: 10,
|
||||
permissions: [
|
||||
"manage_users"
|
||||
],
|
||||
}
|
||||
}))
|
||||
}),
|
||||
rest.get(GET_SIDEBAR_NOTIFICATION, (req, res, ctx) => {
|
||||
return res(ctx.json({
|
||||
data: []
|
||||
}))
|
||||
}),
|
||||
rest.post(SET_USER_PASSWORD, (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": "تاریخ"
|
||||
@@ -189,7 +191,64 @@
|
||||
"typography": "آیا از حدف این مورد اطمینان دارید ؟",
|
||||
"button-delete": "حذف کردن"
|
||||
},
|
||||
"CallTabDetails": {
|
||||
"error_use_answer" : "خطا در برقراری ارتباط"
|
||||
"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 {GET_EXPERTS} 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={GET_EXPERTS}
|
||||
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 {ADD_EXPERT} 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(`${ADD_EXPERT}`, '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 {DELETE_EXPERT} 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(`${DELETE_EXPERT}/${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 {UPDATE_EXPERT} 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(`${UPDATE_EXPERT}/${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;
|
||||
@@ -1,21 +1,24 @@
|
||||
import {
|
||||
Button,
|
||||
Checkbox, CircularProgress,
|
||||
Checkbox,
|
||||
CircularProgress,
|
||||
DialogActions,
|
||||
DialogContent, DialogTitle,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormHelperText,
|
||||
FormLabel,
|
||||
Grid,
|
||||
Stack,
|
||||
TextField, Typography
|
||||
TextField,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import * as Yup from "yup";
|
||||
import {useFormik} from "formik";
|
||||
import {ADD_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import {ADD_ROLE} from "@/core/data/apiRoutes";
|
||||
import usePermissions from "@/lib/app/hooks/usePermissions";
|
||||
|
||||
const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
|
||||
@@ -40,7 +43,7 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
|
||||
formData.append(`permissions[${i}]`, values.permissions[i]);
|
||||
}
|
||||
|
||||
requestServer(ADD_ROLE_MANAGEMENT, 'post', {
|
||||
requestServer(ADD_ROLE, 'post', {
|
||||
data: formData,
|
||||
}).then(() => {
|
||||
setOpenConfirmDialog(false)
|
||||
@@ -95,38 +98,40 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
|
||||
fullWidth
|
||||
>
|
||||
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
|
||||
{isLoading ?
|
||||
<Stack direction={'row'} alignItems={'center'} spacing={2} justifyContent={'center'}>
|
||||
<CircularProgress size={20}/>
|
||||
<Typography variant={'caption'}>{t("AddDialog.loading_permissions_list")}</Typography>
|
||||
</Stack>
|
||||
:(
|
||||
<Grid container spacing={2}>
|
||||
<>
|
||||
{permissions_list.map((permission) => (
|
||||
<Grid key={permission.id} item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
data-testid="PermissionList-checkbox"
|
||||
checked={formik.values.permissions.includes(permission.id)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
|
||||
} else {
|
||||
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={permission.name_fa}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
{isLoading ?
|
||||
<Stack direction={'row'} alignItems={'center'} spacing={2}
|
||||
justifyContent={'center'}>
|
||||
<CircularProgress size={20}/>
|
||||
<Typography
|
||||
variant={'caption'}>{t("AddDialog.loading_permissions_list")}</Typography>
|
||||
</Stack>
|
||||
: (
|
||||
<Grid container spacing={2}>
|
||||
<>
|
||||
{permissions_list.map((permission) => (
|
||||
<Grid key={permission.id} item xs={6}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
data-testid="PermissionList-checkbox"
|
||||
checked={formik.values.permissions.includes(permission.id)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
|
||||
} else {
|
||||
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={permission.name_fa}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
</FormControl>
|
||||
</FormLabel>
|
||||
</Stack>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Button, DialogActions, DialogContent, DialogTitle, Typography} from "@mui/material";
|
||||
import {DELETE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import {DELETE_ROLE} from "@/core/data/apiRoutes";
|
||||
import {useState} from "react";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
@@ -12,7 +12,7 @@ const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
|
||||
const {update_notification} = useNotification()
|
||||
const handleSubmit = () => {
|
||||
setIsSubmitting(true)
|
||||
requestServer(`${DELETE_ROLE_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
|
||||
requestServer(`${DELETE_ROLE}/${rowId}`, 'delete').then((response) => {
|
||||
mutate(fetchUrl)
|
||||
update_notification()
|
||||
}).catch(() => {
|
||||
@@ -20,7 +20,7 @@ const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
|
||||
setIsSubmitting(false)
|
||||
});
|
||||
}
|
||||
return(
|
||||
return (
|
||||
<>
|
||||
<DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
|
||||
<DialogContent>
|
||||
@@ -39,4 +39,4 @@ const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default DeleteContent
|
||||
export default DeleteContent
|
||||
@@ -1,18 +1,21 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox, CircularProgress, DialogActions,
|
||||
DialogContent, DialogTitle,
|
||||
Checkbox,
|
||||
CircularProgress,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormHelperText,
|
||||
FormLabel,
|
||||
Grid,
|
||||
Stack,
|
||||
TextField, Typography
|
||||
TextField,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import {UPDATE_ROLE} from "@/core/data/apiRoutes";
|
||||
import * as Yup from "yup";
|
||||
import usePermissions from "@/lib/app/hooks/usePermissions";
|
||||
import useNotification from "@/lib/app/hooks/useNotification";
|
||||
@@ -44,7 +47,7 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
|
||||
formData.append(`permissions[${i}]`, values.permissions[i]);
|
||||
}
|
||||
|
||||
requestServer(`${UPDATE_ROLE_MANAGEMENT}/${row.getValue("id")}`, 'post', {
|
||||
requestServer(`${UPDATE_ROLE}/${row.getValue("id")}`, 'post', {
|
||||
data: formData,
|
||||
}).then((response) => {
|
||||
mutate(fetchUrl)
|
||||
@@ -56,7 +59,7 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
|
||||
},
|
||||
});
|
||||
|
||||
return(
|
||||
return (
|
||||
<>
|
||||
<DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
|
||||
<DialogContent>
|
||||
@@ -96,11 +99,13 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
|
||||
>
|
||||
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
|
||||
{isLoading ?
|
||||
<Stack direction={'row'} alignItems={'center'} spacing={2} justifyContent={'center'}>
|
||||
<Stack direction={'row'} alignItems={'center'} spacing={2}
|
||||
justifyContent={'center'}>
|
||||
<CircularProgress size={20}/>
|
||||
<Typography variant={'caption'}>{t("UpdateDialog.loading_permissions_list")}</Typography>
|
||||
<Typography
|
||||
variant={'caption'}>{t("UpdateDialog.loading_permissions_list")}</Typography>
|
||||
</Stack>
|
||||
:(
|
||||
: (
|
||||
<Grid container spacing={2}>
|
||||
<>
|
||||
{permissions_list.map((permission) => (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import DataTable from "@/core/components/DataTable";
|
||||
import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
|
||||
import {GET_ROLES} from "@/core/data/apiRoutes";
|
||||
import TableRowActions from "@/components/dashboard/role-management/TableRowActions";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
@@ -65,10 +65,10 @@ const RoleManagementComponent = () => {
|
||||
datatype: "numeric",
|
||||
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
|
||||
}], []);
|
||||
return(
|
||||
return (
|
||||
<Box sx={{px: 3}}>
|
||||
<DataTable
|
||||
tableUrl={GET_ROLE_MANAGEMENT}
|
||||
tableUrl={GET_ROLES}
|
||||
columns={columns}
|
||||
selectableRow={false}
|
||||
enableCustomToolbar={true}
|
||||
|
||||
@@ -3,7 +3,7 @@ import FirstComponent from "@/components/first";
|
||||
import MockAppWithProviders from "../../../../mocks/AppWithProvider";
|
||||
import {server} from "../../../../mocks/server";
|
||||
import {rest} from "msw";
|
||||
import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
|
||||
import {GET_USER} from "@/core/data/apiRoutes";
|
||||
|
||||
describe("First Component From First Page", () => {
|
||||
describe("Rendering", () => {
|
||||
@@ -46,7 +46,7 @@ describe("First Component From First Page", () => {
|
||||
});
|
||||
it("Show Login Button And Do Not Show Dashboard Button When User Authentication Is Expired", async () => {
|
||||
localStorage.setItem("_token", 'token');
|
||||
server.use([rest.get(GET_USER_ROUTE, (req, res, ctx) => {
|
||||
server.use([rest.get(GET_USER, (req, res, ctx) => {
|
||||
return res(ctx.status(403))
|
||||
})])
|
||||
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
|
||||
|
||||
@@ -8,34 +8,43 @@ 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
|
||||
|
||||
//user data
|
||||
export const GET_USER_ROUTE = BASE_URL + "/api/profile/info";
|
||||
export const GET_USER = BASE_URL + "/api/profile/info";
|
||||
//user data
|
||||
|
||||
//sidebar notification
|
||||
export const GET_SIDEBAR_NOTIFICATION = BASE_URL + "/dashboard/notification"
|
||||
//sidebar notification
|
||||
|
||||
|
||||
// role management
|
||||
export const GET_ROLE_MANAGEMENT =
|
||||
export const GET_ROLES =
|
||||
BASE_URL + "/api/roles"
|
||||
export const ADD_ROLE_MANAGEMENT =
|
||||
export const ADD_ROLE =
|
||||
BASE_URL + "/api/roles"
|
||||
export const UPDATE_ROLE_MANAGEMENT =
|
||||
export const UPDATE_ROLE =
|
||||
BASE_URL + "/api/roles"
|
||||
export const DELETE_ROLE_MANAGEMENT =
|
||||
export const DELETE_ROLE =
|
||||
BASE_URL + "/api/roles"
|
||||
|
||||
export const GET_PERMISSIONS_LIST =
|
||||
BASE_URL + "/api/permissions/list"
|
||||
//role management
|
||||
|
||||
//tabs details
|
||||
export const GET_TAB_DETAILS =
|
||||
BASE_URL + "/details"
|
||||
//tabs details
|
||||
//expert management
|
||||
export const GET_EXPERTS = BASE_URL + "/api/users";
|
||||
export const ADD_EXPERT = BASE_URL + "/api/users";
|
||||
export const UPDATE_EXPERT = BASE_URL + "/api/users";
|
||||
export const DELETE_EXPERT = 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",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
|
||||
import {GET_USER} from "@/core/data/apiRoutes";
|
||||
import axios from "axios";
|
||||
import {createContext, useCallback, useEffect, useReducer} from "react";
|
||||
import {errorRequest, errorResponse, errorSetting} from "@/core/utils/errorHandler";
|
||||
@@ -71,7 +71,7 @@ export const UserProvider = ({children}) => {
|
||||
(callback = () => {
|
||||
}) => {
|
||||
axios
|
||||
.get(GET_USER_ROUTE, {
|
||||
.get(GET_USER, {
|
||||
headers: {authorization: `Bearer ${state.token}`},
|
||||
})
|
||||
.then(({data}) => {
|
||||
|
||||
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