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

CFE-12 implement changepasswordform implement changepasswordform test

Browse Source
This commit is contained in:
Yasiu1376
2023-10-02 15:13:12 +03:30
parent 7e768a46eb
commit 7a94678fd4
4 changed files with 465 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,7 +79,9 @@
"label_current_password": "رمز عبور فعلی",
"label_new_password": "رمز عبور جدید",
"label_confirm_password": "تکرار رمز عبور جدید",
"error_message_required": "اجباری !",
"error_message_current_password_required": "وارد کردن رمز عبور فعلی الزامیست!",
"error_message_new_password_required": "وارد کردن رمز عبور جدید الزامیست!",
"error_message_confirm_password_required": "وارد کردن تکرار رمز عبور جدید الزامیست!",
"error_message_password_length": "رمز عبور باید حداقل 8 کاراکتر باشد.",
"error_message_password_match": "پسورد ها یکسان هستند",
"error_message_password_not_match": "پسورد و تکرار رمز عبور باید یکسان باشد"

322
src/components/dashboard/change-password/change-password-form/__test__/index.test.js Normal file
View File

@@ -0,0 +1,322 @@
import { render, screen, waitFor, fireEvent , act } from '@testing-library/react';
import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
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.getByLabelText('رمز عبور فعلی');
expect(currentPasswordLabel).toBeInTheDocument();
});
it('Should see the label for new password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordLabel = screen.getByLabelText('رمز عبور جدید');
expect(newPasswordLabel).toBeInTheDocument();
});
it('Should see the label for confirm password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const confirmPasswordLabel = screen.getByLabelText('تکرار رمز عبور جدید');
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.getByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
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', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی');
// 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', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
// 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', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
// 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 submit click or on blur event and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the current password input
const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Clear the input field
fireEvent.change(currentPasswordInput, { target: { value: '' } });
fireEvent.blur(currentPasswordInput);
await waitFor(()=>{
expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).toBeInTheDocument()
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).toBeInTheDocument();
});
});
it('Should see error while new password is empty on submit click or on blur event and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the new password input
const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Clear the input field
fireEvent.change(newPasswordInput, { target: { value: '' } });
fireEvent.blur(newPasswordInput);
await waitFor(()=>{
expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).toBeInTheDocument()
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).toBeInTheDocument();
});
});
it('Should see error while confirm new password is empty on submit click or on blur event and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the new password input
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Clear the input field
fireEvent.change(confirmPasswordInput, { target: { value: '' } });
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 see error when new password is less than 8 characters', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
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.getByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.getByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
});
});
it('Should not see error when new password are 8 or more characters', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
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.getByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
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.getByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.getByText("پسورد و تکرار رمز عبور باید یکسان باشد")).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.getByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
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.getByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
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 submit the form and reset it on success', async () => {
// server.use([rest.get(SET_USER_PASSWORD, (req, res, ctx) => {
// return res(ctx.status(200),)
// })])
// render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
//
// // Mock the requestServer function to simulate a successful API response
// const originalRequestServer = global.requestServer;
// global.requestServer = jest.fn().mockResolvedValue({});
//
// const submitButton = screen.getByRole('button', { name: 'ثبت' });
//
// // Simulate entering valid values in the form fields
// const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی');
// const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
// const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
//
// 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();
// });
//
// // Simulate form submission
// fireEvent.click(submitButton);
//
// // Wait for success message
// await waitFor(() => {
// // const successMessage = screen.getByText("Password changed successfully");
// // expect(successMessage).toBeInTheDocument();
// // Check if the form is reset
//
// });
//
// expect(currentPasswordInput).toHaveValue('');
// expect(newPasswordInput).toHaveValue('');
// expect(confirmPasswordInput).toHaveValue('');
//
//
//
// // Restore the original requestServer function
// global.requestServer = originalRequestServer;
// });
});
})

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

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

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

@@ -1,146 +1,15 @@
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Button, Container, Paper, Stack, Typography,} from "@mui/material";
import {Formik} from "formik";
import * as Yup from "yup";
import {useTranslations} from "next-intl";
import PasswordField from "@/core/components/PasswordField";
import StyledForm from "@/core/components/StyledForm";
import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
import SvgChangePassword from "@/core/components/svgs/SvgChangePassword";
import useRequest from "@/lib/app/hooks/useRequest";
import {Container} from "@mui/material";
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
const DashboardChangePasswordComponent = () => {
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_required")
),
new_password: Yup.string()
.min(8, t("ChangePassword.error_message_password_length"))
.required(t("ChangePassword.error_message_required")),
new_password_confirmation: Yup.string()
.required(t("ChangePassword.error_message_required"))
.test(
t("ChangePassword.error_message_password_match"),
t("ChangePassword.error_message_password_not_match"),
function (value) {
return this.parent.new_password === value;
}
),
});
return (
<DashboardLayouts>
<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">
<SvgChangePassword width={300} height={200}/>
<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.isSubmitting
? t("SubmitButton.button_while_submit")
: t("SubmitButton.button_submit")}
</Button>
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
<ChangePasswordForm />
</Container>
</CenterLayout>
</DashboardLayouts>