@madie/madie-design-system 1.2.62 → 2.0.0

package/test/components/MadieDiscardDialog.test.js

@@ -1,8 +1,7 @@
 import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
 import MadieDiscardDialog from "../../components/MadieDiscardDialog/index";
-import { act } from "react-dom/test-utils";
-import { render, fireEvent, waitFor } from "@testing-library/react";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
 
 import React, { useState } from "react";
 
@@ -26,57 +25,41 @@ const DialogTester = () => {
 };
 
 describe("MadieDiscardDialog", () => {
+    const { findByTestId, getByTestId, queryByText } = screen;
+
     test("Dialog renders", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, queryByText } = await render(
-                <DialogTester />
-            );
-            const result = await findByTestId("dialog-tester");
-            fireEvent.click(result);
-            const discardDialog = await getByTestId("discard-dialog");
-            expect(discardDialog).toBeInTheDocument();
-            await waitFor(() => {
-                expect(queryByText("You have unsaved changes.")).toBeVisible();
-            });
+        render(<DialogTester />);
+        const result = await findByTestId("dialog-tester");
+        fireEvent.click(result);
+        const discardDialog = await getByTestId("discard-dialog");
+        expect(discardDialog).toBeInTheDocument();
+        await waitFor(() => {
+            expect(queryByText("You have unsaved changes.")).toBeVisible();
         });
     });
 
     test("Dialog disappears onContinue", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, queryByText } = await render(
-                <DialogTester />
-            );
-            const result = await findByTestId("dialog-tester");
-            fireEvent.click(result);
-            const continueButton = await getByTestId(
-                "discard-dialog-continue-button"
-            );
-            expect(continueButton).toBeInTheDocument();
-            fireEvent.click(continueButton);
-            await waitFor(() => {
-                expect(
-                    queryByText("You have unsaved changes.")
-                ).not.toBeVisible();
-            });
+        render(<DialogTester />);
+        const result = await findByTestId("dialog-tester");
+        fireEvent.click(result);
+        const continueButton = await getByTestId(
+            "discard-dialog-continue-button",
+        );
+        expect(continueButton).toBeInTheDocument();
+        fireEvent.click(continueButton);
+        await waitFor(() => {
+            expect(queryByText("You have unsaved changes.")).not.toBeVisible();
         });
     });
     test("Dialog disappears onClose", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, queryByText } = await render(
-                <DialogTester />
-            );
-            const result = await findByTestId("dialog-tester");
-            fireEvent.click(result);
-            const cancelButton = await getByTestId(
-                "discard-dialog-cancel-button"
-            );
-            expect(cancelButton).toBeInTheDocument();
-            fireEvent.click(cancelButton);
-            await waitFor(() => {
-                expect(
-                    queryByText("You have unsaved changes.")
-                ).not.toBeVisible();
-            });
+        render(<DialogTester />);
+        const result = await findByTestId("dialog-tester");
+        fireEvent.click(result);
+        const cancelButton = await getByTestId("discard-dialog-cancel-button");
+        expect(cancelButton).toBeInTheDocument();
+        fireEvent.click(cancelButton);
+        await waitFor(() => {
+            expect(queryByText("You have unsaved changes.")).not.toBeVisible();
         });
     });
 });

package/test/components/MadieSpinner.test.js

@@ -2,28 +2,23 @@ import "@testing-library/jest-dom";
 import React from "react";
 import { describe, expect, test } from "@jest/globals";
 import { act } from "react-dom/test-utils";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import MadieSpinner from "../../components/MadieSpinner";
 
 describe("MadieSpinner", () => {
+    const { findByTestId } = screen;
     test("MadieSpinner exists and renders", async () => {
-        await act(async () => {
-            const { findByTestId } = render(
-                <MadieSpinner
-                    data-testid="test-spinner"
-                    thickness={8}
-                    style={{ height: 50, width: 50 }}
-                />
-            );
-            expect(await findByTestId("test-spinner")).toBeInTheDocument();
-        });
+        render(
+            <MadieSpinner
+                data-testid="test-spinner"
+                thickness={8}
+                style={{ height: 50, width: 50 }}
+            />,
+        );
+        expect(await findByTestId("test-spinner")).toBeInTheDocument();
     });
     test("MadieSpinner renders with no props", async () => {
-        await act(async () => {
-            const { findByTestId } = render(
-                <MadieSpinner data-testid="test-spinner" />
-            );
-            expect(await findByTestId("test-spinner")).toBeInTheDocument();
-        });
+        render(<MadieSpinner data-testid="test-spinner" />);
+        expect(await findByTestId("test-spinner")).toBeInTheDocument();
     });
 });

package/test/components/Modal.test.js

@@ -0,0 +1,115 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import Modal from "../../components/Modal/index.jsx";
+
+jest.mock("../../lib/SvgComponents.jsx", () => ({
+    CloseXIcon2: () => <span data-testid="close-icon">X</span>,
+}));
+
+describe("Modal", () => {
+    const defaultProps = {
+        title: "Test Modal",
+        children: <div>Modal content</div>,
+        isOpen: true,
+        onRequestClose: jest.fn(),
+        appElement: "body",
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("Does not catch fire", async () => {
+        render(<Modal {...defaultProps} />);
+        expect(screen.getByText("Test Modal")).toBeInTheDocument();
+        expect(screen.getByText("Modal content")).toBeInTheDocument();
+        expect(screen.getByTestId("modal-close-btn")).toBeInTheDocument();
+    });
+
+    it("calls onclose when button click", () => {
+        render(<Modal {...defaultProps} />);
+        fireEvent.click(screen.getByTestId("modal-close-btn"));
+        expect(defaultProps.onRequestClose).toHaveBeenCalled();
+    });
+
+    it("renders buttons", () => {
+        const primary = {
+            title: "Primary",
+            onClick: jest.fn(),
+        };
+        const secondary = {
+            title: "Secondary",
+            onClick: jest.fn(),
+        };
+
+        render(
+            <Modal {...defaultProps} primary={primary} secondary={secondary} />,
+        );
+
+        const primaryBtn = screen.getByTestId("modal-primary-btn");
+        const secondaryBtn = screen.getByTestId("modal-secondary-btn");
+
+        expect(primaryBtn).toBeInTheDocument();
+        expect(primaryBtn).toHaveTextContent("Primary");
+
+        expect(secondaryBtn).toBeInTheDocument();
+        expect(secondaryBtn).toHaveTextContent("Secondary");
+
+        fireEvent.click(primaryBtn);
+        fireEvent.click(secondaryBtn);
+
+        expect(primary.onClick).toHaveBeenCalled();
+        expect(secondary.onClick).toHaveBeenCalled();
+    });
+
+    it("falls back to onRequestClose when no onClick", () => {
+        render(<Modal {...defaultProps} secondary={{ title: "Cancel" }} />);
+        fireEvent.click(screen.getByTestId("modal-secondary-btn"));
+        expect(defaultProps.onRequestClose).toHaveBeenCalled();
+    });
+
+    it("renders with custom width when provided", () => {
+        render(<Modal {...defaultProps} width="500px" />);
+        const modalContent = document.querySelector(".qpp-c-modal__content");
+        expect(modalContent).toHaveStyle("width: 500px");
+    });
+
+    it("sets focus on close button after open", async () => {
+        render(<Modal {...defaultProps} />);
+        await waitFor(() => {
+            expect(document.activeElement).toBe(
+                screen.getByTestId("modal-close-btn"),
+            );
+        });
+    });
+
+    it("sets overflowSeparator to true when content overflows", async () => {
+        Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+            configurable: true,
+            get: () => 2000,
+        });
+
+        Object.defineProperty(document.documentElement, "clientHeight", {
+            configurable: true,
+            get: () => 1000,
+        });
+
+        render(
+            <Modal
+                isOpen={true}
+                onRequestClose={jest.fn()}
+                title="Test Modal"
+                appElement="body"
+            >
+                <div>Overflow content</div>
+            </Modal>,
+        );
+
+        await waitFor(() => {
+            const header = screen
+                .getByText("Test Modal")
+                .closest(".qpp-c-modal__header");
+            expect(header).toHaveClass("qpp-c-modal__header-sep");
+        });
+    });
+});

package/test/components/Pagination.test.js

@@ -28,7 +28,7 @@ describe("Pagination", () => {
                 }}
                 hidePrevButton={true}
                 hideNextButton={false}
-            />
+            />,
         );
         expect(getByTestId("NavigateNextIcon")).toBeInTheDocument();
     });
@@ -52,7 +52,7 @@ describe("Pagination", () => {
                 }}
                 hidePrevButton={false}
                 hideNextButton={true}
-            />
+            />,
         );
         expect(getByTestId("NavigateBeforeIcon")).toBeInTheDocument();
     });

package/test/components/RadioButton.test.js

@@ -5,7 +5,7 @@ import userEvent from "@testing-library/user-event";
 import RadioButton from "../../components/RadioButton/RadioButton";
 
 describe("RadioButton Component", () => {
-    it("renders RadioButton with options and allows selection", () => {
+    it("renders RadioButton with options and allows selection", async () => {
         const mockOnChange = jest.fn();
         const options = [
             { value: "option1", label: "Option 1" },
@@ -19,7 +19,7 @@ describe("RadioButton Component", () => {
                 label="Radio Button"
                 options={options}
                 onChange={mockOnChange}
-            />
+            />,
         );
 
         const option1 = screen.getByLabelText("Option 1");
@@ -28,7 +28,7 @@ describe("RadioButton Component", () => {
         expect(option1).toBeInTheDocument();
         expect(option2).toBeInTheDocument();
 
-        userEvent.click(option1);
+        await userEvent.click(option1);
         expect(option1).toBeChecked();
         expect(mockOnChange).toHaveBeenCalled();
     });
@@ -47,7 +47,7 @@ describe("RadioButton Component", () => {
                 options={options}
                 value="option1"
                 disabled
-            />
+            />,
         );
 
         const option1 = screen.getByRole("textbox");
@@ -62,7 +62,7 @@ describe("RadioButton Component", () => {
                 dataTestId="radio-button-helper"
                 label="Radio Button"
                 helperText="Helper text goes here"
-            />
+            />,
         );
 
         const helperText = screen.getByText("Helper text goes here");
@@ -77,7 +77,7 @@ describe("RadioButton Component", () => {
                 label="Radio Button"
                 error
                 helperText="This field is required"
-            />
+            />,
         );
 
         const errorText = screen.getByText("This field is required");
@@ -98,7 +98,7 @@ describe("RadioButton Component", () => {
                 label="Radio Button"
                 options={options}
                 disabled
-            />
+            />,
         );
 
         const readOnlyField = screen.getByRole("textbox");

package/test/components/ReadOnlyTextField.test.js

@@ -14,9 +14,11 @@ describe("ReadOnlyTextField", () => {
                 id="testName"
                 inputProps={{ "data-testid": "test-name-input" }}
                 size="small"
-            />
+            />,
         );
-        const textNode = getByRole(document.body, "textbox", { name: "test Name" });
+        const textNode = getByRole(document.body, "textbox", {
+            name: "test Name",
+        });
         expect(textNode).toBeInTheDocument();
         expect(textNode).toHaveAttribute("readOnly");
         expect(textNode).toHaveTextContent("-");

package/test/components/RichTextEditor.test.js

@@ -1,6 +1,7 @@
 import React from "react";
-import {render, screen, fireEvent, waitFor} from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import RichTextEditor from "../../components/RichTextEditor/index";
+import userEvent from "@testing-library/user-event";
 
 describe("RichTextEditor Component", () => {
     const mockOnChange = jest.fn();
@@ -13,14 +14,16 @@ describe("RichTextEditor Component", () => {
                 content="<p>Initial Content</p>"
                 onChange={mockOnChange}
                 disabled={false}
-            />
+            />,
         );
 
         // Check if the label is rendered
         expect(screen.getByText("Test Label")).toBeInTheDocument();
 
         // Check if the editor content is rendered
-        expect(screen.getByTestId("test-label-rich-text-editor")).toBeInTheDocument();
+        expect(
+            screen.getByTestId("test-label-rich-text-editor"),
+        ).toBeInTheDocument();
     });
 
     it("calls onChange when content is updated", async () => {
@@ -31,12 +34,14 @@ describe("RichTextEditor Component", () => {
                 content="Initial Content"
                 onChange={mockOnChange}
                 disabled={false}
-            />
+            />,
         );
 
         // Simulate content change
         const editorContent = screen.getByRole("textbox");
-        fireEvent.input(editorContent, {target: {innerHTML: "Updated Content"}});
+        fireEvent.input(editorContent, {
+            target: { innerHTML: "Updated Content" },
+        });
 
         // Check if onChange is called
         await waitFor(() => {
@@ -52,11 +57,90 @@ describe("RichTextEditor Component", () => {
                 content="<script>alert('XSS')</script><p>Safe Content</p>"
                 onChange={mockOnChange}
                 disabled={true}
-            />
+            />,
         );
 
         // Check if sanitized content is rendered
         expect(screen.getByText("Safe Content")).toBeInTheDocument();
         expect(screen.queryByText("alert('XSS')")).not.toBeInTheDocument();
     });
+
+    it("triggers bold", async () => {
+        const user = userEvent.setup();
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Editor"
+                onChange={mockOnChange}
+                content="<p>Initial content</p>"
+            />,
+        );
+        await user.click(screen.getByRole("button", { name: "Bold" }));
+        expect(mockOnChange).toHaveBeenCalled();
+    });
+    it("triggers Italic", async () => {
+        const user = userEvent.setup();
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Editor"
+                onChange={mockOnChange}
+                content="<p>Initial content</p>"
+            />,
+        );
+        await user.click(screen.getByRole("button", { name: "Italic" }));
+        expect(mockOnChange).toHaveBeenCalled();
+    });
+    it("triggers Underline", async () => {
+        const user = userEvent.setup();
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Editor"
+                onChange={mockOnChange}
+                content="<p>Initial content</p>"
+            />,
+        );
+        await user.click(screen.getByRole("button", { name: "Underline" }));
+        expect(mockOnChange).toHaveBeenCalled();
+    });
+    it("triggers Ordered List", async () => {
+        const user = userEvent.setup();
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Editor"
+                onChange={mockOnChange}
+                content="<p>Initial content</p>"
+            />,
+        );
+        await user.click(screen.getByRole("button", { name: "Bold" }));
+        expect(mockOnChange).toHaveBeenCalled();
+    });
+    it("triggers Bulleted List", async () => {
+        const user = userEvent.setup();
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Editor"
+                onChange={mockOnChange}
+                content="<p>Initial content</p>"
+            />,
+        );
+        await user.click(screen.getByRole("button", { name: "Bulleted List" }));
+        expect(mockOnChange).toHaveBeenCalled();
+    });
+    it("triggers Table", async () => {
+        const user = userEvent.setup();
+        render(
+            <RichTextEditor
+                id="test-editor"
+                label="Test Editor"
+                onChange={mockOnChange}
+                content="<p>Initial content</p>"
+            />,
+        );
+        await user.click(screen.getByRole("button", { name: "Table" }));
+        expect(mockOnChange).toHaveBeenCalled();
+    });
 });

package/test/components/Search.test.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Search } from "../../components";
+
+describe("Search Component", () => {
+    const defaultProps = {
+        id: "test-search",
+        name: "search",
+        placeholder: "Search something...",
+        inputValue: "initial",
+        inputAriaLabel: "Search field",
+        buttonAriaLabel: "Search button",
+        inputWidth: "300px",
+        onChange: jest.fn(),
+        onClick: jest.fn(),
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("Does not catch fire", () => {
+        render(<Search {...defaultProps} />);
+
+        const input = screen.getByRole("searchbox");
+        expect(input).toHaveAttribute("id", "test-search");
+        expect(input).toHaveAttribute("name", "search");
+        expect(input).toHaveAttribute("placeholder", "Search something...");
+        expect(input).toHaveValue("initial");
+        expect(input).toHaveStyle("width: 300px");
+        expect(input).toHaveAttribute("aria-label", "Search field");
+    });
+
+    it("calls onChange", () => {
+        render(<Search {...defaultProps} />);
+        const input = screen.getByRole("searchbox");
+
+        fireEvent.change(input, { target: { value: "new" } });
+        expect(defaultProps.onChange).toHaveBeenCalled();
+    });
+
+    it("renders the button and trigger onClick", () => {
+        render(<Search {...defaultProps} />);
+        const button = screen.getByTestId("search-btn");
+
+        expect(button).toHaveAttribute("aria-label", "Search button");
+        fireEvent.click(button);
+        expect(defaultProps.onClick).toHaveBeenCalled();
+    });
+
+    it("disables input and button when props set", () => {
+        render(
+            <Search
+                {...defaultProps}
+                disabled={true}
+                disableSearchBtn={true}
+            />,
+        );
+
+        expect(screen.getByRole("searchbox")).toBeDisabled();
+        expect(screen.getByTestId("search-btn")).toBeDisabled();
+    });
+
+    it("uses default props when none are provided", () => {
+        render(<Search />);
+        expect(screen.getByRole("searchbox")).toHaveAttribute(
+            "id",
+            "search-input",
+        );
+        expect(screen.getByTestId("search-btn")).toHaveAttribute(
+            "id",
+            "search-input-submit",
+        );
+    });
+});