refactor: Modify ToastManager for general feedback

Exposes a showToast for managing action errors and the showErrorToast for managing general server errors

Author: dcoa

jest.config.js

@@ -4,13 +4,13 @@ module.exports = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
   // If you want to add config BEFORE jest loads, use setupFiles instead.  
   setupFilesAfterEnv: [
-    '<rootDir>/src/setupTest.jsx',
+    '<rootDir>/src/setupTest.tsx',
   ],
   moduleNameMapper: {
     '^@src/(.*)$': '<rootDir>/src/$1',
   },
   coveragePathIgnorePatterns: [
-    'src/setupTest.jsx',
+    'src/setupTest.tsx',
     'src/i18n',
   ],
 });

src/authz-module/libraries-manager/LibrariesUserManager.tsx

@@ -47,7 +47,7 @@ const LibrariesUserManager = () => {
 
   const [roleToDelete, setRoleToDelete] = useState<Role | null>(null);
   const [showConfirmDeletionModal, setShowConfirmDeletionModal] = useState(false);
-  const { handleShowToast, handleDiscardToast } = useToastManager();
+  const { showToast, Bold, Br } = useToastManager();
 
   const {
     data: teamMember, isLoading: isLoadingTeamMember, isFetching: isFetchingMember,
@@ -78,7 +78,6 @@ const LibrariesUserManager = () => {
   const handleShowConfirmDeletionModal = (role: Role) => {
     if (isRevokingUserRole) { return; }
 
-    handleDiscardToast();
     setRoleToDelete(role);
     setShowConfirmDeletionModal(true);
   };
@@ -95,19 +94,26 @@ const LibrariesUserManager = () => {
     revokeUserRoles({ data }, {
       onSuccess: () => {
         const remainingRolesCount = userRoles.length - 1;
-        handleShowToast(intl.formatMessage(
-          messages['library.authz.team.remove.user.toast.success.description'],
-          {
-            role: roleToDelete.name,
-            rolesCount: remainingRolesCount,
-          },
-        ));
+        showToast({
+          message: intl.formatMessage(
+            messages['library.authz.team.remove.user.toast.success.description'],
+            {
+              role: roleToDelete.name,
+              rolesCount: remainingRolesCount,
+            },
+          ),
+          type: 'success',
+        });
+
         handleCloseConfirmDeletionModal();
       },
       onError: (error) => {
         logError(error);
-        // eslint-disable-next-line react/no-unstable-nested-components
-        handleShowToast(intl.formatMessage(messages['library.authz.team.default.error.toast.message'], { b: chunk => <b>{chunk}</b>, br: () => <br /> }));
+
+        showToast({
+          type: 'error',
+          message: intl.formatMessage(messages['library.authz.team.toast.default.error.message'], { Bold, Br }),
+        });
         handleCloseConfirmDeletionModal();
       },
     });

src/authz-module/libraries-manager/ToastManagerContext.test.tsx

@@ -1,36 +1,28 @@
-import { screen, waitFor, render as rtlRender } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { renderWrapper } from '@src/setupTest';
+import { logError } from '@edx/frontend-platform/logging';
 import { ToastManagerProvider, useToastManager } from './ToastManagerContext';
 
-const render = (ui: React.ReactElement) => rtlRender(
-  <IntlProvider locale="en">
-    {ui}
-  </IntlProvider>,
-);
-
+jest.mock('@edx/frontend-platform/logging');
 const TestComponent = () => {
-  const { handleShowToast, handleDiscardToast } = useToastManager();
+  const { showToast } = useToastManager();
+
+  const handleShowToast = () => showToast({ message: 'Test toast message', type: 'error' });
+  const handleShowAnotherToast = () => showToast({ message: 'Another message', type: 'success' });
 
   return (
     <div>
-      <button type="button" onClick={() => handleShowToast('Test toast message')}>
-        Show Toast
-      </button>
-      <button type="button" onClick={() => handleShowToast('Another message')}>
-        Show Another Toast
-      </button>
-      <button type="button" onClick={handleDiscardToast}>
-        Discard Toast
-      </button>
+      <button type="button" onClick={handleShowToast}>Show Toast</button>
+      <button type="button" onClick={handleShowAnotherToast}>Show Another Toast</button>
     </div>
   );
 };
 
 describe('ToastManagerContext', () => {
   describe('ToastManagerProvider', () => {
     it('does not show toast initially', () => {
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
@@ -39,15 +31,14 @@ describe('ToastManagerContext', () => {
       expect(screen.queryByRole('alert')).not.toBeInTheDocument();
     });
 
-    it('shows toast when handleShowToast is called', async () => {
+    it('shows toast when showToast is called', async () => {
       const user = userEvent.setup();
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
       );
 
-      // handleShowToast is called on button click
       const showButton = screen.getByText('Show Toast');
       await user.click(showButton);
 
@@ -57,59 +48,29 @@ describe('ToastManagerContext', () => {
       });
     });
 
-    it('updates toast message when handleShowToast is called with different message', async () => {
+    it('adds multiple toasts when showToast is called multiple times', async () => {
       const user = userEvent.setup();
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
       );
 
-      // Show first toast
       const showButton = screen.getByText('Show Toast');
-      await user.click(showButton);
-
-      await waitFor(() => {
-        expect(screen.getByText('Test toast message')).toBeInTheDocument();
-      });
-
-      // Show another toast
       const showAnotherButton = screen.getByText('Show Another Toast');
-      await user.click(showAnotherButton);
-
-      await waitFor(() => {
-        expect(screen.getByText('Another message')).toBeInTheDocument();
-        expect(screen.queryByText('Test toast message')).not.toBeInTheDocument();
-      });
-    });
 
-    it('hides toast when handleDiscardToast is called', async () => {
-      const user = userEvent.setup();
-      render(
-        <ToastManagerProvider>
-          <TestComponent />
-        </ToastManagerProvider>,
-      );
-
-      const showButton = screen.getByText('Show Toast');
       await user.click(showButton);
+      await user.click(showAnotherButton);
 
       await waitFor(() => {
         expect(screen.getByText('Test toast message')).toBeInTheDocument();
-      });
-
-      // handleDiscardToast is called on button click
-      const discardButton = screen.getByText('Discard Toast');
-      await user.click(discardButton);
-
-      await waitFor(() => {
-        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(screen.getByText('Another message')).toBeInTheDocument();
       });
     });
 
     it('hides toast when close button is clicked', async () => {
       const user = userEvent.setup();
-      render(
+      renderWrapper(
         <ToastManagerProvider>
           <TestComponent />
         </ToastManagerProvider>,
@@ -127,50 +88,53 @@ describe('ToastManagerContext', () => {
 
       await waitFor(() => {
         expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-      });
-    });
-
-    it('calls handleClose callback when toast is closed', async () => {
-      const user = userEvent.setup();
-      const mockHandleClose = jest.fn();
-
-      render(
-        <ToastManagerProvider handleClose={mockHandleClose}>
-          <TestComponent />
-        </ToastManagerProvider>,
-      );
-
-      const showButton = screen.getByText('Show Toast');
-      await user.click(showButton);
-
-      await waitFor(() => {
-        expect(screen.getByText('Test toast message')).toBeInTheDocument();
-      });
-
-      const closeButton = screen.getByLabelText('Close');
-      await user.click(closeButton);
-
-      await waitFor(() => {
-        expect(mockHandleClose).toHaveBeenCalledTimes(1);
-      });
+      }, { timeout: 500 });
     });
   });
 
   describe('useToastManager hook', () => {
     it('throws error when used outside ToastManagerProvider', () => {
-      // Suppress console.error for this test
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
 
       const TestComponentWithoutProvider = () => {
         useToastManager();
         return <div>Test</div>;
       };
 
       expect(() => {
-        render(<TestComponentWithoutProvider />);
-      }).toThrow('useToastManager must be used within an ToastManagerProvider');
+        renderWrapper(<TestComponentWithoutProvider />);
+      }).toThrow('useToastManager must be used within a ToastManagerProvider');
 
       consoleSpy.mockRestore();
     });
   });
+
+  it('calls retry function when retry button is clicked', async () => {
+    const user = userEvent.setup();
+    const retryFn = jest.fn();
+
+    const ErrorTestComponent = () => {
+      const { showErrorToast } = useToastManager();
+      return (
+        <button
+          type="button"
+          onClick={() => showErrorToast({ customAttributes: { httpErrorStatus: 500 } }, retryFn)}
+        >Retry Error
+        </button>
+      );
+    };
+
+    renderWrapper(
+      <ToastManagerProvider>
+        <ErrorTestComponent />
+      </ToastManagerProvider>,
+    );
+
+    await user.click(screen.getByText('Retry Error'));
+    const retryButton = await screen.findByText('Retry');
+    await user.click(retryButton);
+
+    expect(logError).toHaveBeenCalled();
+    expect(retryFn).toHaveBeenCalled();
+  });
 });