From d7ea0816708047c53fd925d2495e19a6725374ad Mon Sep 17 00:00:00 2001
From: Mandy Parson <135638667+mandyparson@users.noreply.github.com>
Date: Fri, 1 Nov 2024 09:53:21 -0600
Subject: [PATCH] MMT-3934: Keep error notifications open (#1317)

---
 .../Notifications/Notifications.jsx           |  3 +-
 .../__tests__/Notifications.test.jsx          | 38 ++++++++++++++-----
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/static/src/js/components/Notifications/Notifications.jsx b/static/src/js/components/Notifications/Notifications.jsx
index 2fdec5f98..28ec2f9f7 100644
--- a/static/src/js/components/Notifications/Notifications.jsx
+++ b/static/src/js/components/Notifications/Notifications.jsx
@@ -48,13 +48,14 @@ const Notifications = () => {
               success: <FaCheck className={iconClassNames} />,
               danger: <FaExclamation className={iconClassNames} />
             }
+            const shouldAutoHide = !(variant === 'danger')
 
             // Set the default delay duration to be passed to the Toast component and the bootstrap css variable
             const delay = 4000
 
             return (
               <Toast
-                autohide
+                autohide={shouldAutoHide}
                 bg="dark"
                 className="position-relative overflow-hidden text-light"
                 delay={delay}
diff --git a/static/src/js/components/Notifications/__tests__/Notifications.test.jsx b/static/src/js/components/Notifications/__tests__/Notifications.test.jsx
index ded24a9e1..4475391a9 100644
--- a/static/src/js/components/Notifications/__tests__/Notifications.test.jsx
+++ b/static/src/js/components/Notifications/__tests__/Notifications.test.jsx
@@ -10,26 +10,30 @@ import Notifications from '../Notifications'
 import Providers from '../../../providers/Providers/Providers'
 import useNotificationsContext from '../../../hooks/useNotificationsContext'
 
-const MockComponent = () => {
+// eslint-disable-next-line react/prop-types
+const MockComponent = ({ variantType }) => {
   const { addNotification } = useNotificationsContext()
 
   useEffect(() => {
     addNotification({
-      message: 'Mock notification',
-      variant: 'success'
+      message: `Mock ${variantType} notification`,
+      variant: `${variantType}`
     })
   }, [])
 
   return null
 }
 
-const setup = () => {
+const setup = ({
+  overrideVariantType,
+  variantType = 'success'
+} = {}) => {
   const user = userEvent.setup()
 
   render(
     <Providers>
       <Notifications />
-      <MockComponent />
+      <MockComponent variantType={overrideVariantType || variantType} />
     </Providers>
   )
 
@@ -43,7 +47,7 @@ describe('Notifications', () => {
     test('renders a toast', () => {
       setup()
 
-      expect(screen.getByText('Mock notification')).toBeInTheDocument()
+      expect(screen.getByText('Mock success notification')).toBeInTheDocument()
     })
 
     describe('when clicking the close button', () => {
@@ -54,7 +58,7 @@ describe('Notifications', () => {
 
         await user.click(button)
 
-        expect(screen.queryByText('Mock notification')).not.toBeInTheDocument()
+        expect(screen.queryByText('Mock success notification')).not.toBeInTheDocument()
       })
     })
 
@@ -64,13 +68,29 @@ describe('Notifications', () => {
 
         setup()
 
-        expect(screen.getByText('Mock notification')).toBeInTheDocument()
+        expect(screen.getByText('Mock success notification')).toBeInTheDocument()
 
         await act(() => {
           vi.advanceTimersByTimeAsync(4001)
         })
 
-        expect(screen.queryByText('Mock notification')).not.toBeInTheDocument()
+        expect(screen.queryByText('Mock success notification')).not.toBeInTheDocument()
+      })
+    })
+
+    describe('when the the notification is of type danger', () => {
+      test('the notification does not expire', async () => {
+        vi.useFakeTimers()
+
+        setup({ overrideVariantType: 'danger' })
+
+        expect(screen.getByText('Mock danger notification')).toBeInTheDocument()
+
+        await act(() => {
+          vi.advanceTimersByTimeAsync(4001)
+        })
+
+        expect(screen.getByText('Mock danger notification')).toBeInTheDocument()
       })
     })
   })