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

Feature/migration

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2025-05-05 09:57:50 +00:00
parent 18af64b3f6
commit 9bcddb6610
381 changed files with 9465 additions and 12983 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/Login/Form/index.jsx Normal file
View File

@@ -0,0 +1,128 @@
"use client";
import LtrTextField from "@/core/components/LtrTextField";
import StyledForm from "@/core/components/StyledForm";
import { GET_USER_LOGIN_ROUTE } from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Button, Container, Stack, Typography } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import { object, string } from "yup";
const LoginForm = () => {
const requestServer = useRequest();
const { getUser } = useAuth();
const defaultValues = {
username: "",
password: "",
};
const validationSchema = object({
username: string().required("لطفا نام کاربری را وارد کنید!"),
password: string().required("لطفا رمز عبور را وارد کنید!"),
});
const {
control,
handleSubmit,
formState: { isSubmitting },
} = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
const onSubmit = async (data) => {
try {
const formData = new FormData();
formData.append("username", data.username);
formData.append("password", data.password);
await requestServer(GET_USER_LOGIN_ROUTE, "post", {
data: formData,
});
getUser();
} catch (error) {
console.error("Login error:", error);
}
};
return (
<Container maxWidth="xs" sx={{ flex: 1 }}>
<StyledForm
onSubmit={handleSubmit(onSubmit)}
style={{ width: "100%", height: "100%" }}
>
<Stack
sx={{ width: "100%", height: "100%" }}
justifyContent="center"
alignItems="center"
spacing={6}
>
<Stack
sx={{ width: "100%", mb: 2 }}
justifyContent="center"
alignItems="center"
>
<Typography
variant="h4"
color="primary"
fontWeight={600}
textAlign="center"
>
ورود به سامانه CRM
</Typography>
</Stack>
<Stack sx={{ width: "100%", p: 2 }} spacing={4}>
<Stack spacing={2}>
<Controller
control={control}
render={({ field, fieldState: { error } }) => {
return (
<LtrTextField
{...field}
label="نام کاربری"
variant="outlined"
fullWidth
error={!!error}
helperText={!!error && error.message}
/>
);
}}
name={"username"}
/>
<Controller
control={control}
render={({ field, fieldState: { error } }) => {
return (
<LtrTextField
{...field}
label="رمزعبور"
variant="outlined"
type="password"
fullWidth
error={!!error}
helperText={!!error && error.message}
/>
);
}}
name={"password"}
/>
</Stack>
<Stack>
<Button
variant="contained"
color="primary"
size="large"
type={"submit"}
disabled={isSubmitting}
>
{isSubmitting ? "درحال ورود..." : "ورود"}
</Button>
</Stack>
</Stack>
</Stack>
</StyledForm>
</Container>
);
};
export default LoginForm;

25
src/components/Login/LoginLinkRouting.jsx Normal file
View File

@@ -0,0 +1,25 @@
"use client";
import { Button, Stack } from "@mui/material";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
const LoginLinkRouting = () => {
const searchParams = useSearchParams();
const redirect = searchParams.get("redirect");
return (
<Stack direction="row" alignItems="center" justifyContent="center">
<Button
component={Link}
data-testid="link_routing"
sx={{ margin: 2 }}
color="secondary"
href={redirect ? decodeURIComponent(redirect) : "/"}
>
{`بازگشت به ${redirect ? "صفحه قبلی" : "صفحه اصلی"}`}
</Button>
</Stack>
);
};
export default LoginLinkRouting;

19
src/components/Login/index.jsx Normal file
View File

@@ -0,0 +1,19 @@
"use client";
import { Fade, Stack } from "@mui/material";
import LoginForm from "./Form";
import LoginLinkRouting from "./LoginLinkRouting";
import { Suspense } from "react";
const LoginPage = () => {
return (
<Suspense>
<Fade in={true}>
<Stack sx={{ width: "100%", height: "100vh" }}>
<LoginForm />
<LoginLinkRouting />
</Stack>
</Fade>
</Suspense>
);
};
export default LoginPage;

305
src/components/dashboard/change-password/change-password-form/__test__/index.test.js
View File

@@ -1,305 +0,0 @@
import { render, screen, waitFor, fireEvent , act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
import {server} from "../../../../../../mocks/server";
import {rest} from "msw";
describe('Change Password Form Component From Change Password Page', () => {
describe('Rendering', () => {
it('Should see change password heading',() => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const changePasswordElement = screen.getByRole('heading', { level: 4 });
expect(changePasswordElement).toHaveTextContent('تغییر رمز عبور');
});
it('Should see the label for current password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordLabel = screen.queryByLabelText('رمز عبور فعلی');
expect(currentPasswordLabel).toBeInTheDocument();
});
it('Should see the label for new password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordLabel = screen.queryByLabelText('رمز عبور جدید');
expect(newPasswordLabel).toBeInTheDocument();
});
it('Should see the label for confirm password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const confirmPasswordLabel = screen.queryByLabelText('تکرار رمز عبور جدید');
expect(confirmPasswordLabel).toBeInTheDocument();
});
it('Should see the submit button with the submit label and should be disable', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const submitButton = screen.getByRole('button', { name: 'ثبت' });
expect(submitButton).toBeInTheDocument();
expect(submitButton).toBeDisabled();
});
it('Should have empty input fields and not see any validation error for current password, new password, and confirm password', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
expect(currentPasswordInput).toHaveValue('');
expect(newPasswordInput).toHaveValue('');
expect(confirmPasswordInput).toHaveValue('');
expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).not.toBeInTheDocument();
expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
expect(screen.queryByText("وارد کردن تکرار رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
});
});
describe("Behavior", ()=>{
it('Should fill the current password field and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
// Simulate typing something in the current password input
fireEvent.change(currentPasswordInput, { target: { value: 'witel@fani0' } });
await waitFor(() => {
expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).not.toBeInTheDocument();
expect(currentPasswordInput).toHaveValue('witel@fani0');
});
});
it('Should fill the new password field and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
// Simulate typing something in the new password input
fireEvent.change(newPasswordInput, { target: { value: 'witel@fani1' } });
await waitFor(() => {
expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
expect(newPasswordInput).toHaveValue('witel@fani1');
});
});
it('Should fill the confirm new password field and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
// Simulate typing something in the confirmation new password input
fireEvent.change(confirmPasswordInput, { target: { value: 'witel@fani1' } });
await waitFor(() => {
expect(screen.queryByText("وارد کردن تکرار رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
expect(confirmPasswordInput).toHaveValue('witel@fani1');
});
});
});
describe("Validation", ()=>{
it('Should see error while current password is empty on blur event', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the current password input
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
// Clear the input field
fireEvent.change(currentPasswordInput, { target: { value: '' } });
fireEvent.blur(currentPasswordInput);
await waitFor(()=>{
expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).toBeInTheDocument()
});
});
it('Should see error while new password is empty on blur event', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the new password input
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
// Clear the input field
fireEvent.change(newPasswordInput, { target: { value: '' } });
fireEvent.blur(newPasswordInput);
await waitFor(()=>{
expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).toBeInTheDocument()
});
});
it('Should see error while confirm new password is empty on blur event', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the new password input
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
// Clear the input field
fireEvent.change(confirmPasswordInput, { target: { value: '' } });
fireEvent.blur(confirmPasswordInput);
await waitFor(()=>{
expect(screen.queryByText("وارد کردن تکرار رمز عبور جدید الزامیست!")).toBeInTheDocument()
});
});
it('Should see error when new password is less than 8 characters', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a short new password
fireEvent.change(newPasswordInput, { target: { value: 'test' } });
fireEvent.blur(newPasswordInput);
await waitFor(() => {
expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
});
});
it('Should not see error when new password are 8 or more characters', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password
fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
fireEvent.blur(newPasswordInput);
await waitFor(() => {
expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).not.toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).not.toBeInTheDocument();
});
});
it('Should see error when new password and confirm password do not match on blur event and submit click', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password
fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
fireEvent.blur(newPasswordInput);
// Simulate entering a different value in the confirm password field
fireEvent.change(confirmPasswordInput, { target: { value: 'MismatchedPassword' } });
fireEvent.blur(confirmPasswordInput);
await waitFor(() => {
expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
});
});
it('Should not see error when new password and confirm password match on blur event and submit click', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password
fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
fireEvent.blur(newPasswordInput);
// Simulate entering the same value in the confirmation password field
fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
fireEvent.blur(confirmPasswordInput);
await waitFor(() => {
expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).not.toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).not.toBeInTheDocument();
});
});
});
describe("Form Submission", () => {
it('Should enable the submit button when the inputs are valid', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering valid values in the form fields
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } });
fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
// Check if the submit button is enabled
await waitFor(() => {
expect(submitButton).not.toBeDisabled();
});
});
it('Should request to api and resetform in success response', async () => {
// Render the component
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Fill in the form fields
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } });
fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
// Submit the form
const submitButton = screen.getByRole('button', { name: 'ثبت' });
await userEvent.click(submitButton);
await waitFor(() => {
expect(currentPasswordInput).toHaveValue('');
expect(newPasswordInput).toHaveValue('');
expect(confirmPasswordInput).toHaveValue('');
});
});
it('Should request to api and not resetform in error response', async () => {
// Render the component
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
server.use([rest.get(SET_USER_PASSWORD, (req, res, ctx) => {
return res(ctx.status(422))
})])
// Fill in the form fields wrong
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
fireEvent.change(currentPasswordInput, { target: { value: 'incorrect' } });
fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
// Submit the form
const submitButton = screen.getByRole('button', { name: 'ثبت' });
await userEvent.click(submitButton);
await waitFor(() => {
expect(currentPasswordInput.value).toBe('incorrect');
expect(newPasswordInput.value).toBe('Witel@fani1');
expect(confirmPasswordInput.value).toBe('Witel@fani1');
});
});
});
})

137
src/components/dashboard/change-password/change-password-form/index.js
View File

@@ -1,137 +0,0 @@
import {Formik, Form} from "formik";
import * as Yup from "yup";
import {useTranslations} from "next-intl";
import {Button, Paper, Stack, Typography} from "@mui/material";
import PasswordField from "@/core/components/PasswordField";
import StyledForm from "@/core/components/StyledForm";
import useRequest from "@/lib/app/hooks/useRequest";
import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
const ChangePasswordForm = ({onSubmit}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const handleSubmit = (values, {setSubmitting, resetForm}) => {
requestServer(SET_USER_PASSWORD, 'post', {
data: {
current_password: values.current_password,
new_password: values.new_password,
new_password_confirmation: values.new_password_confirmation,
},
}).then((response) => {
resetForm();
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
};
const initialValues = {
current_password: "",
new_password: "",
new_password_confirmation: "",
};
const validationSchema = Yup.object().shape({
current_password: Yup.string().required(
t("ChangePassword.error_message_current_password_required")
),
new_password: Yup.string()
.min(8, t("ChangePassword.error_message_password_length"))
.required(t("ChangePassword.error_message_new_password_required")),
new_password_confirmation: Yup.string()
.required(t("ChangePassword.error_message_confirm_password_required"))
.test(
t("ChangePassword.error_message_password_match"),
t("ChangePassword.error_message_password_not_match"), // Use the correct error message here
function (value) {
return this.parent.new_password === value;
}
),
});
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{p: 5}} component="div">
<Typography margin={2} variant="h4" textAlign="center">
{t("ChangePassword.typography_change_password")}
</Typography>
<Stack spacing={1} component="div">
<PasswordField
name="current_password"
label={t("ChangePassword.label_current_password")}
error={
props.touched.current_password &&
props.errors.current_password
? true
: false
}
helperText={
props.touched.current_password
? props.errors.current_password
: null
}
/>
</Stack>
<Stack spacing={1} component="div">
<PasswordField
name="new_password"
label={t("ChangePassword.label_new_password")}
error={
props.touched.new_password && props.errors.new_password
? true
: false
}
helperText={
props.touched.new_password ? props.errors.new_password : null
}
/>
</Stack>
<Stack spacing={1} component="div">
<PasswordField
name="new_password_confirmation"
label={t("ChangePassword.label_confirm_password")}
error={
props.touched.new_password_confirmation &&
props.errors.new_password_confirmation
? true
: false
}
helperText={
props.touched.new_password_confirmation
? props.errors.new_password_confirmation
: null
}
/>
</Stack>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
size="large"
disabled={props.isSubmitting || !(props.values.current_password && props.values.new_password && props.values.new_password_confirmation)}
>
{props.isSubmitting
? t("SubmitButton.button_while_submit")
: t("SubmitButton.button_submit")}
</Button>
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
);
};
export default ChangePasswordForm;

15
src/components/dashboard/change-password/index.jsx
View File

@@ -1,15 +0,0 @@
import CenterLayout from "@/layouts/CenterLayout";
import {Container} from "@mui/material";
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
const DashboardChangePasswordComponent = () => {
return (
<CenterLayout>
<Container maxWidth="sm">
<ChangePasswordForm/>
</Container>
</CenterLayout>
);
};
export default DashboardChangePasswordComponent;

195
src/components/dashboard/edit-profile/index.jsx
View File

@@ -1,195 +0,0 @@
import StyledForm from "@/core/components/StyledForm";
import CenterLayout from "@/layouts/CenterLayout";
import useUser from "@/lib/app/hooks/useUser";
import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
import * as Yup from "yup";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import AvatarUpload from "@/core/components/AvatarUpload";
import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import ImageResizer from "@/core/components/ImageConvertor";
import useRequest from "@/lib/app/hooks/useRequest";
const DashboardEditProfile = () => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {user, token, getUser, changeUser} = useUser();
const {directionApp} = useDirection();
const editAvatar = async (avatar) => {
try {
const formData = new FormData();
if (avatar != null) {
var resizedAvatar;
resizedAvatar = await ImageResizer(avatar);
formData.append("avatar", resizedAvatar);
}
await requestServer(UPDATE_AVATAR, 'post', {formData}).then((response) => {
})
.catch(() => {
}).finally(() => {
});
} catch (error) {
throw error;
}
};
const handleSubmit = (values, {setSubmitting}) => {
};
const initialValues = {
expert_avatar: null,
username: user.username,
name: user.name,
email: user.email,
province_name: user.province_name,
position: user.position,
};
const validationSchema = Yup.object().shape({});
return (
<CenterLayout>
<Container maxWidth="sm">
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{p: 5}} component="div">
<Typography margin={2} variant="h4" textAlign="center">
{t("UpdateProfile.typography_edit_profile")}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<AvatarUpload
user={user}
setFieldValue={props.setFieldValue}
valueAvatar="expert_avatar"
changeFlag="change_avatar"
/>
</Box>
<Grid container spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="username"
label={t("UpdateProfile.text_field_username")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.username && props.errors.username)}
helperText={
props.touched.username
? props.errors.username
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="name"
label={t("UpdateProfile.text_field_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.name && props.errors.name)}
helperText={
props.touched.name ? props.errors.name : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="email"
label={t("UpdateProfile.text_field_email")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.email && props.errors.email)}
helperText={
props.touched.email ? props.errors.email : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="province_name"
label={t("UpdateProfile.text_field_province_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.province_name && props.errors.province_name)}
helperText={
props.touched.province_name
? props.errors.province_name
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="position"
label={t("UpdateProfile.text_field_position")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.position && props.errors.position)}
helperText={
props.touched.position
? props.errors.position
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
</Grid>
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
</Container>
</CenterLayout>
);
};
export default DashboardEditProfile;

35
src/components/dashboard/expert-management/DataTable/__tests__/index.test.js
View File

@@ -1,35 +0,0 @@
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 telephone_idHeader = 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(telephone_idHeader).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();
});
});
});

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

@@ -1,202 +0,0 @@
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: "full_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.telephone_id,
id: "telephone_id",
header: t("ExpertMangement.telephone_id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
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_id",
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,
enableSorting: 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;

7
src/components/dashboard/expert-management/Form/ChangePassword/index.jsx
View File

@@ -1,7 +0,0 @@
const ChangePassword = () => {
return (
<></>
)
}
export default ChangePassword

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

@@ -1,219 +0,0 @@
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')
});
});
})
});

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

@@ -1,128 +0,0 @@
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

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

@@ -1,96 +0,0 @@
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')
});
});
})
});

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

@@ -1,74 +0,0 @@
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

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

@@ -1,71 +0,0 @@
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')
});
});
})
});

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

@@ -1,61 +0,0 @@
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

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

@@ -1,12 +0,0 @@
import Province from "./Province";
import PositionAndRole from "./PositionAndRole";
const RestInfo = ({formik}) => {
return (
<>
<Province formik={formik}/>
<PositionAndRole formik={formik}/>
</>
)
}
export default RestInfo

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

@@ -1,123 +0,0 @@
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()
});
});
})
});

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

@@ -1,61 +0,0 @@
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

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

@@ -1,67 +0,0 @@
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();
});
});
})
});

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

@@ -1,116 +0,0 @@
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}) => {
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()
}).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

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

@@ -1,131 +0,0 @@
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');
});
});
})
});

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

@@ -1,39 +0,0 @@
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}) => {
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}/>
</Dialog>
</>
)
}
export default Create

66
src/components/dashboard/expert-management/Form/DeleteForm/__tests__/index.test.js
View File

@@ -1,66 +0,0 @@
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();
});
});
});
});

74
src/components/dashboard/expert-management/Form/DeleteForm/index.jsx
View File

@@ -1,74 +0,0 @@
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, 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()
})
.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;

219
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/PersonalInfo/__tests__/index.test.js
View File

@@ -1,219 +0,0 @@
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')
});
});
})
});

128
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/PersonalInfo/index.jsx
View File

@@ -1,128 +0,0 @@
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

96
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/PositionAndRole/__tests__/index.test.js
View File

@@ -1,96 +0,0 @@
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')
});
});
})
});

75
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/PositionAndRole/index.jsx
View File

@@ -1,75 +0,0 @@
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

71
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/Province/__tests__/index.test.js
View File

@@ -1,71 +0,0 @@
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')
});
});
})
});

61
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/Province/index.jsx
View File

@@ -1,61 +0,0 @@
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

13
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/index.jsx
View File

@@ -1,13 +0,0 @@
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

62
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/UserInfo/__tests__/index.test.js
View File

@@ -1,62 +0,0 @@
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()
});
});
})
});

29
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/UserInfo/index.jsx
View File

@@ -1,29 +0,0 @@
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

87
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/__tests__/index.test.js
View File

@@ -1,87 +0,0 @@
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();
});
});
})
});

108
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/index.jsx
View File

@@ -1,108 +0,0 @@
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, 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()
}).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

147
src/components/dashboard/expert-management/Form/UpdateForm/__tests__/index.test.js
View File

@@ -1,147 +0,0 @@
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');
});
});
})
});

33
src/components/dashboard/expert-management/Form/UpdateForm/index.jsx
View File

@@ -1,33 +0,0 @@
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, 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} setOpenUpdateDialog={setOpenUpdateDialog}/>
</Dialog>
</>
);
};
export default Update;

24
src/components/dashboard/expert-management/TableRowActions.jsx
View File

@@ -1,24 +0,0 @@
import {Box} from "@mui/material";
import Update from "./Form/UpdateForm"
import Delete from "./Form/DeleteForm";
const TableRowActions = ({row, mutate}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Update
row={row}
mutate={mutate}
/>
{/*<ChangePassword*/}
{/* rowId={row.getValue("id")}*/}
{/* mutate={mutate}*/}
{/*/>*/}
<Delete
rowId={row.getValue("id")}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;

14
src/components/dashboard/expert-management/TableToolbar.jsx
View File

@@ -1,14 +0,0 @@
import {useTranslations} from "next-intl";
import Create from "./Form/CreateForm";
import {Box} from "@mui/material";
function TableToolbar({mutate}) {
const t = useTranslations();
return (
<Box>
<Create mutate={mutate}/>
</Box>
);
}
export default TableToolbar;

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

@@ -1,9 +0,0 @@
import ExpertManagementDataTable from "@/components/dashboard/expert-management/DataTable";
function DashboardExpertManagementComponent() {
return (
<ExpertManagementDataTable/>
);
}
export default DashboardExpertManagementComponent;

5
src/components/dashboard/first/index.jsx
View File

@@ -1,5 +0,0 @@
const DashboardFirstComponent = () => {
return <></>;
};
export default DashboardFirstComponent;

153
src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
View File

@@ -1,153 +0,0 @@
import {
Button,
Checkbox,
CircularProgress,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
FormControlLabel,
FormHelperText,
FormLabel,
Grid,
Stack,
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} from "@/core/data/apiRoutes";
import usePermissions from "@/lib/app/hooks/usePermissions";
const CreateContent = ({mutate, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {permissions_list, isLoading} = usePermissions()
const validationSchema = Yup.object().shape({
name_en: Yup.string().required(t("AddDialog.name_en_error")),
name_fa: Yup.string().required(t("AddDialog.name_fa_error")),
permissions: Yup.array().min(1, t("AddDialog.permission_min_error")).required(t("AddDialog.permission")),
});
const formik = useFormik({
initialValues: {
name_en: "",
name_fa: "",
permissions: [],
}, validationSchema, onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("name", values.name_en);
formData.append("name_fa", values.name_fa);
for (let i = 0; i < values.permissions.length; i++) {
formData.append(`permissions[${i}]`, values.permissions[i]);
}
requestServer(ADD_ROLE, 'post', {
data: formData,
}).then(() => {
setOpenConfirmDialog(false)
mutate()
update_notification()
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
return (
<>
<DialogTitle>{t("AddDialog.add")}</DialogTitle>
<DialogContent>
<Stack sx={{mt: 2}} spacing={2}>
<Stack direction="row" spacing={2}>
<TextField
name="name_en"
label={t("AddDialog.name_en")}
type="text"
value={formik.values.name}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name_en")}
error={formik.touched.name_en && Boolean(formik.errors.name_en)}
helperText={formik.touched.name_en && formik.errors.name_en}
/>
<TextField
name="name_fa"
label={t("AddDialog.name_fa")}
value={formik.values.name_fa}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name_fa")}
error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
helperText={formik.touched.name_fa && formik.errors.name_fa}
/>
</Stack>
<Stack>
<FormLabel>{t("AddDialog.permission")}<br/>
<FormControl
name="permissions"
error={formik.touched.permissions && Boolean(formik.errors.permissions)}
onBlur={formik.handleBlur("permissions")}
sx={{mt: 2}}
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, index) => (
<Grid key={permission.id} item xs={6} data-testid= "PermissionList-checkbox">
<FormControlLabel
control={
<Checkbox
data-testid= {`PermissionList-checkbox-${index}`}
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>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("AddDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
{t("AddDialog.button-add")}
</Button>
</DialogActions>
</>
)
}
export default CreateContent

177
src/components/dashboard/role-management/Form/CreateForm/__test__/CreateContent.test.js
View File

@@ -1,177 +0,0 @@
import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import CreateContent from "@/components/dashboard/role-management/Form/CreateForm/CreateContent";
describe("Create Content component from Create Form Component in Role Management Component",()=>{
describe("Rendering", ()=>{
it('should see AddDialog text in the top ', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const textElement = screen.queryByText("افزودن")
await waitFor(()=>{
expect(textElement).toBeInTheDocument()
})
});
it('should see name_en text', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام انگلیسی")
await waitFor(()=>{
expect(textElement).toBeInTheDocument()
})
});
it('should see name_fa text', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام فارسی")
await waitFor(()=>{
expect(textElement).toBeInTheDocument()
})
});
it('should see name_fa text', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام فارسی")
await waitFor(()=>{
expect(textElement).toBeInTheDocument()
})
});
})
describe("Behavior",()=>{
it('should see what fill in the name_en input', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
await act(()=>{
// Simulate user input
expect(nameEnglishInput).toHaveValue('testuser');
})
});
it('should see what fill in the name_fa input', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const nameFarsiInput = screen.getByLabelText('نام فارسی');
fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
await act(()=>{
// Simulate user input
expect(nameFarsiInput).toHaveValue('testuser');
})
});
it('should return permissions_list', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
expect(checkboxElement).toHaveLength(2)
});
it('should get checked if permission list item get clicked', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
await waitFor(()=>{
expect(checkboxElement).not.toBeChecked();
})
fireEvent.click(checkboxElement);
await waitFor(()=>{
expect(checkboxElement).toBeChecked();
})
});
})
describe("Validation",()=>{
it('should see error text when name_fa input is empty', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const name_faInput = screen.getByLabelText("نام فارسی")
expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
fireEvent.blur(name_faInput);
await waitFor(()=>{
expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
})
fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
await waitFor(()=>{
expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
})
})
it('should see error text when name_en input is empty', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const name_enInput = screen.getByLabelText("نام انگلیسی")
expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
fireEvent.blur(name_enInput);
await waitFor(()=>{
expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
})
fireEvent.change(name_enInput, {target : {value : "english name"}})
await waitFor(()=>{
expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
})
})
it('should submit button be disabled', () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const submitButtonElement = screen.queryByText("ثبت")
expect(submitButtonElement).toBeDisabled()
});
it('should submit button be able if inputs get filled', async () => {
render(
<MockAppWithProviders>
<CreateContent/>
</MockAppWithProviders>
)
const submitButtonElement = screen.queryByText("ثبت")
expect(submitButtonElement).toBeDisabled()
const nameElement = screen.getByLabelText("نام انگلیسی")
const name_faElement = screen.getByLabelText("نام فارسی")
const roleElement = await screen.findByTestId("PermissionList-checkbox-0");
fireEvent.change(nameElement, { target: { value: 'amin' } })
fireEvent.change(name_faElement, { target: { value: 'امین' } })
fireEvent.click(roleElement)
await waitFor(()=>{
expect(submitButtonElement).not.toBeDisabled()
})
});
})
})

34
src/components/dashboard/role-management/Form/CreateForm/__test__/index.test.js
View File

@@ -1,34 +0,0 @@
import {fireEvent, queryByText, render, screen, waitFor} from "@testing-library/react";
import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
describe("Create Form Component from Role Management Component",()=>{
describe("Rendering",()=>{
it('should see Dialog text', async () => {
render(
<MockAppWithProviders>
<CreateForm />
</MockAppWithProviders>
)
const textElement = screen.queryByText("افزودن")
await waitFor(()=>{
expect(textElement).toBeInTheDocument()
})
});
it('should see Tooltip text when mouse over', async () => {
render(
<MockAppWithProviders>
<CreateForm />
</MockAppWithProviders>
)
const buttonElement = screen.getByText("افزودن");
fireEvent.mouseOver(buttonElement);
const tooltipTextElement = screen.getByText("افزودن");
await waitFor(()=>{
expect(tooltipTextElement).toBeInTheDocument()
})
});
})
})

34
src/components/dashboard/role-management/Form/CreateForm/index.jsx
View File

@@ -1,34 +0,0 @@
import {Button, Dialog, Stack, Tooltip} from "@mui/material";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {useTranslations} from "next-intl";
import {useState} from "react";
import CreateContent from "./CreateContent";
const CreateForm = ({mutate}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("AddDialog.add")} arrow placement="right">
<Button
color="primary"
variant="contained"
size="small"
sx={{textTransform: "unset", alignSelf: "center"}}
startIcon={<DataSaverOnIcon/>}
onClick={() => {
setOpenConfirmDialog(true)
}}
>
{t("AddDialog.add")}
</Button>
</Tooltip>
<Dialog maxWidth={"lg"} open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<CreateContent mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</Stack>
)
}
export default CreateForm

42
src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx
View File

@@ -1,42 +0,0 @@
import {Button, DialogActions, DialogContent, DialogTitle, Typography} from "@mui/material";
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";
import {useTranslations} from "next-intl";
const DeleteContent = ({rowId, mutate, setOpenConfirmDialog}) => {
const t = useTranslations();
const [isSubmitting, setIsSubmitting] = useState(false)
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const handleSubmit = () => {
setIsSubmitting(true)
requestServer(`${DELETE_ROLE}/${rowId}`, 'delete').then((response) => {
mutate()
update_notification()
}).catch(() => {
}).finally(() => {
setIsSubmitting(false)
});
}
return (
<>
<DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
<DialogContent>
<Typography>{t("DeleteDialog.typography")}</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={isSubmitting} autoFocus>
{t("DeleteDialog.button-cancel")}
</Button>
<Button onClick={handleSubmit} variant="contained" color="primary"
disabled={isSubmitting}>
{t("DeleteDialog.button-delete")}
</Button>
</DialogActions>
</>
)
}
export default DeleteContent

53
src/components/dashboard/role-management/Form/DeleteForm/__test__/DeleteContent.test.js
View File

@@ -1,53 +0,0 @@
import {act, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
describe("Create Content component from Create Form Component in Role Management Component", () => {
describe("Rendering", () => {
it('should see DeleteDialog text in the top ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const textElement = screen.queryByText("حذف")
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
})
it('should see DeleteDialog text content ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const textElement = screen.queryByText("آیا از حدف این مورد اطمینان دارید ؟")
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
})
it('should see delete text in the delete button ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const buttonElement = screen.queryByText("حذف کردن")
await waitFor(() => {
expect(buttonElement).toBeInTheDocument()
})
});
it('should see cancel text in the cancel button ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const buttonElement = screen.queryByText("انصراف")
await waitFor(() => {
expect(buttonElement).toBeInTheDocument()
})
});
})
})

21
src/components/dashboard/role-management/Form/DeleteForm/__test__/index.test.js
View File

@@ -1,21 +0,0 @@
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
describe("Create Form Component from Role Management Component",()=> {
describe("Rendering", () => {
it('should see Dialog text when mouse is over', async () => {
render(
<MockAppWithProviders>
<DeleteForm />
</MockAppWithProviders>
)
const textElement = screen.getByTestId("dialog_tooltip")
fireEvent.mouseOver(textElement)
await waitFor(()=>{
expect(screen.getByText("حذف")).toBeInTheDocument();
})
});
})
})

32
src/components/dashboard/role-management/Form/DeleteForm/index.jsx
View File

@@ -1,32 +0,0 @@
import {useTranslations} from "next-intl";
import {useState} from "react";
import {Dialog, IconButton, Tooltip} from "@mui/material";
import DeleteIcon from '@mui/icons-material/Delete';
import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
const DeleteForm = ({rowId, mutate}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
return (
<>
<Tooltip title={t("DeleteDialog.delete")}>
<IconButton
data-testid="dialog_tooltip"
color="primary"
onClick={() => {
setOpenConfirmDialog(true)
}}
>
<DeleteIcon/>
</IconButton>
</Tooltip>
<Dialog maxWidth="sm" open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DeleteContent rowId={rowId} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</>
);
};
export default DeleteForm;

153
src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
View File

@@ -1,153 +0,0 @@
import {
Button,
Checkbox,
CircularProgress,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
FormControlLabel,
FormHelperText,
FormLabel,
Grid,
Stack,
TextField,
Typography
} from "@mui/material";
import {useFormik} from "formik";
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";
import useRequest from "@/lib/app/hooks/useRequest";
import {useTranslations} from "next-intl";
const UpdateContent = ({mutate, row, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const {permissions_list, isLoading} = usePermissions()
const validationSchema = Yup.object().shape({
name_en: Yup.string().required(t("UpdateDialog.name_en_error")),
name_fa: Yup.string().required(t("UpdateDialog.name_fa_error")),
permissions: Yup.array().min(1, t("UpdateDialog.permission_min_error")).required(t("UpdateDialog.permission")),
});
const formik = useFormik({
initialValues: {
name_en: row.getValue("name"),
name_fa: row.getValue("name_fa"),
permissions: row.original.permissions.map((obj) => obj.id),
}, validationSchema, onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("name", values.name_en);
formData.append("name_fa", values.name_fa);
for (let i = 0; i < values.permissions.length; i++) {
formData.append(`permissions[${i}]`, values.permissions[i]);
}
requestServer(`${UPDATE_ROLE}/${row.getValue("id")}`, 'post', {
data: formData,
}).then((response) => {
setOpenConfirmDialog(false)
mutate()
update_notification()
}).catch(() => {
}).finally(() => {
setSubmitting(false);
});
},
});
return (
<>
<DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
<DialogContent>
<Stack sx={{mt: 2}} spacing={2}>
<Stack direction="row" spacing={2} sx={{mt: 1}}>
<TextField
name="name_en"
label={t("UpdateDialog.name_en")}
value={formik.values.name_en}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name_en")}
error={formik.touched.name_en && Boolean(formik.errors.name_en)}
helperText={formik.touched.name_en && formik.errors.name_en}
/>
<TextField
name="name_fa"
label={t("UpdateDialog.name_fa")}
value={formik.values.name_fa}
onChange={formik.handleChange}
fullWidth
variant="outlined"
onBlur={formik.handleBlur("name_fa")}
error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
helperText={formik.touched.name_fa && formik.errors.name_fa}
/>
</Stack>
<Stack>
<FormLabel>{t("UpdateDialog.permission")}<br/>
<FormControl
name="permissions"
error={formik.touched.permissions && Boolean(formik.errors.permissions)}
onBlur={formik.handleBlur("permissions")}
sx={{mt: 2}}
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("UpdateDialog.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>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
disabled={formik.isSubmitting} autoFocus>
{t("UpdateDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
{t("UpdateDialog.button-update")}
</Button>
</DialogActions>
</>
)
}
export default UpdateContent

218
src/components/dashboard/role-management/Form/UpdateForm/__test__/UpdateContent.test.js
View File

@@ -1,218 +0,0 @@
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
const row = {
id: 0,
getValue: name => {
if (name === "name") {
return "manage_passenger_office_navgan";
} else if (name === "name_fa") {
return "مدیریت کارتابل رییس اداره مسافری استان";
}
},
original: {
permissions: [
{
id: 1,
name: "manage_passenger_office_navgan",
name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
},
{
id: 2,
name: "manage_passenger_office_navgan",
name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
}
]
}
}
describe("Create Content component from Create Form Component in Role Management Component", () => {
describe("Rendering", () => {
it('should see AddDialog text in the top ', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const textElement = screen.queryByText("ویرایش")
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
it('should see name_en text', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام انگلیسی")
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
it('should see name_fa text', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const textElement = screen.queryByLabelText("نام فارسی")
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
it('should see update text in the submit button ', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const buttonElement = screen.queryByText("ثبت")
await waitFor(() => {
expect(buttonElement).toBeInTheDocument()
})
});
it('should see cancel text in the cancel button ', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const buttonElement = screen.queryByText("بستن")
await waitFor(() => {
expect(buttonElement).toBeInTheDocument()
})
});
})
describe("Behavior", () => {
it('should see what fill in the name_en input', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
await waitFor(() => {
// Simulate user input
expect(nameEnglishInput).toHaveValue('testuser');
})
});
it('should see what fill in the name_fa input', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const nameFarsiInput = screen.getByLabelText('نام فارسی');
fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
await waitFor(() => {
// Simulate user input
expect(nameFarsiInput).toHaveValue('testuser');
})
});
it('should return permissions_list', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
await waitFor(() => {
expect(checkboxElement).toHaveLength(2)
})
});
it('should see the value of the name_en that pass to input value', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const name_enElement = screen.getByLabelText("نام انگلیسی")
await waitFor(() => {
expect(name_enElement).toHaveValue("manage_passenger_office_navgan")
})
});
it('should see the value of the name_fa that pass to input value', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const name_enElement = screen.getByLabelText("نام فارسی")
await waitFor(() => {
expect(name_enElement).toHaveValue("مدیریت کارتابل رییس اداره مسافری استان")
})
});
it('should get checked if the id exists in permission lists', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
await waitFor(() => {
expect(checkboxElement).toBeChecked();
})
});
})
describe("Validation", () => {
it('should see error text when name_fa input is empty', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const name_faInput = screen.getByLabelText("نام فارسی")
expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
fireEvent.change(name_faInput, {target: {value: ''}});
fireEvent.blur(name_faInput)
await waitFor(() => {
expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
})
fireEvent.change(name_faInput, {target: {value: "نام فارسی"}})
await waitFor(() => {
expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
})
})
it('should see error text when name_en input is empty', async () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const name_enInput = screen.getByLabelText("نام انگلیسی")
expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
fireEvent.change(name_enInput, {target: {value: null}});
fireEvent.blur(name_enInput)
await waitFor(() => {
expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
})
fireEvent.change(name_enInput, {target: {value: "english name"}})
await waitFor(() => {
expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
})
})
it('should submit button be disabled', () => {
render(
<MockAppWithProviders>
<UpdateContent row={row}/>
</MockAppWithProviders>
)
const submitButtonElement = screen.queryByText("ثبت")
expect(submitButtonElement).toBeDisabled()
});
})
})

22
src/components/dashboard/role-management/Form/UpdateForm/__test__/index.test.js
View File

@@ -1,22 +0,0 @@
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
import userEvent from "@testing-library/user-event";
describe("Create Form Component from Role Management Component",()=>{
describe("Rendering",()=>{
it('should see Tooltip text when mouse over', async () => {
render(
<MockAppWithProviders>
<UpdateForm />
</MockAppWithProviders>
)
const buttonElement = screen.getByTestId("dialog_tooltip");
fireEvent.mouseOver(buttonElement);
await waitFor(()=>{
expect(screen.queryByText("ویرایش")).toBeVisible();
})
});
})
})

31
src/components/dashboard/role-management/Form/UpdateForm/index.jsx
View File

@@ -1,31 +0,0 @@
import {Dialog, IconButton, Stack, Tooltip} from "@mui/material";
import {useTranslations} from "next-intl";
import {useState} from "react";
import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
import EditIcon from "@mui/icons-material/Edit";
const UpdateForm = ({mutate, row}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("UpdateDialog.update")} arrow placement="right">
<IconButton
data-testid="dialog_tooltip"
color="primary"
onClick={() => {
setOpenConfirmDialog(true);
}}
>
<EditIcon/>
</IconButton>
</Tooltip>
<Dialog maxWidth={"md"} open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<UpdateContent mutate={mutate} row={row} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</Stack>
)
}
export default UpdateForm

94
src/components/dashboard/role-management/RoleManagementComponent.jsx
View File

@@ -1,94 +0,0 @@
import DataTable from "@/core/components/DataTable";
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";
import {useMemo} from "react";
import moment from "jalali-moment";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
const RoleManagementComponent = () => {
const t = useTranslations();
const columns = useMemo(() => [{
accessorFn: (row) => row.id,
id: "id",
sortDescFirst: true,
header: t("RoleManagement.id"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
},
{
accessorFn: (row) => row.name_fa,
id: "name_fa",
header: t("RoleManagement.name_fa"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
},
{
accessorFn: (row) => row.name,
id: "name",
header: t("RoleManagement.name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains"],
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
},
{
accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "created_at",
header: t("RoleManagement.created_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}/>);
},
}, {
accessorFn: (row) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
id: "updated_at",
header: t("RoleManagement.updated_at"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
}], []);
return (
<Box sx={{px: 3}}>
<DataTable
tableUrl={GET_ROLES}
columns={columns}
selectableRow={false}
enableCustomToolbar={true}
CustomToolbar={TableToolbar}
enableLastUpdate={true}
enablePinning={true}
enableDensityToggle={false}
sorting={[{
id: 'id', desc: true
}]}
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 RoleManagementComponent

22
src/components/dashboard/role-management/TableRowActions.jsx
View File

@@ -1,22 +0,0 @@
import {Box} from "@mui/material";
import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
const TableRowActions = ({row, mutate}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<UpdateForm
row={row}
mutate={mutate}
/>
<DeleteForm
rowId={row.getValue("id")}
mutate={mutate}
/>
</Box>
);
};
export default TableRowActions;

11
src/components/dashboard/role-management/TableToolbar.jsx
View File

@@ -1,11 +0,0 @@
import {useTranslations} from "next-intl";
import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
function TableToolbar({mutate}) {
const t = useTranslations();
return <CreateForm mutate={mutate}/>
}
export default TableToolbar;

63
src/components/dashboard/role-management/__test__/RoleManagementComponent.test.js
View File

@@ -1,63 +0,0 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../mocks/AppWithProvider";
import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
describe("Role Management", ()=>{
describe("Rendering", ()=>{
it('should see id title of data table', async () => {
render(
<MockAppWithProviders>
<RoleManagementComponent />
</MockAppWithProviders>
)
const idEelement = screen.queryByText("کد یکتا")
await waitFor(()=>{
expect(idEelement).toBeInTheDocument()
})
});
it('should see name title of data table', async () => {
render(
<MockAppWithProviders>
<RoleManagementComponent />
</MockAppWithProviders>
)
const nameEelement = screen.queryByText("نام انگلیسی")
await waitFor(()=>{
expect(nameEelement).toBeInTheDocument()
})
});
it('should see name_fa title of data table', async () => {
render(
<MockAppWithProviders>
<RoleManagementComponent />
</MockAppWithProviders>
)
const name_faEelement = screen.queryByText("نام فارسی")
await waitFor(()=>{
expect(name_faEelement).toBeInTheDocument()
})
});
it('should see created at title of data table', async () => {
render(
<MockAppWithProviders>
<RoleManagementComponent />
</MockAppWithProviders>
)
const createdEelement = screen.queryByText("تاریخ درخواست")
await waitFor(()=>{
expect(createdEelement).toBeInTheDocument()
})
});
it('should see updated at title of data table', async () => {
render(
<MockAppWithProviders>
<RoleManagementComponent />
</MockAppWithProviders>
)
const updateEelement = screen.queryByText("تاریخ بروزرسانی")
await waitFor(()=>{
expect(updateEelement).toBeInTheDocument()
})
});
})
})

9
src/components/dashboard/role-management/index.jsx
View File

@@ -1,9 +0,0 @@
import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
function DashboardRoleManagementComponent() {
return (
<RoleManagementComponent/>
);
}
export default DashboardRoleManagementComponent;

37
src/components/errors/403.jsx
View File

@@ -1,37 +0,0 @@
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import {Button, Typography} from "@mui/material";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import {useTranslations} from "next-intl";
import TitlePage from "@/core/components/TitlePage";
import Svg403 from "@/core/components/svgs/Svg403";
const UnAuthorizedComponent = () => {
const t = useTranslations();
return (
<>
<TitlePage text="Titles.title_custom_403"/>
<FullPageLayout sx={{p: 1}}>
<CenterLayout spacing={3}>
<Svg403 width={300} height={200}/>
<Typography margin={2} variant="h6" textAlign="center">
{t("ErrorPage.custom_403")}
</Typography>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/",
}}
>
{t("ErrorPage.link_routing_back_to")}{" "}
{t("ErrorPage.link_routing_main_page")}
</Button>
</CenterLayout>
</FullPageLayout>
</>
);
};
export default UnAuthorizedComponent;

37
src/components/errors/404.jsx
View File

@@ -1,37 +0,0 @@
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import {Button, Typography} from "@mui/material";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import {useTranslations} from "next-intl";
import TitlePage from "@/core/components/TitlePage";
import Svg404 from "@/core/components/svgs/Svg404";
const NotFoundComponent = () => {
const t = useTranslations();
return (
<>
<TitlePage text="Titles.title_custom_404"/>
<FullPageLayout sx={{p: 1}}>
<CenterLayout spacing={3}>
<Svg404 width={300} height={200}/>
<Typography margin={2} variant="h6" textAlign="center">
{t("ErrorPage.custom_404")}
</Typography>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/",
}}
>
{t("ErrorPage.link_routing_back_to")}{" "}
{t("ErrorPage.link_routing_main_page")}
</Button>
</CenterLayout>
</FullPageLayout>
</>
);
};
export default NotFoundComponent;

48
src/components/errors/500.jsx
View File

@@ -1,48 +0,0 @@
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import {Box, Button, Container, Stack, Typography} from "@mui/material";
import {NextLinkComposed} from "@/core/components/LinkRouting";
import {useTranslations} from "next-intl";
import Image from "next/image";
import TitlePage from "@/core/components/TitlePage";
const ServerErrorComponent = () => {
const t = useTranslations();
return (
<>
<TitlePage text="Titles.title_custom_500"/>
<FullPageLayout sx={{p: 1}}>
<CenterLayout>
<Container maxWidth="sm">
<Stack spacing={4} sx={{p: 4}}>
<Box sx={{position: "relative", width: "100%", height: 200}}>
<Image
fill
src="/images/500.svg"
alt={t("app_name")}
priority
/>
</Box>
<Typography margin={2} variant="h6" textAlign="center">
{t("ErrorPage.custom_500")}
</Typography>
<Button
variant="contained"
component={NextLinkComposed}
to={{
pathname: "/",
}}
>
{t("ErrorPage.link_routing_back_to")}{" "}
{t("ErrorPage.link_routing_main_page")}
</Button>
</Stack>
</Container>
</CenterLayout>
</FullPageLayout>
</>
);
};
export default ServerErrorComponent;

61
src/components/first/__tests__/index.test.js
View File

@@ -1,61 +0,0 @@
import {render, screen, waitFor} from "@testing-library/react";
import FirstComponent from "@/components/first";
import MockAppWithProviders from "../../../../mocks/AppWithProvider";
import {server} from "../../../../mocks/server";
import {rest} from "msw";
import {GET_USER} from "@/core/data/apiRoutes";
describe("First Component From First Page", () => {
describe("Rendering", () => {
it("App Name Text Rendered", () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
const appNameElement = screen.queryByText(/سامانه CRM/i);
expect(appNameElement).toBeInTheDocument()
});
it("App version Text Rendered", () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
const versionControler = screen.queryByText(process.env.NEXT_PUBLIC_API_VERSION, {exact: false});
expect(versionControler).toBeInTheDocument()
});
it("Powered By Rendered With Currect URL", () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
const linkElement = screen.queryByText('توسعه یافته توسط وایتل');
expect(linkElement).toBeInTheDocument()
expect(linkElement).toHaveAttribute('href', process.env.NEXT_PUBLIC_POWERED_BY_URL);
});
});
describe("Behavioral", () => {
it("Show Login Button And Do Not Show Dashboard Button When User Is Not Authenticated", async () => {
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
await waitFor(() => {
const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
expect(authenticationButtonLogin).toBeInTheDocument()
expect(authenticationButtonDashboard).not.toBeInTheDocument()
})
});
it("Show Dashboard Button And Do Not Show Login Button When User Is Authenticated", async () => {
localStorage.setItem("_token", 'token');
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
await waitFor(() => {
const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
expect(authenticationButtonLogin).not.toBeInTheDocument()
expect(authenticationButtonDashboard).toBeInTheDocument()
})
});
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, (req, res, ctx) => {
return res(ctx.status(401))
}))
render(<MockAppWithProviders><FirstComponent/></MockAppWithProviders>);
await waitFor(() => {
const authenticationButtonLogin = screen.queryByText(/ورود کارشناس/i)
const authenticationButtonDashboard = screen.queryByText(/داشبورد/i)
expect(authenticationButtonLogin).toBeInTheDocument()
expect(authenticationButtonDashboard).not.toBeInTheDocument()
})
});
});
});

55
src/components/first/index.jsx
View File

@@ -1,55 +0,0 @@
import LinkRouting, {NextLinkComposed} from "@/core/components/LinkRouting";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useUser from "@/lib/app/hooks/useUser";
import {Button, Stack, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import SvgDashboard from "@/core/components/svgs/SvgDashboard";
const FirstComponent = () => {
const t = useTranslations();
const {isAuth} = useUser();
return (
<FullPageLayout sx={{p: 1}}>
<CenterLayout spacing={3}>
<SvgDashboard width={300} height={200}/>
<Typography variant="h5" sx={{textAlign: "center"}}>
{t("app_name")}
</Typography>
<Button
data-testid="button-login-or-dashboard"
variant={isAuth ? "outlined" : "contained"}
component={NextLinkComposed}
to={{
pathname: isAuth ? "/dashboard" : "/login-expert",
}}
>
{isAuth ? t("dashboard") : t("login_expert")}
</Button>
</CenterLayout>
<Stack direction="row" alignItems="center" justifyContent="center">
<Typography variant={"caption"}
sx={{
color: 'primary.main',
fontFamily: 'Arial',
fontWeight: 'bold'
}}
>
v{process.env.NEXT_PUBLIC_API_VERSION}
</Typography>
</Stack>
<Stack direction="row" alignItems="center" justifyContent="center">
<LinkRouting
sx={{margin: 0.5, fontSize: "14px"}}
href={process.env.NEXT_PUBLIC_POWERED_BY_URL}
target="_blank"
>
{t("powered_by_witel")}
</LinkRouting>
</Stack>
</FullPageLayout>
);
};
export default FirstComponent;

19
src/components/layouts/Dashboard/Breadcrumbs/BreadcrumbItem.jsx
View File

@@ -1,19 +0,0 @@
import LinkRouting from "@/core/components/LinkRouting";
import {Typography} from "@mui/material";
import {useTranslations} from "next-intl";
export default function BreadcrumbItem(props) {
const t = useTranslations();
const isLast = props.index === props.RouterArray.length - 1;
const url = `/${props.RouterArray.slice(0, props.index + 1).join("/")}`;
return isLast ? (
<Typography variant="body2" color="primary">
{t("sidebar." + props.label)}
</Typography>
) : (
<LinkRouting underline="hover" color="inherit" passHref href={url}>
<Typography variant="body2">{t("sidebar." + props.label)}</Typography>
</LinkRouting>
);
}

49
src/components/layouts/Dashboard/Breadcrumbs/index.jsx
View File

@@ -1,49 +0,0 @@
import {useRouter} from "next/router";
import {Box, Breadcrumbs} from "@mui/material";
import {useTheme} from "@mui/material/styles";
import {NavigateBefore, NavigateNext} from "@mui/icons-material";
import BreadcrumbItem from "./BreadcrumbItem";
const BreadCrumbs = (props) => {
const {isVisible} = props;
const theme = useTheme();
const router = useRouter();
if (!isVisible) {
return null;
}
const {pathname} = router;
const RouterArray = pathname.split("/").filter((segment) => segment !== "");
if (RouterArray.length === 1) {
return null;
}
return (
<Box p={3} component="span">
<Breadcrumbs
maxItems={2}
separator={
theme.direction === "ltr" ? (
<NavigateNext fontSize="small"/>
) : (
<NavigateBefore fontSize="small"/>
)
}
aria-label="breadcrumb"
>
{RouterArray.map((segment, index) => (
<BreadcrumbItem
RouterArray={RouterArray}
label={segment}
key={segment}
index={index}
/>
))}
</Breadcrumbs>
</Box>
);
};
export default BreadCrumbs;

43
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/__test__/index.test.js
View File

@@ -1,43 +0,0 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import ActionHeader from "..";
const tab = {
active: true,
active_category_id: 1,
phone_number : "09134849737"
}
describe('Action Header Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see header text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<ActionHeader tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
)
const headingElement = screen.getByRole('heading', {
name: /\.\.\.\. عملیات های مربوط به تماس:/i
})
await waitFor(() => {
expect(headingElement).toBeInTheDocument()
})
});
it('should see phone number', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<ActionHeader tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
)
const phone_numberElement = screen.queryByText(/09134849737/i)
await waitFor(() => {
expect(phone_numberElement).toBeInTheDocument()
})
});
});
});

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/index.jsx
View File

@@ -1,25 +0,0 @@
import {useTranslations} from "next-intl";
import {Stack, Typography} from "@mui/material";
const ActionHeader = ({tab}) => {
const t = useTranslations();
return (
<Stack sx={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
py: 2,
backgroundColor: "primary.main",
overflow: "hidden"
}}>
<Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
.... {t("CallAction.call_history_of")}:
</Typography>
<Typography data-testid="phone_number" variant="subtitle1" sx={{color: "#fff"}}>
{tab.phone_number} ....
</Typography>
</Stack>
)
}
export default ActionHeader

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/CallActionCategoriesButton.jsx
View File

@@ -1,25 +0,0 @@
import { Button, Grid } from "@mui/material";
import useCategories from "@/lib/callWidget/hooks/useCategories";
const CallActionCategoriesButton = ({ category, tab }) => {
const { setActiveCategoryID } = useCategories();
return (
<Grid item xs={4}>
<Button
sx={{py : 1.5}}
fullWidth
variant={"contained"}
color={tab.active_category_id === category.category_id ? "primary" : "inherit"}
onClick={() => {
setActiveCategoryID(tab.id, category.category_id);
}}
>
{category.category_name}
</Button>
</Grid>
);
};
export default CallActionCategoriesButton;

51
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/CallActionCategoriesButton.test.js
View File

@@ -1,51 +0,0 @@
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import CallActionCategoriesButton from "../CallActionCategoriesButton";
const category = {
category_id: 1,
category_name: "اطلاعات راه ها",
}
const tab = {
active: true,
active_category_id: 1,
}
describe('Call Action Categories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should categories names', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionCategoriesButton tab={tab} category={category}/>
</AnswersProvider>
</MockAppWithProviders>
)
const categoryElement = screen.queryByText("اطلاعات راه ها")
await waitFor(() => {
expect(categoryElement).toBeInTheDocument()
})
});
});
describe("Behavior", ()=>{
it("Should change the color when button clecked",async()=>{
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionCategoriesButton tab={tab} category={category}/>
</AnswersProvider>
</MockAppWithProviders>
)
const buttonElement = screen.getByRole('button', {
name: /اطلاعات راه ها/i
})
fireEvent.click(buttonElement);
await waitFor(() => {
expect(buttonElement).toHaveStyle('background-color: rgb(12, 31, 23)');
})
})
})
})

29
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/index.test.js
View File

@@ -1,29 +0,0 @@
import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
import CallActionsCategories from "..";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import { render, screen, waitFor } from "@testing-library/react";
const tab = {
active: true,
active_category_id: 1,
id : 1,
phone_number : "09134849737"
}
describe('Call Action Categories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see divider text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionsCategories tab={tab}/>
</AnswersProvider>
</MockAppWithProviders>
)
const divider_textElement = screen.queryByText("موضوع ها")
await waitFor(() => {
expect(divider_textElement).toBeInTheDocument()
})
});
});
})

22
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/index.jsx
View File

@@ -1,22 +0,0 @@
import { Chip, Divider, Grid, Stack } from "@mui/material";
import useCategories from "@/lib/callWidget/hooks/useCategories";
import CallActionCategoriesButton from "./CallActionCategoriesButton";
import { useTranslations } from "next-intl";
const CallActionsCategories = ({ tab }) => {
const { categoryLists } = useCategories();
const t = useTranslations();
return (
<>
<Divider sx={{margin : 2}}><Chip label={t("CallAction.categories")} variant="outlined"/></Divider>
<Stack sx={{m : 1, p : 1}} direction={"row"}>
<Grid container spacing={2}>
{categoryLists.map((category) => {
return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
})}
</Grid>
</Stack>
</>
);
};
export default CallActionsCategories;

54
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionDescription/__test__/index.test.js
View File

@@ -1,54 +0,0 @@
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import CallActionDescription from "..";
describe('Action Header Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see placeholder text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionDescription />
</AnswersProvider>
</MockAppWithProviders>
)
const textElement = screen.getByPlaceholderText('لطفا توضیحات خود را وارد نمایید')
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
it('should see header text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionDescription />
</AnswersProvider>
</MockAppWithProviders>
)
const textElement = screen.getByText('توضیحات تماس (اختیاری)')
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
});
});
describe("Behavior", ()=>{
it("Should see what write in input", async()=>{
const setDescription = jest.fn();
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionDescription setDescription={setDescription} />
</AnswersProvider>
</MockAppWithProviders>
)
const textElement = screen.getByPlaceholderText('لطفا توضیحات خود را وارد نمایید')
fireEvent.change(textElement, {target : {value : "امین"}})
await waitFor(() => {
expect(textElement).toHaveValue("امین")
})
})
})
});

27
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionDescription/index.jsx
View File

@@ -1,27 +0,0 @@
import { Box, Chip, Divider, TextField } from "@mui/material"
import { useTranslations } from "next-intl";
const CallActionDescription = ({setDescription}) => {
const t = useTranslations();
return(
<>
<Divider sx={{margin : 2}}><Chip label={t("CallAction.description")} variant="outlined"/></Divider>
<Box sx={{m : 2}}>
<TextField
variant="outlined"
placeholder={t(
"CallAction.text_field_palacholder"
)}
type={"text"}
fullWidth
multiline
rows={8}
onChange={(e)=>{
setDescription(e.target.value)
}}
/>
</Box>
</>
)
}
export default CallActionDescription

14
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton.jsx
View File

@@ -1,14 +0,0 @@
import { Button, Grid } from "@mui/material";
const CallActionSubcategoriesButton = ({ sub_category, tab, handleSubcategoryButton }) => {
return sub_category.category_id === tab.active_category_id ? (
<Grid item xs={3}>
<Button sx={{py : 1.5}} fullWidth color="inherit"
onClick={()=>{handleSubcategoryButton(sub_category.category_id, sub_category.subcategory_id)}} variant={"contained"}>
{sub_category.subcategory_name}
</Button>
</Grid>
) : null;
};
export default CallActionSubcategoriesButton;

37
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/CallActionSubcategoriesButton.test.js
View File

@@ -1,37 +0,0 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import CallActionSubcategoriesButton from "../CallActionSubcategoriesButton";
const sub_category = {
category_id: 1,
category_name: "اطلاعات راه",
subcategory_id: 1,
subcategory_name: "اطلاعات باز و بسته"
};
const tab = {
active: true,
active_category_id: 1,
date: new Date(),
id: 1,
phone_number: "09134849737"
};
describe('Call Action Subcategories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should render subcategory name', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionSubcategoriesButton sub_category={sub_category} tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
);
const subCategoryElement = screen.queryByText(/اطلاعات باز و بسته/i);
await waitFor(() => {
expect(subCategoryElement).toBeInTheDocument();
});
});
});
});

29
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/index.test.js
View File

@@ -1,29 +0,0 @@
import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
import CallActionsSubcategories from "..";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import { render, screen, waitFor } from "@testing-library/react";
const tab = {
active: true,
active_category_id: 1,
id : 1,
phone_number : "09134849737"
}
describe('Call Action Categories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see divider text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionsSubcategories tab={tab}/>
</AnswersProvider>
</MockAppWithProviders>
)
const divider_textElement = screen.queryByText("زیر موضوع ها")
await waitFor(() => {
expect(divider_textElement).toBeInTheDocument()
})
});
});
})

22
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/index.jsx
View File

@@ -1,22 +0,0 @@
import useCategories from "@/lib/callWidget/hooks/useCategories";
import { Chip, Divider, Grid, Stack } from "@mui/material";
import CallActionSubcategoriesButton from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton";
import { useTranslations } from "next-intl";
const CallActionsSubcategories = ({ tab, handleSubcategoryButton }) => {
const { subCategoryLists } = useCategories();
const t = useTranslations();
return (
<>
<Divider sx={{margin : 2}}><Chip label={t("CallAction.subcategories")} variant="outlined"/></Divider>
<Stack sx={{m : 1, p : 1 }} direction={"row"}>
<Grid container spacing={2}>
{subCategoryLists.map((sub_category, index) => {
return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} handleSubcategoryButton={handleSubcategoryButton}/>;
})}
</Grid>
</Stack>
</>
);
};
export default CallActionsSubcategories;

49
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx
View File

@@ -1,49 +0,0 @@
import CallActionsCategories from "./CallActionCategories";
import CallActionsSubcategories from "./CallActionSubcategories";
import ActionHeader from "./ActionHeader";
import CallActionDescription from "./CallActionDescription";
import useRequest from "@/lib/app/hooks/useRequest";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import {useState} from "react";
import {Stack} from "@mui/material";
import {CALL_ACTION} from "@/core/data/apiRoutes";
function CallActions({tab}) {
const [description, setDescription] = useState("")
const requestServer = useRequest({auth: true});
const {closeAnswerTab} = useAnswers();
const handleSubcategoryButton = (category_id, subcategory_id) => {
let data = {}
data['category_id'] = category_id
data['subcategory_id'] = subcategory_id
if (description !== "")
data["description"] = description
requestServer(`${CALL_ACTION}/${tab.id}`, "post", {
data
})
.then(() => {
closeAnswerTab(tab.id);
})
.catch(() => {
});
};
return (
<Stack sx={{
height: "100%",
overflow: "hidden"
}}>
<ActionHeader tab={tab}/>
<Stack sx={{height: "100%", overflow: "scroll"}}>
<CallActionDescription setDescription={setDescription}/>
<CallActionsCategories tab={tab}/>
<CallActionsSubcategories handleSubcategoryButton={handleSubcategoryButton} tab={tab}/>
</Stack>
</Stack>
);
}
export default CallActions;

19
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/__tests__/index.test.js
View File

@@ -1,19 +0,0 @@
import {render, screen} from "@testing-library/react";
import ErrorOrEmpty from "../../ErrorOrEmpty";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
describe("ErrorOrEmpty Component From call history", () => {
describe("Rendering", () => {
it("error fetching history of call text rendered", () => {
render(<MockAppWithProviders><ErrorOrEmpty isErrorOrEmpty={"error"}/></MockAppWithProviders>);
const errorText = screen.queryByText('خطا در دریافت تاریخچه تماس دریافتی');
expect(errorText).toBeInTheDocument();
});
it("empty fetching history of call text rendered", () => {
render(<MockAppWithProviders><ErrorOrEmpty isErrorOrEmpty={"empty"}/></MockAppWithProviders>);
const emptyText = screen.queryByText('تاریخچه ای برای تماس دریافتی یافت نشد');
expect(emptyText).toBeInTheDocument();
});
});
});

33
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/index.jsx
View File

@@ -1,33 +0,0 @@
import {useTranslations} from "next-intl";
import {Typography} from "@mui/material";
const ErrorOrEmpty = ({isErrorOrEmpty}) => {
const t = useTranslations();
return (
<>
{isErrorOrEmpty === "error" ?
<Typography variant="subtitle1" sx={{
color: "#837e7e",
fontWeight: "500",
letterSpacing: 1,
textAlign: "center",
mt: "50%"
}}>
{t("CallHistory.call_history_error_fetching")}
</Typography>
: isErrorOrEmpty === "empty" ?
<Typography variant="subtitle1" sx={{
color: "#837e7e",
fontWeight: "500",
letterSpacing: 1,
textAlign: "center",
mt: "50%"
}}>
{t("CallHistory.call_history_not_found")}
</Typography> : <></>
}
</>
)
}
export default ErrorOrEmpty

21
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/__tests__/index.test.js
View File

@@ -1,21 +0,0 @@
import {render, screen} from "@testing-library/react";
import HistoryHeader from "../../HistoryHeader";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
describe("HistoryHeader Component From call history", () => {
describe("Rendering", () => {
const tab = {
phone_number: "09111111111"
}
it("text of header rendered", () => {
render(<MockAppWithProviders><HistoryHeader tab={tab}/></MockAppWithProviders>);
const textHeader = screen.queryByText(/تاریخچه تماس های/i);
expect(textHeader).toBeInTheDocument();
});
it("caller number in header rendered", () => {
render(<MockAppWithProviders><HistoryHeader tab={tab}/></MockAppWithProviders>);
const callerNumber = screen.queryByText(/09111111111/i);
expect(callerNumber).toBeInTheDocument();
});
});
});

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/index.jsx
View File

@@ -1,25 +0,0 @@
import {useTranslations} from "next-intl";
import {Stack, Typography} from "@mui/material";
const HistoryHeader = ({tab}) => {
const t = useTranslations();
return (
<Stack sx={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
py: 2,
backgroundColor: "primary.main",
overflow: "hidden"
}}>
<Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
.... {t("CallHistory.call_history_of")}:
</Typography>
<Typography variant="subtitle1" sx={{color: "#fff"}}>
{tab.phone_number} ....
</Typography>
</Stack>
)
}
export default HistoryHeader

24
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviousOperatorData/__tests__/index.test.js
View File

@@ -1,24 +0,0 @@
import {render, screen} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../../mocks/AppWithProvider";
import PreviousOperatorData from "../../PreviousOperatorData";
import moment from "jalali-moment";
describe("PreviousOperatorData Component From call history", () => {
describe("Rendering", () => {
const historyItem = {
operator_full_name: "test name",
created_at: "2023-11-19T10:32:48"
}
it("operator name rendered", () => {
render(<MockAppWithProviders><PreviousOperatorData historyItem={historyItem}/></MockAppWithProviders>);
const operatorName = screen.queryByText("test name");
expect(operatorName).toBeInTheDocument();
});
it("operator answer date rendered", () => {
const dateTime = moment(historyItem.created_at).locale('fa').format("HH:mm:ss | YYYY/MM/DD")
render(<MockAppWithProviders><PreviousOperatorData historyItem={historyItem}/></MockAppWithProviders>);
const operatorAnswerDate = screen.queryByText(dateTime);
expect(operatorAnswerDate).toBeInTheDocument();
});
});
});

31
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviousOperatorData/index.jsx
View File

@@ -1,31 +0,0 @@
import {useTranslations} from "next-intl";
import {Avatar, Box, ListItem, ListItemAvatar, ListItemText, Typography} from "@mui/material";
import HeadsetMicIcon from '@mui/icons-material/HeadsetMic';
import useLanguage from "@/lib/app/hooks/useLanguage";
import moment from "jalali-moment";
const PreviousOperatorData = ({historyItem}) => {
const {languageApp} = useLanguage()
const t = useTranslations();
return (
<ListItem>
<ListItemAvatar>
<Avatar sx={{backgroundColor: "primary.light"}}>
<HeadsetMicIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary={
<Box sx={{display: "flex", alignItems: "end"}}>
<Typography sx={{marginRight: 1, color: "#545151"}}>
{historyItem.operator_full_name}
</Typography>
<Typography variant="caption" sx={{color: "secondary.main"}}>
({t("CallHistory.operator")})
</Typography>
</Box>
} secondary={moment(historyItem.created_at).locale(languageApp).format("HH:mm:ss | YYYY/MM/DD")}/>
</ListItem>
)
}
export default PreviousOperatorData

28
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/__tests__/index.test.js
View File

@@ -1,28 +0,0 @@
import {render, screen} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../../mocks/AppWithProvider";
import Topics from "../../Topics";
describe("Topics Component From call history", () => {
describe("Rendering", () => {
const historyItem = {
category_name: "test category",
subcategory_name: "test sub category",
description: "test desc"
}
it("operator name rendered", () => {
render(<MockAppWithProviders><Topics historyItem={historyItem}/></MockAppWithProviders>);
const operatorName = screen.queryByText("test category");
expect(operatorName).toBeInTheDocument();
});
it("operator answer date rendered", () => {
render(<MockAppWithProviders><Topics historyItem={historyItem}/></MockAppWithProviders>);
const operatorAnswerDate = screen.queryByText("test sub category");
expect(operatorAnswerDate).toBeInTheDocument();
});
it("operator description rendered", () => {
render(<MockAppWithProviders><Topics historyItem={historyItem}/></MockAppWithProviders>);
const operatorAnswerDate = screen.queryByText("test desc");
expect(operatorAnswerDate).toBeInTheDocument();
});
});
});

56
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics/index.jsx
View File

@@ -1,56 +0,0 @@
import {useTranslations} from "next-intl";
import {Box, List, ListItem, Typography} from "@mui/material";
const Topics = ({historyItem}) => {
const t = useTranslations();
return (
<Box timeout="auto" unmountonexit="true">
<List component="div" disablePadding>
<ListItem sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
{t("CallHistory.category_name")}:
</Typography>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
{historyItem.category_name || t("CallHistory.no_data_exist")}
</Typography>
</Box>
</ListItem>
</List>
<List component="div" disablePadding>
<ListItem sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
{t("CallHistory.subcategory_name")}:
</Typography>
<Typography variant="subtitle2" sx={{
width: "200px",
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: "nowrap",
textAlign: "end",
color: "#837e7e"
}}>
{historyItem.subcategory_name || t("CallHistory.no_data_exist")}
</Typography>
</Box>
</ListItem>
</List>
{historyItem.description ? <List component="div" disablePadding>
<ListItem sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", flexDirection: "column"}}>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
{t("CallHistory.description")}:
</Typography>
<Typography variant="subtitle2" sx={{color: "#837e7e", px: 2}}>
{historyItem.description}
</Typography>
</Box>
</ListItem>
</List> : ""}
</Box>
)
}
export default Topics

21
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx
View File

@@ -1,21 +0,0 @@
import {useTranslations} from "next-intl";
import {Grow, List} from "@mui/material";
import PreviousOperatorData from "./PreviousOperatorData";
import Topics from "./Topics";
const ListItemOfCalls = ({historyItem}) => {
const t = useTranslations();
// console.log(historyItem)
return (
<Grow in={true}>
<List sx={{width: '100%', bgcolor: 'rgba(222,234,215,0.11)'}}>
<PreviousOperatorData historyItem={historyItem}/>
<Topics historyItem={historyItem}/>
</List>
</Grow>
)
}
export default ListItemOfCalls

68
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/__tests__/intex.test.js
View File

@@ -1,68 +0,0 @@
import {render, screen} from "@testing-library/react";
import LoadingHistory from "../../LoadingHistory";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
describe("LoadingHistory Component From call history", () => {
describe("Rendering", () => {
it("loading list rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingList = screen.queryByTestId("loading-list");
expect(loadingList).toBeInTheDocument();
});
it("loading list item avatar rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemAvatar = screen.queryByTestId("loading-listItemAvatar");
expect(loadingListItemAvatar).toBeInTheDocument();
});
it("loading list item text rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemText = screen.queryByTestId("loading-listItemText");
expect(loadingListItemText).toBeInTheDocument();
});
it("loading list item category rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemCat = screen.queryByTestId("loading-listItem-cat");
expect(loadingListItemCat).toBeInTheDocument();
});
it("loading list item sub category rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const loadingListItemSubCat = screen.queryByTestId("loading-listItem-subCat");
expect(loadingListItemSubCat).toBeInTheDocument();
});
it("operator avatar skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorAvatarSkeleton = screen.queryByTestId("operator-avatar-skeleton");
expect(operatorAvatarSkeleton).toBeInTheDocument();
});
it("operator name skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorNameSkeleton = screen.queryByTestId("operator-name-skeleton");
expect(operatorNameSkeleton).toBeInTheDocument();
});
it("operator answer date skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorAnswerDateSkeleton = screen.queryByTestId("operator-answer-date-skeleton");
expect(operatorAnswerDateSkeleton).toBeInTheDocument();
});
it("operator category header skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorCategoryHeaderSkeleton = screen.queryByTestId("operator-category-header-skeleton");
expect(operatorCategoryHeaderSkeleton).toBeInTheDocument();
});
it("operator category value skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorCategoryValueSkeleton = screen.queryByTestId("operator-category-value-skeleton");
expect(operatorCategoryValueSkeleton).toBeInTheDocument();
});
it("operator subCategory header skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorSubCategoryHeaderSkeleton = screen.queryByTestId("operator-subCategory-header-skeleton");
expect(operatorSubCategoryHeaderSkeleton).toBeInTheDocument();
});
it("operator subCategory value skeleton rendered", () => {
render(<MockAppWithProviders><LoadingHistory/></MockAppWithProviders>);
const operatorSubCategoryValueSkeleton = screen.queryByTestId("operator-subCategory-value-skeleton");
expect(operatorSubCategoryValueSkeleton).toBeInTheDocument();
});
});
});

86
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/index.jsx
View File

@@ -1,86 +0,0 @@
import {useTranslations} from "next-intl";
import {Box, List, ListItem, ListItemAvatar, ListItemText, Skeleton} from "@mui/material";
const LoadingHistory = () => {
const t = useTranslations();
return (
<>
<List data-testid="loading-list" sx={{
width: '100%',
bgcolor: 'rgba(222,234,215,0.11)',
}}>
<Box sx={{
display: "flex",
alignItems: "center",
px: 2
}}>
<ListItemAvatar data-testid="loading-listItemAvatar">
<Skeleton data-testid="operator-avatar-skeleton"
animation="wave" variant="circular"
width={60} height={60}/>
</ListItemAvatar>
<ListItemText data-testid="loading-listItemText" primary={
<Box sx={{display: "flex", alignItems: "end"}}>
<Skeleton
data-testid="operator-name-skeleton"
animation="wave"
height={15}
width="50%"
style={{marginRight: 10, marginBottom: 5}}
/>
</Box>
} secondary={
<Skeleton
data-testid="operator-answer-date-skeleton"
animation="wave"
height={10}
width="30%"
style={{marginRight: 10}}
/>
}/>
</Box>
<Box timeout="auto" sx={{py: 2}}>
<List component="div" disablePadding>
<ListItem data-testid="loading-listItem-cat" sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Skeleton
data-testid="operator-category-header-skeleton"
animation="wave"
height={15}
width="15%"
/>
<Skeleton
data-testid="operator-category-value-skeleton"
animation="wave"
height={15}
width="30%"
/>
</Box>
</ListItem>
</List>
<List component="div" disablePadding>
<ListItem data-testid="loading-listItem-subCat" sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Skeleton
data-testid="operator-subCategory-header-skeleton"
animation="wave"
height={15}
width="25%"
/>
<Skeleton
data-testid="operator-subCategory-value-skeleton"
animation="wave"
height={15}
width="50%"
/>
</Box>
</ListItem>
</List>
</Box>
</List>
</>
)
}
export default LoadingHistory

65
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
View File

@@ -1,65 +0,0 @@
import {useTranslations} from "next-intl";
import {Box, Chip, Divider, Stack} from "@mui/material";
import HeadphonesIcon from '@mui/icons-material/Headphones';
import LoadingHistory from "./LoadingHistory";
import HistoryHeader from "./HistoryHeader";
import ErrorOrEmpty from "./ErrorOrEmpty";
import useCallerHistory from "@/lib/callWidget/hooks/useCallerHistory";
import ListItemOfCalls from "./ListItemOfCalls";
import {Fragment, useState} from "react";
const max_size = 10;
const CallHistory = ({tab}) => {
const t = useTranslations();
const {
firstItemOfHistory,
historyList,
isLoadingHistoryList,
errorHistoryList
} = useCallerHistory(tab.id, tab.phone_number, max_size);
const [showRestOfHistory, setShowRestOfHistory] = useState(false);
return (
<Stack sx={{
height: "100%",
overflow: "hidden"
}}>
<HistoryHeader tab={tab}/>
<Stack sx={{height: "100%", overflow: "scroll"}}>
{isLoadingHistoryList ? (
<LoadingHistory/>
) : errorHistoryList ? (
<ErrorOrEmpty isErrorOrEmpty="error"/>
) : !firstItemOfHistory ? (
<ErrorOrEmpty isErrorOrEmpty="empty"/>
) : (
<Box>
<ListItemOfCalls historyItem={firstItemOfHistory}/>
{historyList && (
<Divider>
<Chip
icon={<HeadphonesIcon/>}
onClick={() => setShowRestOfHistory(true)}
label={t("CallHistory.show_more")}
disabled={showRestOfHistory}
/>
</Divider>
)}
{showRestOfHistory && (
<>
{historyList.map((historyItem, index) => (
<Fragment key={historyItem.id}>
<ListItemOfCalls key={historyItem.id} historyItem={historyItem}/>
<Divider/>
</Fragment>
))}
</>)
}
</Box>
)}
</Stack>
</Stack>
)
}
export default CallHistory

23
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
View File

@@ -1,23 +0,0 @@
import {Divider, Grid} from "@mui/material";
import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions";
import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory";
const CallTabPanel = ({tab}) => {
return (
<Grid container columns={{xs: 3}} sx={{display: !tab.active && 'none', height: '100%', overflow: "hidden"}}
role="tabpanel"
id={`answer-tabpanel-${tab.id}`} aria-labelledby={`answer-tab-${tab.id}`}>
<Grid item xs={2} sx={{height: "100%", overflow: "scroll"}}>
<CallActions tab={tab}/>
</Grid>
<Grid item>
<Divider orientation="vertical"/>
</Grid>
<Grid item xs sx={{height: "100%", overflow: "scroll"}}>
<CallHistory tab={tab}/>
</Grid>
</Grid>
)
}
export default CallTabPanel

17
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails.jsx
View File

@@ -1,17 +0,0 @@
import {Stack, Typography} from "@mui/material";
import CallIcon from '@mui/icons-material/Call';
import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime";
const CallTabDetails = ({tab}) => {
return (
<Stack direction = "row" justifyContent = "center" alignItems = "center" spacing = {3}>
<CallIcon/>
<Stack alignItems = {"start"}>
<Typography>{tab.phone_number}</Typography>
<CallTabTime realTimeDate = {tab.date}/>
</Stack>
</Stack>
)
}
export default CallTabDetails

30
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx
View File

@@ -1,30 +0,0 @@
import {IconButton, Stack, Zoom} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import CallTabDetails
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails";
const CallTabLabel = ({tab, index}) => {
const {closeAnswerTab, activeTab} = useAnswers()
const handleCloseClick = (id) => {
closeAnswerTab(id)
};
return (
<Stack sx = {{
width: '100%',
px: 1,
borderRight: activeTab === index ? 0 : activeTab - 1 === index ? 0 : 1,
borderRightColor: 'divider'
}} direction = {'row'} alignItems = {'center'} justifyContent = {'space-between'}>
<CallTabDetails tab = {tab}/>
<Zoom in = {tab.active}>
<IconButton size = "small" onClick = {() => handleCloseClick(tab.id)}>
<CloseIcon fontSize = "small"/>
</IconButton>
</Zoom>
</Stack>
)
}
export default CallTabLabel

29
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime.jsx
View File

@@ -1,29 +0,0 @@
import {Typography} from "@mui/material";
import {useEffect, useState} from "react";
import moment from "jalali-moment";
import useLanguage from "@/lib/app/hooks/useLanguage";
const CallTabTime = ({realTimeDate}) => {
const {languageApp} = useLanguage()
const [date, setDate] = useState('...')
const changeTabTime = (tabTime) => {
moment.relativeTimeThreshold('ss', 1)
return moment(tabTime).locale(languageApp).fromNow()
}
useEffect(() => {
const timer = setInterval(() => {
setDate(changeTabTime(realTimeDate))
}, 1000)
return () => {
clearInterval(timer)
}
}, [realTimeDate]);
return (
<Typography variant = "caption"
color = "gray">{date}</Typography>
)
}
export default CallTabTime

28
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/__test__/CallTabDetails.test.js
View File

@@ -1,28 +0,0 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
import CallTabDetails
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails";
const tab = {
phone_number: "09134849737",
id: 1,
date: new Date()
}
describe("Call Tab Details from Call Tan List", () => {
describe("Rendering", () => {
it('Should see the phone number on tab detail', async () => {
render(
<MockAppWithProviders>
<CallTabDetails tab = {tab}/>
</MockAppWithProviders>
)
const phoneNumberElement = screen.getByText("09134849737")
await waitFor(() => {
expect(phoneNumberElement).toHaveTextContent("09134849737")
})
});
})
})

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/__test__/CallTabTime.test.js
View File

@@ -1,25 +0,0 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime";
const tab = {
phone_number: "09134849737",
id: 1,
date: new Date()
}
describe("Call Tab Details from Call Tan List", () => {
describe("Rendering", () => {
it('Should see the date on tab detail', async () => {
render(
<MockAppWithProviders>
<CallTabTime realTimeDate = {tab.date}/>
</MockAppWithProviders>
)
await waitFor(() => {
expect(screen.getByText(/ثانیه پیش/i)).toBeInTheDocument()
})
});
})
})

33
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx
View File

@@ -1,33 +0,0 @@
import {Box, Tab, Tabs} from "@mui/material";
import CallTabLabel
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
const CallTabsList = () => {
const {answersList, changeActiveTabAnswers, activeTab} = useAnswers()
const handleChange = (event, newValue) => {
changeActiveTabAnswers(newValue)
};
return (
<Box sx = {{borderBottom: 1, borderColor: 'divider'}}>
<Tabs
value = {activeTab}
onChange = {handleChange}
variant = "scrollable"
scrollButtons = "auto"
sx = {{background: "#e0e0e0"}}
>
{answersList.map((answer, index) => (
<Tab component = {'div'} sx = {{
width: 350, p: 0, py: 0.5, background: answer.active ? "#fff" : null,
borderTopRightRadius: answer.active ? "16px" : 0,
borderTopLeftRadius: answer.active ? "16px" : 0,
}} label = {<CallTabLabel index = {index} tab = {answer}/>} key = {answer.id}/>
))}
</Tabs>
</Box>
)
}
export default CallTabsList

17
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx
View File

@@ -1,17 +0,0 @@
import CallTabPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import CallTabsList from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList";
const CallTabs = () => {
const {answersList} = useAnswers()
return (
<>
<CallTabsList/>
{answersList.map((answer) => (
<CallTabPanel key={answer.id} tab={answer}/>
))}
</>
)
}
export default CallTabs

49
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
View File

@@ -1,49 +0,0 @@
import {Dialog} from "@mui/material";
import {DialogTransition} from "@/core/components/DialogTransition";
import {useEffect} from "react";
import useCallDialog from "@/lib/callWidget/hooks/useCallDialog";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import useSocket from "@/lib/app/hooks/useSocket";
import CallTabs from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs";
const CallWidgetDialog = () => {
const {openCallDialog, setOpenCallDialog} = useCallDialog()
const {answersList, newAnswerTab} = useAnswers()
const socket = useSocket()
useEffect(() => {
const answerCall = (_data, act) => {
const data = JSON.parse(_data)
newAnswerTab({
id: data.call_id,
phone_number: data.phone_number
})
act()
}
socket.on('answer', answerCall)
return () => {
socket.off('answer', answerCall)
}
});
useEffect(() => {
if (answersList.length === 0) {
setOpenCallDialog(false)
return
}
setOpenCallDialog(true)
}, [answersList.length]);
return (
<Dialog
fullScreen
open = {openCallDialog}
TransitionComponent = {DialogTransition}
>
<CallTabs/>
</Dialog>
)
}
export default CallWidgetDialog

Some files were not shown because too many files have changed in this diff Show More