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

CFE-12 complete change password test and mock for handle api

Browse Source
This commit is contained in:
Yasiu1376
2023-10-07 11:39:43 +03:30
parent 4cf388e920
commit 7902e92df2
3 changed files with 100 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
mocks/handler.js
View File

@@ -1,8 +1,17 @@
import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
import {GET_USER_ROUTE, SET_USER_PASSWORD} from "@/core/data/apiRoutes";
import {rest} from "msw";
export const handler = [rest.get(GET_USER_ROUTE, (req, res, ctx) => {
return res(ctx.json({
id: 10
}))
})]
export const handler = [
rest.get(GET_USER_ROUTE, (req, res, ctx) => {
return res(ctx.json({
data:{
id: 10
}
}))
}),
rest.post(SET_USER_PASSWORD, (req, res, ctx) => {
return res(
ctx.status(200),
);
}),
]

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

@@ -1,6 +1,10 @@
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', () => {
@@ -11,17 +15,17 @@ describe('Change Password Form Component From Change Password Page', () => {
});
it('Should see the label for current password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordLabel = screen.getByLabelText('رمز عبور فعلی');
const currentPasswordLabel = screen.queryByLabelText('رمز عبور فعلی');
expect(currentPasswordLabel).toBeInTheDocument();
});
it('Should see the label for new password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordLabel = screen.getByLabelText('رمز عبور جدید');
const newPasswordLabel = screen.queryByLabelText('رمز عبور جدید');
expect(newPasswordLabel).toBeInTheDocument();
});
it('Should see the label for confirm password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const confirmPasswordLabel = screen.getByLabelText('تکرار رمز عبور جدید');
const confirmPasswordLabel = screen.queryByLabelText('تکرار رمز عبور جدید');
expect(confirmPasswordLabel).toBeInTheDocument();
});
it('Should see the submit button with the submit label and should be disable', () => {
@@ -32,9 +36,9 @@ describe('Change Password Form Component From Change Password Page', () => {
});
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('تکرار رمز عبور جدید');
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
expect(currentPasswordInput).toHaveValue('');
expect(newPasswordInput).toHaveValue('');
@@ -47,10 +51,10 @@ describe('Change Password Form Component From Change Password Page', () => {
});
});
describe("Behavior", ()=>{
it('Should fill the current password field', async () => {
it('Should fill the current password field and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی');
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
// Simulate typing something in the current password input
fireEvent.change(currentPasswordInput, { target: { value: 'witel@fani0' } });
@@ -60,10 +64,10 @@ describe('Change Password Form Component From Change Password Page', () => {
expect(currentPasswordInput).toHaveValue('witel@fani0');
});
});
it('Should fill the new password field', async () => {
it('Should fill the new password field and not see any error while its not empty', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
// Simulate typing something in the new password input
fireEvent.change(newPasswordInput, { target: { value: 'witel@fani1' } });
@@ -73,10 +77,10 @@ describe('Change Password Form Component From Change Password Page', () => {
expect(newPasswordInput).toHaveValue('witel@fani1');
});
});
it('Should fill the confirm new password field', async () => {
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.getByLabelText('تکرار رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
// Simulate typing something in the confirmation new password input
fireEvent.change(confirmPasswordInput, { target: { value: 'witel@fani1' } });
@@ -88,12 +92,11 @@ describe('Change Password Form Component From Change Password Page', () => {
});
});
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 () => {
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.getByLabelText('رمز عبور فعلی');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
// Clear the input field
fireEvent.change(currentPasswordInput, { target: { value: '' } });
@@ -103,20 +106,12 @@ describe('Change Password Form Component From Change Password Page', () => {
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 () => {
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.getByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
// Clear the input field
fireEvent.change(newPasswordInput, { target: { value: '' } });
@@ -126,20 +121,12 @@ describe('Change Password Form Component From Change Password Page', () => {
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 () => {
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.getByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
// Clear the input field
fireEvent.change(confirmPasswordInput, { target: { value: '' } });
@@ -149,18 +136,11 @@ describe('Change Password Form Component From Change Password Page', () => {
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 newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a short new password
@@ -168,20 +148,20 @@ describe('Change Password Form Component From Change Password Page', () => {
fireEvent.blur(newPasswordInput);
await waitFor(() => {
expect(screen.getByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.getByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
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.getByLabelText('رمز عبور جدید');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password
@@ -202,8 +182,8 @@ describe('Change Password Form Component From Change Password Page', () => {
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 newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password
@@ -215,21 +195,21 @@ describe('Change Password Form Component From Change Password Page', () => {
fireEvent.blur(confirmPasswordInput);
await waitFor(() => {
expect(screen.getByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
});
// Simulate clicking the submit button
fireEvent.click(submitButton);
await waitFor(() => {
expect(screen.getByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
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.getByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید');
const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password
@@ -259,9 +239,9 @@ describe('Change Password Form Component From Change Password Page', () => {
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('تکرار رمز عبور جدید');
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' } });
@@ -272,51 +252,54 @@ describe('Change Password Form Component From Change Password Page', () => {
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;
// });
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');
});
});
});
})

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

@@ -5,7 +5,7 @@ export const GET_USER_TOKEN = BASE_URL + "/dashboard/login";
//end login
//change password
export const SET_USER_PASSWORD = BASE_URL + "/dashboard/profile/change_password";
export const SET_USER_PASSWORD = BASE_URL + "/api/profile/change_password";
//end change password
//user data