diff --git a/mocks/handler.js b/mocks/handler.js index 49e0f99..65f5398 100644 --- a/mocks/handler.js +++ b/mocks/handler.js @@ -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 - })) -})] \ No newline at end of file +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), + ); + }), +] \ No newline at end of file diff --git a/src/components/dashboard/change-password/change-password-form/__test__/index.test.js b/src/components/dashboard/change-password/change-password-form/__test__/index.test.js index 4a63240..503b571 100644 --- a/src/components/dashboard/change-password/change-password-form/__test__/index.test.js +++ b/src/components/dashboard/change-password/change-password-form/__test__/index.test.js @@ -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(); - const currentPasswordLabel = screen.getByLabelText('رمز عبور فعلی'); + const currentPasswordLabel = screen.queryByLabelText('رمز عبور فعلی'); expect(currentPasswordLabel).toBeInTheDocument(); }); it('Should see the label for new password field', () => { render(); - const newPasswordLabel = screen.getByLabelText('رمز عبور جدید'); + const newPasswordLabel = screen.queryByLabelText('رمز عبور جدید'); expect(newPasswordLabel).toBeInTheDocument(); }); it('Should see the label for confirm password field', () => { render(); - 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(); - 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(); - 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(); - 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(); - 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(); // 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(); // 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(); // 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(); - 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(); - 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(); - 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(); - 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(); - // - // // 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(); + + // 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(); + 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'); + }); + }); }); }) \ No newline at end of file diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index 06dd4e9..4d2d8c0 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -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