@madie/madie-design-system 1.2.55 → 1.2.57

package/test/components/MadieAlert.test.js

@@ -99,7 +99,7 @@ Row: 6, Col:0: VSAC: 0:87 | Request failed with status code 404 for oid = 1.16.8
     });
     it("renders with copy button and copies text correctly with a non-array in children", async () => {
         const expectedReturn = `Following test case(s) were imported successfully, but the measure populations do not match the populations in the import file. The Test Case has been imported, but no expected values have been set.
-9ccff643-5ec1-4875-910e-4f602c174455 
+9ccff643-5ec1-4875-910e-4f602c174455
 21b8a225-7cd5-4b4b-bc08-b25100e6346c`;
         const onClose = jest.fn();
         const mockedWriteText = jest.fn();
@@ -230,28 +230,29 @@ Row: 6, Col:0: VSAC: 0:87 | Request failed with status code 404 for oid = 1.16.8
     });
 
     it("hides alert when minimize button is clicked", async () => {
-            const { getByTestId, queryByTestId } = render(
-                <MadieAlert
-                    type="warning"
-                    visible={true}
-                    canClose={false}
-                    minimizeAlerts={true}
-                    content={<h1>Test content</h1>}
-                    alertProps={{
-                        "data-testid": "alert-dialog",
-                    }}
-                />
-            );
-
-            expect(getByTestId("alert-dialog")).toBeInTheDocument();
-            const minimizeButton = getByTestId("FullscreenExitRoundedIcon");
-
-            fireEvent.click(minimizeButton);
-
-            // After clicking minimize, the alert should not be in the document
-            await waitFor(() => {
-                expect(queryByTestId("alert-dialog")).not.toBeInTheDocument();
-            });
+        const { getByTestId, queryByTestId } = render(
+            <MadieAlert
+                type="warning"
+                visible={true}
+                canClose={false}
+                minimizeAlerts={true}
+                content={<h1>Test content</h1>}
+                alertProps={{
+                    "data-testid": "alert-dialog",
+                }}
+            />
+        );
+
+        expect(getByTestId("alert-dialog")).toBeInTheDocument();
+        // Update to use the index-specific button ID
+        const minimizeButton = getByTestId("minimize-button-0");
+
+        fireEvent.click(minimizeButton);
+
+        // After clicking minimize, the alert should not be in the document
+        await waitFor(() => {
+            expect(queryByTestId("alert-dialog")).not.toBeInTheDocument();
+        });
     });
 
     it("does not render minimize button when minimizeAlerts is false", () => {
@@ -271,4 +272,292 @@ Row: 6, Col:0: VSAC: 0:87 | Request failed with status code 404 for oid = 1.16.8
         expect(getByTestId("alert-dialog")).toBeInTheDocument();
         expect(queryByTestId("FullscreenExitRoundedIcon")).toBeNull();
     });
+
+    it("renders multiple alerts using the alerts array prop", () => {
+        const { getAllByRole, queryAllByRole } = render(
+            <MadieAlert
+                minimizeAlerts={true}
+                alerts={[
+                    {
+                        type: "error",
+                        content: <h2>Error message</h2>,
+                        canClose: false
+                    },
+                    {
+                        type: "warning",
+                        content: <h2>Warning message</h2>,
+                        canClose: false
+                    }
+                ]}
+            />
+        );
+
+        // Should find two heading elements (one from each alert)
+        const headings = getAllByRole('heading', { level: 2 });
+        expect(headings).toHaveLength(2);
+        expect(headings[0]).toHaveTextContent('Error message');
+        expect(headings[1]).toHaveTextContent('Warning message');
+    });
+
+    it("minimizes individual alert when its minimize button is clicked", async () => {
+        const { getAllByTestId, queryByTestId, getByTestId } = render(
+            <MadieAlert
+                minimizeAlerts={true}
+                alerts={[
+                    {
+                        type: "error",
+                        content: <h2>Error message</h2>,
+                        alertProps: { "data-testid": "alert-dialog-1" }
+                    },
+                    {
+                        type: "warning",
+                        content: <h2>Warning message</h2>,
+                        alertProps: { "data-testid": "alert-dialog-2" }
+                    }
+                ]}
+            />
+        );
+
+        // Both alerts should be visible
+        const alerts = getAllByTestId(/alert-dialog-\d/);
+        expect(alerts).toHaveLength(2);
+        
+        // Minimize the first alert
+        const minimizeButton = getByTestId("minimize-button-0");
+        fireEvent.click(minimizeButton);
+
+        // First alert should be hidden, second alert should still be visible
+        await waitFor(() => {
+            expect(queryByTestId("alert-dialog-1")).not.toBeInTheDocument();
+            expect(queryByTestId("alert-dialog-2")).toBeInTheDocument();
+            expect(getByTestId("minimized-alert")).toBeInTheDocument();
+        });
+
+        // Now minimize the second alert
+        const minimizeButton2 = getByTestId("minimize-button-1");
+        fireEvent.click(minimizeButton2);
+
+        // Now both alerts should be hidden
+        await waitFor(() => {
+            expect(queryByTestId("alert-dialog-1")).not.toBeInTheDocument();
+            expect(queryByTestId("alert-dialog-2")).not.toBeInTheDocument();
+        });
+    });
+
+    it("restores all alerts when the minimized alert is clicked", async () => {
+        const { getAllByTestId, queryAllByTestId, getByTestId } = render(
+            <MadieAlert
+                minimizeAlerts={true}
+                alerts={[
+                    {
+                        type: "error",
+                        content: <h2>Error message</h2>,
+                        alertProps: { "data-testid": "alert-dialog-1" }
+                    },
+                    {
+                        type: "warning",
+                        content: <h2>Warning message</h2>,
+                        alertProps: { "data-testid": "alert-dialog-2" }
+                    }
+                ]}
+            />
+        );
+
+        // Minimize alerts - update to use the index-specific button ID
+        const minimizeButton = getByTestId("minimize-button-0");
+        fireEvent.click(minimizeButton);
+
+        // Wait for minimized alert to appear
+        await waitFor(() => {
+            expect(getByTestId("minimized-alert")).toBeInTheDocument();
+        });
+
+        // Click minimized alert to restore
+        const minimizedAlert = getByTestId("minimized-alert");
+        fireEvent.click(minimizedAlert);
+
+        // Both alerts should be visible again
+        await waitFor(() => {
+            const alerts = getAllByTestId(/alert-dialog-\d/);
+            expect(alerts).toHaveLength(2);
+            expect(queryAllByTestId("minimized-alert")).toHaveLength(0);
+        });
+    });
+
+    it("aggregates error counts from multiple alerts", async () => {
+        const { getByTestId, getAllByTestId } = render(
+            <MadieAlert
+                minimizeAlerts={true}
+                alerts={[
+                    {
+                        type: "error",
+                        content: (
+                            <div>
+                                <ul>
+                                    <li>Error 1</li>
+                                    <li>Error 2</li>
+                                </ul>
+                            </div>
+                        ),
+                        alertProps: { "data-testid": "alert-dialog-1" }
+                    },
+                    {
+                        type: "warning",
+                        content: (
+                            <div>
+                                <ul>
+                                    <li>Warning 1</li>
+                                </ul>
+                            </div>
+                        ),
+                        alertProps: { "data-testid": "alert-dialog-2" }
+                    }
+                ]}
+            />
+        );
+
+        // Update to use the index-specific button ID
+        const minimizeButton = getByTestId("minimize-button-0");
+        fireEvent.click(minimizeButton);
+
+        // Since only the first alert with 2 errors is minimized,
+        // check for a count of 2 instead of 3
+        await waitFor(() => {
+            expect(getByTestId("minimized-alert-text")).toHaveTextContent("Display Alerts (2)");
+        });
+
+        // Also minimize the second alert
+        const minimizeButton2 = getByTestId("minimize-button-1");
+        fireEvent.click(minimizeButton2);
+
+        // Now both alerts are minimized, check for a count of 3
+        await waitFor(() => {
+            expect(getByTestId("minimized-alert-text")).toHaveTextContent("Display Alerts (3)");
+        });
+    });
+
+    it("copies content from all alerts with copyButton enabled", async () => {
+        const mockedWriteText = jest.fn();
+        navigator.clipboard = {
+            writeText: mockedWriteText,
+        };
+
+        const { getAllByTestId } = render(
+            <MadieAlert
+                minimizeAlerts={true}
+                alerts={[
+                    {
+                        type: "error",
+                        content: (
+                            <div>
+                                <ul>
+                                    <li>Error 1</li>
+                                    <li>Error 2</li>
+                                </ul>
+                            </div>
+                        ),
+                        copyButton: true,
+                        alertProps: { "data-testid": "alert-dialog-1" }
+                    },
+                    {
+                        type: "warning",
+                        content: (
+                            <div>
+                                <ul>
+                                    <li>Warning 1</li>
+                                </ul>
+                            </div>
+                        ),
+                        copyButton: true,
+                        alertProps: { "data-testid": "alert-dialog-2" }
+                    }
+                ]}
+            />
+        );
+
+        // Get the first copy button and click it
+        const copyButtons = getAllByTestId("ContentCopyIcon");
+        expect(copyButtons).toHaveLength(2);
+        fireEvent.click(copyButtons[0]);
+
+        // Check that the combined text was copied
+        await waitFor(() => {
+            expect(mockedWriteText).toHaveBeenCalledTimes(1);
+            expect(mockedWriteText).toHaveBeenCalledWith(expect.stringContaining("Error"));
+        });
+    });
+
+    it("maintains backward compatibility with original style of alert", () => {
+        const { getByTestId } = render(
+            <MadieAlert
+                type="error"
+                visible={true}
+                canClose={false}
+                content={<h1>Old Alert</h1>}
+                alertProps={{
+                    "data-testid": "old-alert",
+                }}
+            />
+        );
+
+        expect(getByTestId("old-alert")).toBeInTheDocument();
+        expect(getByTestId("old-alert")).toHaveClass("error");
+    });
+
+    it("shows error count in minimized alert when errors are present", async () => {
+        const { getByTestId } = render(
+            <MadieAlert
+                type="warning"
+                visible={true}
+                canClose={false}
+                minimizeAlerts={true}
+                content={
+                    <div>
+                        <ul>
+                            <li>Error 1</li>
+                            <li>Error 2</li>
+                            <li>Error 3</li>
+                        </ul>
+                    </div>
+                }
+                alertProps={{
+                    "data-testid": "alert-dialog",
+                }}
+            />
+        );
+
+        // Update to use the index-specific button ID
+        const minimizeButton = getByTestId("minimize-button-0");
+        fireEvent.click(minimizeButton);
+
+        // Check for error count in minimized alert
+        await waitFor(() => {
+            expect(getByTestId("minimized-alert-text")).toHaveTextContent("Display Alerts (3)");
+        });
+    });
+
+    it("does not show error count when there are no errors", async () => {
+        const { getByTestId } = render(
+            <MadieAlert
+                type="warning"
+                visible={true}
+                canClose={false}
+                minimizeAlerts={true}
+                content={<div>Simple message with no errors</div>}
+                alertProps={{
+                    "data-testid": "alert-dialog",
+                }}
+            />
+        );
+
+        // Update to use the index-specific button ID
+        const minimizeButton = getByTestId("minimize-button-0");
+        fireEvent.click(minimizeButton);
+
+        // Check that there's no error count
+        await waitFor(() => {
+            expect(getByTestId("minimized-alert-text")).toHaveTextContent("Display Alerts");
+            expect(getByTestId("minimized-alert-text")).not.toHaveTextContent("Display Alerts (");
+        });
+    });
 });

package/test/components/MadieDeleteDialog.test.js

@@ -39,6 +39,9 @@ describe("MadieDeleteDialog", () => {
                 expect(
                     queryByText("Are you sure you want to delete ?")
                 ).toBeVisible();
+                expect(
+                    queryByText("This Action cannot be undone.")
+                ).toBeVisible();
             });
         });
     });
@@ -81,4 +84,28 @@ describe("MadieDeleteDialog", () => {
             });
         });
     });
+
+    test("Dialog has not warning text", async () => {
+        await act(async () => {
+            const { getByTestId, queryByText } = await render(
+                <MadieDeleteDialog
+                    open={true}
+                    onClose={() => setDialogOpen(false)}
+                    onContinue={() => setDialogOpen(false)}
+                    hideWarning={true}
+                />
+            );
+
+            const deleteDialog = await getByTestId("delete-dialog");
+            expect(deleteDialog).toBeInTheDocument();
+            await waitFor(() => {
+                expect(
+                    queryByText("Are you sure you want to delete ?")
+                ).toBeVisible();
+                expect(
+                    queryByText("This Action cannot be undone.")
+                ).not.toBeInTheDocument();
+            });
+        });
+    });
 });