fix(ui): show error and success message mutually exclusive (#19194)

(cherry picked from commit bfa943bbba3a7d1949a95618ad14d6d3697d7ffd)
This commit is contained in:
Chirag Madlani 2025-01-02 20:42:48 +05:30
parent 1721f4c38f
commit ccfd3c9d06
3 changed files with 53 additions and 18 deletions

View File

@ -169,18 +169,7 @@ const BasicAuthProvider = ({
};
const handleForgotPassword = async (email: string) => {
try {
await generatePasswordResetLink(email);
} catch (err) {
if (
(err as AxiosError).response?.status ===
HTTP_STATUS_CODE.FAILED_DEPENDENCY
) {
showErrorToast(t('server.forgot-password-email-error'));
} else {
showErrorToast(t('server.email-not-found'));
}
}
await generatePasswordResetLink(email);
};
const handleResetPassword = async (payload: PasswordResetRequest) => {

View File

@ -13,13 +13,16 @@
import Icon from '@ant-design/icons/lib/components/Icon';
import { Button, Card, Col, Divider, Form, Input, Row, Typography } from 'antd';
import { AxiosError } from 'axios';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { ReactComponent as IconSuccessBadge } from '../../assets/svg/success-badge.svg';
import { useBasicAuth } from '../../components/Auth/AuthProviders/BasicAuthProvider';
import BrandImage from '../../components/common/BrandImage/BrandImage';
import { HTTP_STATUS_CODE } from '../../constants/Auth.constants';
import { ROUTES } from '../../constants/constants';
import { showErrorToast } from '../../utils/ToastUtils';
import './forgot-password.styles.less';
const ForgotPassword = () => {
@ -34,9 +37,16 @@ const ForgotPassword = () => {
async (data: { email: string }) => {
try {
setLoading(true);
handleForgotPassword && (await handleForgotPassword(data.email));
await handleForgotPassword?.(data.email);
setShowResetLinkSentAlert(true);
} catch (error) {
showErrorToast(
(error as AxiosError).response?.status ===
HTTP_STATUS_CODE.FAILED_DEPENDENCY
? t('server.forgot-password-email-error')
: t('server.email-not-found')
);
setShowResetLinkSentAlert(false);
} finally {
setLoading(false);

View File

@ -13,19 +13,31 @@
import { act, fireEvent, render } from '@testing-library/react';
import React from 'react';
import { useBasicAuth } from '../../components/Auth/AuthProviders/BasicAuthProvider';
import { showErrorToast } from '../../utils/ToastUtils';
import ForgotPassword from './ForgotPassword.component';
const mockPush = jest.fn();
const handleForgotPassword = jest.fn();
const mockHandleForgotPassword = jest.fn();
const mockHandleError = jest.fn().mockImplementation(() => {
return Promise.reject({
response: {
data: { message: 'Error!' },
},
});
});
jest.mock('../../components/Auth/AuthProviders/BasicAuthProvider', () => {
return {
useBasicAuth: jest.fn().mockImplementation(() => ({
handleResetPassword: handleForgotPassword,
handleForgotPassword: mockHandleForgotPassword,
})),
};
});
jest.mock('../../utils/ToastUtils', () => ({
showErrorToast: jest.fn(),
}));
jest.mock('react-router-dom', () => ({
useHistory: jest.fn().mockImplementation(() => ({
push: mockPush,
@ -43,7 +55,9 @@ describe('ForgotPassword', () => {
});
it('calls handleForgotPassword with the correct email', async () => {
(useBasicAuth as jest.Mock).mockReturnValue({ handleForgotPassword });
(useBasicAuth as jest.Mock).mockReturnValue({
handleForgotPassword: mockHandleForgotPassword,
});
const { getByLabelText, getByText } = render(<ForgotPassword />);
const emailInput = getByLabelText('label.email');
@ -55,7 +69,7 @@ describe('ForgotPassword', () => {
fireEvent.click(submitButton);
});
expect(handleForgotPassword).toHaveBeenCalledWith('test@example.com');
expect(mockHandleForgotPassword).toHaveBeenCalledWith('test@example.com');
});
it('shows an error when email is not provided', async () => {
@ -89,7 +103,7 @@ describe('ForgotPassword', () => {
fireEvent.click(submitButton);
});
expect(handleForgotPassword).toHaveBeenCalledWith('test@example.com');
expect(mockHandleForgotPassword).toHaveBeenCalledWith('test@example.com');
expect(getByTestId('success-screen-container')).toBeInTheDocument();
expect(getByTestId('success-icon')).toBeInTheDocument();
expect(getByTestId('success-line')).toBeInTheDocument();
@ -104,4 +118,26 @@ describe('ForgotPassword', () => {
expect(mockPush).toHaveBeenCalled();
});
it('should call show error toast', async () => {
(useBasicAuth as jest.Mock).mockReturnValueOnce({
handleForgotPassword: mockHandleError,
});
const { getByLabelText, getByText, queryByTestId } = render(
<ForgotPassword />
);
const emailInput = getByLabelText('label.email');
const submitButton = getByText('label.submit');
await act(async () => {
fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
});
await act(async () => {
fireEvent.click(submitButton);
});
expect(showErrorToast).toHaveBeenCalledWith('server.email-not-found');
expect(mockHandleError).toHaveBeenCalledWith('test@example.com');
expect(queryByTestId('success-screen-container')).not.toBeInTheDocument();
});
});