[WALL] Farhan/WALL-2911/Unit test for WalletsErrorScreen component (#…

…12217)

* chore: ✨unit tests for WalletsErrorScreen component

* chore: ✨ clear mocks

* refactor: 🧹 change getbytext to getbyrole

packages/wallets/src/components/WalletsErrorScreen/WalletsErrorScreen.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import IcCashierError from '../../public/images/ic-cashier-error.svg';
+import ErrorIcon from '../../public/images/error-icon.svg';
 import { WalletButton } from '../Base';
 import { WalletsActionScreen } from '../WalletsActionScreen';
 
 type TProps = {
-    message: string;
+    message?: string;
 };
 
 const ErrorState: React.FC<TProps> = ({
@@ -13,7 +13,7 @@ const ErrorState: React.FC<TProps> = ({
     return (
         <WalletsActionScreen
             description={message}
-            icon={<IcCashierError />}
+            icon={<ErrorIcon data-testid='dt_error_icon' />}
             renderButtons={() => (
                 <WalletButton onClick={() => window.location.reload()} size='lg' variant='ghost'>
                     Try again

packages/wallets/src/components/WalletsErrorScreen/__tests__/WalletsErrorScreen.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import WalletsErrorScreen from '../WalletsErrorScreen';
+
+describe('WalletsErrorScreen', () => {
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should show the correct title and icon with default message', () => {
+        render(<WalletsErrorScreen />);
+        expect(screen.getByTestId('dt_error_icon')).toBeInTheDocument();
+        expect(screen.getByText('Oops, something went wrong!')).toBeInTheDocument();
+        expect(
+            screen.getByText('Sorry an error occurred. Please try accessing our cashier page again.')
+        ).toBeInTheDocument();
+    });
+
+    it('should show the message passed as prop', () => {
+        render(<WalletsErrorScreen message='Error message from props' />);
+        expect(screen.getByText('Error message from props')).toBeInTheDocument();
+    });
+
+    it('should reload the page when Try again button is clicked', () => {
+        const reloadMock = jest.fn();
+        Object.defineProperty(window, 'location', {
+            value: { reload: reloadMock },
+            writable: true,
+        });
+        render(<WalletsErrorScreen />);
+        screen.getByRole('button', { name: 'Try again' }).click();
+        expect(reloadMock).toHaveBeenCalled();
+    });
+});