From e63e08dd81cf806796e5d6371b85a7a042ad7cc6 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Wed, 24 Aug 2022 04:38:12 +0400
Subject: [PATCH 1/4] fix: Dismissing alert not working

---
 components/Alert/Alert.tsx | 37 +++++++++++++++----------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx
index d20be45d1..96120d2d4 100644
--- a/components/Alert/Alert.tsx
+++ b/components/Alert/Alert.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useState } from 'react'
 import NavLink from '../NavLink'
 import { Alert as AlertType } from '../../graphql/'
 import _ from 'lodash'
 import styles from './alerts.module.scss'
 import Image from 'next/image'
+import { Alert as AlertBS } from 'react-bootstrap'
 
 type Props = {
   alert: AlertType
@@ -21,16 +22,20 @@ const alertIconMap: { [type: string]: string } = {
 }
 
 const Alert: React.FC<Props> = ({ alert, onDismiss }) => {
+  const [show, setShow] = useState(true)
+
   const { text, type, url, urlCaption, id } = alert
   const icon = alertIconMap[_.defaultTo(type, '-1')]
-  const alertClasses =
-    type === 'urgent' ? 'alert alert-danger' : `alert alert-primary`
   const imageClass = type === 'urgent' ? '' : styles.info_image
 
-  return (
-    <div
-      className={`${styles.alert} d-flex justify-content-between mt-3 ${alertClasses}`}
-      role="alert"
+  return show ? (
+    <AlertBS
+      variant={`${type === 'urgent' ? 'danger' : 'primary'}`}
+      onClose={() => {
+        setShow(false)
+        onDismiss && onDismiss(id)
+      }}
+      dismissible={!!onDismiss}
     >
       <div className="d-flex align-items-center gap-3">
         <div className={imageClass}>
@@ -43,21 +48,9 @@ const Alert: React.FC<Props> = ({ alert, onDismiss }) => {
           </NavLink>
         )}
       </div>
-      {onDismiss && (
-        <button
-          role="dismiss"
-          className={`${imageClass} ${styles['alert-dismiss']}`}
-          data-testid={`dismiss-${type}`}
-          onClick={() => onDismiss(id)}
-        >
-          <Image
-            src={`/assets/curriculum/icons/dismiss-${type}.svg`}
-            width={24}
-            height={24}
-          />
-        </button>
-      )}
-    </div>
+    </AlertBS>
+  ) : (
+    <></>
   )
 }
 

From d957a9a1426b19de4727d42a3a7d9593f7f0f160 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Wed, 24 Aug 2022 04:53:05 +0400
Subject: [PATCH 2/4] test: Update snapshots

---
 .../__snapshots__/storyshots.test.js.snap     | 50 +++++--------
 .../pages/__snapshots__/login.test.js.snap    |  2 +-
 .../pages/__snapshots__/signup.test.js.snap   |  2 +-
 .../__snapshots__/[lessonSlug].test.js.snap   | 72 +++++++------------
 .../__snapshots__/AdminNewAlert.test.js.snap  | 36 ++++------
 5 files changed, 56 insertions(+), 106 deletions(-)

diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index f274ffb0e..22339fd96 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -908,7 +908,7 @@ exports[`Storyshots Components/AdminLessonSideNav Basic 1`] = `
 
 exports[`Storyshots Components/Alert Info 1`] = `
 <div
-  className="alert d-flex justify-content-between mt-3 alert alert-primary"
+  className="fade alert alert-primary show"
   role="alert"
 >
   <div
@@ -931,9 +931,15 @@ exports[`Storyshots Components/Alert Info 1`] = `
 
 exports[`Storyshots Components/Alert Info With Link And Dismiss 1`] = `
 <div
-  className="alert d-flex justify-content-between mt-3 alert alert-primary"
+  className="fade alert alert-primary alert-dismissible show"
   role="alert"
 >
+  <button
+    aria-label="Close alert"
+    className="btn-close"
+    onClick={[Function]}
+    type="button"
+  />
   <div
     className="d-flex align-items-center gap-3"
   >
@@ -957,25 +963,12 @@ exports[`Storyshots Components/Alert Info With Link And Dismiss 1`] = `
       View Instructions
     </a>
   </div>
-  <button
-    className="info_image alert-dismiss"
-    data-testid="dismiss-info"
-    onClick={[Function]}
-    role="dismiss"
-  >
-    <img
-      className="img-fluid"
-      height={24}
-      src="/assets/curriculum/icons/dismiss-info.svg"
-      width={24}
-    />
-  </button>
 </div>
 `;
 
 exports[`Storyshots Components/Alert Urgent 1`] = `
 <div
-  className="alert d-flex justify-content-between mt-3 alert alert-danger"
+  className="fade alert alert-danger show"
   role="alert"
 >
   <div
@@ -998,9 +991,15 @@ exports[`Storyshots Components/Alert Urgent 1`] = `
 
 exports[`Storyshots Components/Alert Urgent With Icon And Dismiss 1`] = `
 <div
-  className="alert d-flex justify-content-between mt-3 alert alert-danger"
+  className="fade alert alert-danger alert-dismissible show"
   role="alert"
 >
+  <button
+    aria-label="Close alert"
+    className="btn-close"
+    onClick={[Function]}
+    type="button"
+  />
   <div
     className="d-flex align-items-center gap-3"
   >
@@ -1024,19 +1023,6 @@ exports[`Storyshots Components/Alert Urgent With Icon And Dismiss 1`] = `
       View NPM Package
     </a>
   </div>
-  <button
-    className=" alert-dismiss"
-    data-testid="dismiss-urgent"
-    onClick={[Function]}
-    role="dismiss"
-  >
-    <img
-      className="img-fluid"
-      height={24}
-      src="/assets/curriculum/icons/dismiss-urgent.svg"
-      width={24}
-    />
-  </button>
 </div>
 `;
 
@@ -28050,7 +28036,7 @@ exports[`Storyshots Pages/Login Login Error 1`] = `
           className="form-group"
         >
           <div
-            className="alert d-flex justify-content-between mt-3 alert alert-danger"
+            className="fade alert alert-danger show"
             role="alert"
           >
             <div
@@ -28527,7 +28513,7 @@ exports[`Storyshots Pages/Signup Signup Errors 1`] = `
         className="card-text"
       />
       <div
-        className="alert d-flex justify-content-between mt-3 alert alert-danger"
+        className="fade alert alert-danger show"
         role="alert"
       >
         <div
diff --git a/__tests__/pages/__snapshots__/login.test.js.snap b/__tests__/pages/__snapshots__/login.test.js.snap
index 83ce5d4d6..e09c77f3b 100644
--- a/__tests__/pages/__snapshots__/login.test.js.snap
+++ b/__tests__/pages/__snapshots__/login.test.js.snap
@@ -27,7 +27,7 @@ exports[`Login Page Should set alert visible on invalid credentials 1`] = `
             class="form-group"
           >
             <div
-              class="alert d-flex justify-content-between mt-3 alert alert-danger"
+              class="fade alert alert-danger show"
               role="alert"
             >
               <div
diff --git a/__tests__/pages/__snapshots__/signup.test.js.snap b/__tests__/pages/__snapshots__/signup.test.js.snap
index 08405ce39..f8ee9ee12 100644
--- a/__tests__/pages/__snapshots__/signup.test.js.snap
+++ b/__tests__/pages/__snapshots__/signup.test.js.snap
@@ -20,7 +20,7 @@ exports[`Signup Page Should render errors on fail 1`] = `
           class="card-text"
         />
         <div
-          class="alert d-flex justify-content-between mt-3 alert alert-danger"
+          class="fade alert alert-danger show"
           role="alert"
         >
           <div
diff --git a/__tests__/pages/curriculum/__snapshots__/[lessonSlug].test.js.snap b/__tests__/pages/curriculum/__snapshots__/[lessonSlug].test.js.snap
index 9a2e13142..859d650b5 100644
--- a/__tests__/pages/curriculum/__snapshots__/[lessonSlug].test.js.snap
+++ b/__tests__/pages/curriculum/__snapshots__/[lessonSlug].test.js.snap
@@ -221,9 +221,14 @@ exports[`Lesson Page Should correctly render challenges page for students who ha
             class="alerts-container  p-0"
           >
             <div
-              class="alert d-flex justify-content-between mt-3 alert alert-primary"
+              class="fade alert alert-primary alert-dismissible show"
               role="alert"
             >
+              <button
+                aria-label="Close alert"
+                class="btn-close"
+                type="button"
+              />
               <div
                 class="d-flex align-items-center gap-3"
               >
@@ -246,22 +251,16 @@ exports[`Lesson Page Should correctly render challenges page for students who ha
                   View Instructions
                 </a>
               </div>
-              <button
-                class="info_image alert-dismiss"
-                data-testid="dismiss-info"
-                role="dismiss"
-              >
-                <img
-                  height="24"
-                  src="/assets/curriculum/icons/dismiss-info.svg"
-                  width="24"
-                />
-              </button>
             </div>
             <div
-              class="alert d-flex justify-content-between mt-3 alert alert-danger"
+              class="fade alert alert-danger alert-dismissible show"
               role="alert"
             >
+              <button
+                aria-label="Close alert"
+                class="btn-close"
+                type="button"
+              />
               <div
                 class="d-flex align-items-center gap-3"
               >
@@ -277,17 +276,6 @@ exports[`Lesson Page Should correctly render challenges page for students who ha
                 Please upgrade your CLI client by running npm update c0d3. 
                 
               </div>
-              <button
-                class=" alert-dismiss"
-                data-testid="dismiss-urgent"
-                role="dismiss"
-              >
-                <img
-                  height="24"
-                  src="/assets/curriculum/icons/dismiss-urgent.svg"
-                  width="24"
-                />
-              </button>
             </div>
           </div>
           <div
@@ -933,9 +921,14 @@ exports[`Lesson Page Should render correctly with valid lesson route 1`] = `
             class="alerts-container  p-0"
           >
             <div
-              class="alert d-flex justify-content-between mt-3 alert alert-primary"
+              class="fade alert alert-primary alert-dismissible show"
               role="alert"
             >
+              <button
+                aria-label="Close alert"
+                class="btn-close"
+                type="button"
+              />
               <div
                 class="d-flex align-items-center gap-3"
               >
@@ -958,22 +951,16 @@ exports[`Lesson Page Should render correctly with valid lesson route 1`] = `
                   View Instructions
                 </a>
               </div>
-              <button
-                class="info_image alert-dismiss"
-                data-testid="dismiss-info"
-                role="dismiss"
-              >
-                <img
-                  height="24"
-                  src="/assets/curriculum/icons/dismiss-info.svg"
-                  width="24"
-                />
-              </button>
             </div>
             <div
-              class="alert d-flex justify-content-between mt-3 alert alert-danger"
+              class="fade alert alert-danger alert-dismissible show"
               role="alert"
             >
+              <button
+                aria-label="Close alert"
+                class="btn-close"
+                type="button"
+              />
               <div
                 class="d-flex align-items-center gap-3"
               >
@@ -989,17 +976,6 @@ exports[`Lesson Page Should render correctly with valid lesson route 1`] = `
                 Please upgrade your CLI client by running npm update c0d3. 
                 
               </div>
-              <button
-                class=" alert-dismiss"
-                data-testid="dismiss-urgent"
-                role="dismiss"
-              >
-                <img
-                  height="24"
-                  src="/assets/curriculum/icons/dismiss-urgent.svg"
-                  width="24"
-                />
-              </button>
             </div>
           </div>
           <div
diff --git a/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap b/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap
index 64f4d7063..6eb9444f0 100644
--- a/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap
+++ b/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap
@@ -12,9 +12,14 @@ exports[`AdminLewAlert component Should create new alert 1`] = `
         class="mb-3"
       >
         <div
-          class="alert d-flex justify-content-between mt-3 alert alert-primary"
+          class="fade alert alert-primary alert-dismissible show"
           role="alert"
         >
+          <button
+            aria-label="Close alert"
+            class="btn-close"
+            type="button"
+          />
           <div
             class="d-flex align-items-center gap-3"
           >
@@ -30,17 +35,6 @@ exports[`AdminLewAlert component Should create new alert 1`] = `
              
             
           </div>
-          <button
-            class="info_image alert-dismiss"
-            data-testid="dismiss-info"
-            role="dismiss"
-          >
-            <img
-              height="24"
-              src="/assets/curriculum/icons/dismiss-info.svg"
-              width="24"
-            />
-          </button>
         </div>
       </div>
       <div
@@ -189,9 +183,14 @@ exports[`AdminLewAlert component Should refuse creating new alert with incomplet
         class="mb-3"
       >
         <div
-          class="alert d-flex justify-content-between mt-3 alert alert-primary"
+          class="fade alert alert-primary alert-dismissible show"
           role="alert"
         >
+          <button
+            aria-label="Close alert"
+            class="btn-close"
+            type="button"
+          />
           <div
             class="d-flex align-items-center gap-3"
           >
@@ -214,17 +213,6 @@ exports[`AdminLewAlert component Should refuse creating new alert with incomplet
               caption
             </a>
           </div>
-          <button
-            class="info_image alert-dismiss"
-            data-testid="dismiss-info"
-            role="dismiss"
-          >
-            <img
-              height="24"
-              src="/assets/curriculum/icons/dismiss-info.svg"
-              width="24"
-            />
-          </button>
         </div>
       </div>
       <div

From f241daf3bc1b5b740caa785b2f6ced13bf46f552 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Wed, 24 Aug 2022 04:53:18 +0400
Subject: [PATCH 3/4] test: Create Alert test

---
 components/Alert/Alert.test.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 components/Alert/Alert.test.js

diff --git a/components/Alert/Alert.test.js b/components/Alert/Alert.test.js
new file mode 100644
index 000000000..400f7311b
--- /dev/null
+++ b/components/Alert/Alert.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Alert from '.'
+import userEvent from '@testing-library/user-event'
+
+// Imported to be able to use .toBeInTheDocument()
+import '@testing-library/jest-dom'
+
+describe('Alert component', () => {
+  it('should hide the alert on dismiss', async () => {
+    render(
+      <Alert
+        alert={{
+          id: 0,
+          text: 'Set up your computer to submit challenges.',
+          type: 'info',
+          url: 'https://www.notion.so/JS-0-Foundations-a43ca620e54945b2b620bcda5f3cf672#b45ed85a95e24c9d9fb784afb7a46bcc',
+          urlCaption: 'View Instructions'
+        }}
+        onDismiss={() => {}}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('button'))
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+})

From e4600345d51c2da652a0c30bfd04787be794cb84 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Wed, 24 Aug 2022 04:53:28 +0400
Subject: [PATCH 4/4] test: Update test cases

---
 components/AlertsDisplay/AlertsDisplay.test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/AlertsDisplay/AlertsDisplay.test.js b/components/AlertsDisplay/AlertsDisplay.test.js
index 5a29aa77b..eb7e01f0b 100644
--- a/components/AlertsDisplay/AlertsDisplay.test.js
+++ b/components/AlertsDisplay/AlertsDisplay.test.js
@@ -38,7 +38,7 @@ describe('Alerts Display Component', () => {
       <AlertsDisplay alerts={alerts} page="curriculum" />
     )
 
-    const displayedAlerts = getAllByRole('alert')
+    const displayedAlerts = getAllByRole('button')
     expect(displayedAlerts.length).toEqual(1)
   })
 
@@ -48,13 +48,13 @@ describe('Alerts Display Component', () => {
     const { getAllByRole } = render(
       <AlertsDisplay alerts={alerts} page="curriculum" />
     )
-    let displayedAlerts = getAllByRole('alert')
+    let displayedAlerts = getAllByRole('button')
     expect(displayedAlerts.length).toEqual(2)
-    const firstDismiss = getAllByRole('dismiss')[0]
+    const firstDismiss = getAllByRole('button')[0]
     act(() => {
       fireEvent.click(firstDismiss)
     })
-    displayedAlerts = getAllByRole('alert')
+    displayedAlerts = getAllByRole('button')
     expect(displayedAlerts.length).toEqual(1)
   })
 })