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"; import {rest} from "msw";
export const handler = [rest.get(GET_USER_ROUTE, (req, res, ctx) => { export const handler = [
return res(ctx.json({ rest.get(GET_USER_ROUTE, (req, res, ctx) => {
id: 10 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 { render, screen, waitFor, fireEvent , act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MockAppWithProviders from "../../../../../../mocks/AppWithProvider"; import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form"; 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('Change Password Form Component From Change Password Page', () => {
describe('Rendering', () => { describe('Rendering', () => {
@@ -11,17 +15,17 @@ describe('Change Password Form Component From Change Password Page', () => {
}); });
it('Should see the label for current password field', () => { it('Should see the label for current password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordLabel = screen.getByLabelText('رمز عبور فعلی'); const currentPasswordLabel = screen.queryByLabelText('رمز عبور فعلی');
expect(currentPasswordLabel).toBeInTheDocument(); expect(currentPasswordLabel).toBeInTheDocument();
}); });
it('Should see the label for new password field', () => { it('Should see the label for new password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordLabel = screen.getByLabelText('رمز عبور جدید'); const newPasswordLabel = screen.queryByLabelText('رمز عبور جدید');
expect(newPasswordLabel).toBeInTheDocument(); expect(newPasswordLabel).toBeInTheDocument();
}); });
it('Should see the label for confirm password field', () => { it('Should see the label for confirm password field', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const confirmPasswordLabel = screen.getByLabelText('تکرار رمز عبور جدید'); const confirmPasswordLabel = screen.queryByLabelText('تکرار رمز عبور جدید');
expect(confirmPasswordLabel).toBeInTheDocument(); expect(confirmPasswordLabel).toBeInTheDocument();
}); });
it('Should see the submit button with the submit label and should be disable', () => { 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', () => { it('Should have empty input fields and not see any validation error for current password, new password, and confirm password', () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی'); const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید'); const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
expect(currentPasswordInput).toHaveValue(''); expect(currentPasswordInput).toHaveValue('');
expect(newPasswordInput).toHaveValue(''); expect(newPasswordInput).toHaveValue('');
@@ -47,10 +51,10 @@ describe('Change Password Form Component From Change Password Page', () => {
}); });
}); });
describe("Behavior", ()=>{ 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>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی'); const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
// Simulate typing something in the current password input // Simulate typing something in the current password input
fireEvent.change(currentPasswordInput, { target: { value: 'witel@fani0' } }); 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'); 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>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
// Simulate typing something in the new password input // Simulate typing something in the new password input
fireEvent.change(newPasswordInput, { target: { value: 'witel@fani1' } }); 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'); 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>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید'); const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
// Simulate typing something in the confirmation new password input // Simulate typing something in the confirmation new password input
fireEvent.change(confirmPasswordInput, { target: { value: 'witel@fani1' } }); fireEvent.change(confirmPasswordInput, { target: { value: 'witel@fani1' } });
@@ -88,12 +92,11 @@ describe('Change Password Form Component From Change Password Page', () => {
}); });
}); });
describe("Validation", ()=>{ 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>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the current password input // Simulate blur event on the current password input
const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی'); const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Clear the input field // Clear the input field
fireEvent.change(currentPasswordInput, { target: { value: '' } }); fireEvent.change(currentPasswordInput, { target: { value: '' } });
@@ -103,20 +106,12 @@ describe('Change Password Form Component From Change Password Page', () => {
await waitFor(()=>{ await waitFor(()=>{
expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).toBeInTheDocument() 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>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the new password input // Simulate blur event on the new password input
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Clear the input field // Clear the input field
fireEvent.change(newPasswordInput, { target: { value: '' } }); fireEvent.change(newPasswordInput, { target: { value: '' } });
@@ -126,20 +121,12 @@ describe('Change Password Form Component From Change Password Page', () => {
await waitFor(()=>{ await waitFor(()=>{
expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).toBeInTheDocument() 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>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// Simulate blur event on the new password input // Simulate blur event on the new password input
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید'); const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Clear the input field // Clear the input field
fireEvent.change(confirmPasswordInput, { target: { value: '' } }); fireEvent.change(confirmPasswordInput, { target: { value: '' } });
@@ -149,18 +136,11 @@ describe('Change Password Form Component From Change Password Page', () => {
await waitFor(()=>{ await waitFor(()=>{
expect(screen.queryByText("وارد کردن تکرار رمز عبور جدید الزامیست!")).toBeInTheDocument() 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 () => { it('Should see error when new password is less than 8 characters', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' }); const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a short new password // Simulate entering a short new password
@@ -168,20 +148,20 @@ describe('Change Password Form Component From Change Password Page', () => {
fireEvent.blur(newPasswordInput); fireEvent.blur(newPasswordInput);
await waitFor(() => { await waitFor(() => {
expect(screen.getByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument(); expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
}); });
// Simulate clicking the submit button // Simulate clicking the submit button
fireEvent.click(submitButton); fireEvent.click(submitButton);
await waitFor(() => { 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 () => { it('Should not see error when new password are 8 or more characters', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' }); const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password // 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 () => { it('Should see error when new password and confirm password do not match on blur event and submit click', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید'); const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' }); const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password // Simulate entering a valid new password
@@ -215,21 +195,21 @@ describe('Change Password Form Component From Change Password Page', () => {
fireEvent.blur(confirmPasswordInput); fireEvent.blur(confirmPasswordInput);
await waitFor(() => { await waitFor(() => {
expect(screen.getByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument(); expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
}); });
// Simulate clicking the submit button // Simulate clicking the submit button
fireEvent.click(submitButton); fireEvent.click(submitButton);
await waitFor(() => { 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 () => { it('Should not see error when new password and confirm password match on blur event and submit click', async () => {
render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید'); const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
const submitButton = screen.getByRole('button', { name: 'ثبت' }); const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering a valid new password // 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: 'ثبت' }); const submitButton = screen.getByRole('button', { name: 'ثبت' });
// Simulate entering valid values in the form fields // Simulate entering valid values in the form fields
const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی'); const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید'); const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } }); fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } });
fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } }); fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
@@ -272,51 +252,54 @@ describe('Change Password Form Component From Change Password Page', () => {
expect(submitButton).not.toBeDisabled(); expect(submitButton).not.toBeDisabled();
}); });
}); });
// it('Should submit the form and reset it on success', async () => { it('Should request to api and resetform in success response', async () => {
// server.use([rest.get(SET_USER_PASSWORD, (req, res, ctx) => { // Render the component
// return res(ctx.status(200),) render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// })])
// render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>); // Fill in the form fields
// const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
// // Mock the requestServer function to simulate a successful API response const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
// const originalRequestServer = global.requestServer; const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
// global.requestServer = jest.fn().mockResolvedValue({});
// fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } });
// const submitButton = screen.getByRole('button', { name: 'ثبت' }); fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
// fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
// // Simulate entering valid values in the form fields
// const currentPasswordInput = screen.getByLabelText('رمز عبور فعلی'); // Submit the form
// const newPasswordInput = screen.getByLabelText('رمز عبور جدید'); const submitButton = screen.getByRole('button', { name: 'ثبت' });
// const confirmPasswordInput = screen.getByLabelText('تکرار رمز عبور جدید'); await userEvent.click(submitButton);
//
// fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } }); await waitFor(() => {
// fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } }); expect(currentPasswordInput).toHaveValue('');
// fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } }); expect(newPasswordInput).toHaveValue('');
// expect(confirmPasswordInput).toHaveValue('');
// // Check if the submit button is enabled });
// await waitFor(() => { });
// expect(submitButton).not.toBeDisabled(); it('Should request to api and not resetform in error response', async () => {
// }); // Render the component
// render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
// // Simulate form submission server.use([rest.get(SET_USER_PASSWORD, (req, res, ctx) => {
// fireEvent.click(submitButton); return res(ctx.status(422))
// })])
// // Wait for success message
// await waitFor(() => { // Fill in the form fields wrong
// // const successMessage = screen.getByText("Password changed successfully"); const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
// // expect(successMessage).toBeInTheDocument(); const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
// // Check if the form is reset const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
//
// }); fireEvent.change(currentPasswordInput, { target: { value: 'incorrect' } });
// fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
// expect(currentPasswordInput).toHaveValue(''); fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
// expect(newPasswordInput).toHaveValue('');
// expect(confirmPasswordInput).toHaveValue(''); // Submit the form
// const submitButton = screen.getByRole('button', { name: 'ثبت' });
// await userEvent.click(submitButton);
//
// // Restore the original requestServer function await waitFor(() => {
// global.requestServer = originalRequestServer; 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 //end login
//change password //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 //end change password
//user data //user data