Global alert

src/alertContext/__tests__/AlertContext.test.js

@@ -5,14 +5,19 @@
  * See /LICENSE for more information.
  */
 
-import React, { useContext } from "react";
+import React from "react";
 import { render, getByText, queryByText, fireEvent } from "customTestRender";
 
-import { AlertContext, AlertContextProvider } from "../AlertContext";
+import { useAlert, AlertContextProvider } from "../AlertContext";
 
 function AlertTest() {
-    const setAlert = useContext(AlertContext);
-    return <button onClick={() => setAlert("Alert content")}>Set alert</button>;
+    const [setAlert, dismissAlert] = useAlert();
+    return (
+        <>
+            <button onClick={() => setAlert("Alert content")}>Set alert</button>
+            <button onClick={dismissAlert}>Dismiss alert</button>
+        </>
+    );
 };
 
 describe("AlertContext", () => {
@@ -36,7 +41,7 @@ describe("AlertContext", () => {
         expect(componentContainer).toMatchSnapshot();
     });
 
-    it("should dismiss alert", () => {
+    it("should dismiss alert with alert button", () => {
         fireEvent.click(getByText(componentContainer, "Set alert"));
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
@@ -45,4 +50,14 @@ describe("AlertContext", () => {
         // Alert is gone
         expect(queryByText(componentContainer, "Alert content")).toBeNull();
     });
+
+    it("should dismiss alert with external button", () => {
+        fireEvent.click(getByText(componentContainer, "Set alert"));
+        // Alert is present
+        expect(getByText(componentContainer, "Alert content")).toBeDefined();
+
+        fireEvent.click(getByText(componentContainer, "Dismiss alert"));
+        // Alert is gone
+        expect(queryByText(componentContainer, "Alert content")).toBeNull();
+    });
 });

src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -3,7 +3,7 @@
 exports[`AlertContext should render alert 1`] = `
 <div>
   <div
-    class="alert alert-dismissible alert-danger"
+    class="alert alert-dismissible alert-danger fixed-top floating-alert"
   >
     <button
       class="close"
@@ -16,6 +16,9 @@ exports[`AlertContext should render alert 1`] = `
   <button>
     Set alert
   </button>
+  <button>
+    Dismiss alert
+  </button>
 </div>
 `;
 
@@ -24,5 +27,8 @@ exports[`AlertContext should render component without alert 1`] = `
   <button>
     Set alert
   </button>
+  <button>
+    Dismiss alert
+  </button>
 </div>
 `;