MMT-3934: Keep error notifications open

nasa · Nov 1, 2024 · 118aa99 · 118aa99
1 parent d07d835
commit 118aa99
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git 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
@@ -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()
       })
     })
   })