@madie/madie-design-system 1.2.62 → 2.0.0

package/test/components/TextField.test.js

@@ -1,55 +1,46 @@
-import * as React from "react";
+import React, { act } from "react";
 import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
 import TextField from "../../components/TextField/index";
-import { act, Simulate } from "react-dom/test-utils";
-import {
-    findByTestId,
-    render,
-    fireEvent,
-    screen,
-} from "@testing-library/react";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 describe("TextField", () => {
+    const { findByTestId, getByTestId, findByText, getByText } = screen;
     test("Textfield exists, and simulates input correctly", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId } = render(
-                <TextField
-                    placeholder="test Name"
-                    required
-                    label="test Name"
-                    id="testName"
-                    inputProps={{ "data-testid": "test-name-input" }}
-                    data-testid="test-name-text-field"
-                    size="small"
-                />
-            );
-            expect(
-                await findByTestId("test-name-text-field")
-            ).toBeInTheDocument();
-            const textNode = await getByTestId("test-name-input");
-            userEvent.type(textNode, "newVal");
-            Simulate.change(textNode);
+        render(
+            <TextField
+                placeholder="test Name"
+                required
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                size="small"
+            />,
+        );
+        expect(await findByTestId("test-name-text-field")).toBeInTheDocument();
+        const textNode = await getByTestId("test-name-input");
+        userEvent.type(textNode, "newVal");
+        fireEvent.change(textNode);
+        await waitFor(() => {
             expect(textNode.value).toBe("newVal");
         });
     });
     test("Textfield renders with helper text", async () => {
-        await act(async () => {
-            const { findByText } = render(
-                <TextField
-                    placeholder="test Name"
-                    helperText="helper text"
-                    label="test Name"
-                    id="testName"
-                    inputProps={{ "data-testid": "test-name-input" }}
-                    data-testid="test-name-text-field"
-                    size="small"
-                />
-            );
-            const helperText = await findByText("helper text");
-            expect(helperText).toBeInTheDocument();
-        });
+        render(
+            <TextField
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                size="small"
+            />,
+        );
+        const helperText = await findByText("helper text");
+        expect(helperText).toBeInTheDocument();
     });
     test("renders TextField for disabled mode", async () => {
         render(
@@ -59,139 +50,129 @@ describe("TextField", () => {
                 helperText="helper text"
                 label="test Name"
                 id="testName"
-                inputProps={{"data-testid": "test-name-input"}}
+                inputProps={{ "data-testid": "test-name-input" }}
                 data-testid="test-name-text-field"
                 size="small"
                 value="test value"
-            />
+            />,
         );
         const textField = await screen.findByRole("textbox");
         expect(textField).toHaveTextContent("test value");
         expect(textField).toHaveAttribute("readOnly");
     });
     test("HelperText renders errored", async () => {
-        await act(async () => {
-            const { findByText } = render(
-                <TextField
-                    error
-                    placeholder="test Name"
-                    helperText="helper text"
-                    label="test Name"
-                    id="testName"
-                    inputProps={{ "data-testid": "test-name-input" }}
-                    data-testid="test-name-text-field"
-                    size="small"
-                />
-            );
-            const helperText = await findByText("helper text");
-            expect(helperText).toBeInTheDocument();
-        });
+        const { findByText } = render(
+            <TextField
+                error
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                size="small"
+            />,
+        );
+        const helperText = await findByText("helper text");
+        expect(helperText).toBeInTheDocument();
     });
 
     test("tooltip text renders, can be seen and removed.", async () => {
-        await act(async () => {
-            const { getByTestId, findByTestId, getByText } = render(
-                <TextField
-                    placeholder="test Name"
-                    helperText="helper text"
-                    label="test Name"
-                    id="testName"
-                    tooltipText="tooltip text"
-                    inputProps={{ "data-testid": "test-name-input" }}
-                    data-testid="test-name-text-field"
-                    size="small"
-                />
-            );
-            const tooltipTrigger = await findByTestId(
-                "testName-tooltip-button"
-            );
+        render(
+            <TextField
+                placeholder="test Name"
+                helperText="helper text"
+                label="test Name"
+                id="testName"
+                tooltipText="tooltip text"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                size="small"
+            />,
+        );
+        const tooltipTrigger = await findByTestId("testName-tooltip-button");
 
-            // click and escape
-            act(() => {
-                fireEvent.click(tooltipTrigger);
-            });
-            expect(getByText("tooltip text")).toBeInTheDocument();
-            act(() => {
-                fireEvent.keyDown(getByText(/tooltip text/i), {
-                    key: "Escape",
-                    code: "Escape",
-                    keyCode: 27,
-                    charCode: 27,
-                });
+        // click and escape
+        act(() => {
+            fireEvent.click(tooltipTrigger);
+        });
+        expect(getByText("tooltip text")).toBeInTheDocument();
+        act(() => {
+            fireEvent.keyDown(getByText(/tooltip text/i), {
+                key: "Escape",
+                code: "Escape",
+                keyCode: 27,
+                charCode: 27,
             });
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
+        });
+        expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
 
-            // enter and leave
-            act(() => {
-                fireEvent.mouseEnter(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
-            act(() => {
-                fireEvent.mouseLeave(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
+        // enter and leave
+        act(() => {
+            fireEvent.mouseEnter(getByTestId("testName-tooltip-button"));
+        });
+        expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
+        act(() => {
+            fireEvent.mouseLeave(getByTestId("testName-tooltip-button"));
+        });
+        expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
 
-            // focus, blur
-            act(() => {
-                fireEvent.focus(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
+        // focus, blur
+        act(() => {
+            fireEvent.focus(getByTestId("testName-tooltip-button"));
+        });
+        expect(getByTestId("testName-tooltip")).not.toHaveClass("hidden");
 
-            act(() => {
-                fireEvent.blur(getByTestId("testName-tooltip-button"));
-            });
-            expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
+        act(() => {
+            fireEvent.blur(getByTestId("testName-tooltip-button"));
         });
+        expect(getByTestId("testName-tooltip")).toHaveClass("hidden");
     });
 
     test("Textfield has different color for label", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId } = render(
-                <TextField
-                    placeholder="test Name"
-                    required
-                    label="test Name"
-                    labelColor={"#1976d2"}
-                    id="testName"
-                    inputProps={{ "data-testid": "test-name-input" }}
-                    data-testid="test-name-text-field"
-                    size="small"
-                />
-            );
-            screen.debug(undefined, 60000);
-            expect(
-                await findByTestId("test-name-text-field")
-            ).toBeInTheDocument();
-            const textNode = await getByTestId("test-name-input");
-            userEvent.type(textNode, "newVal");
-            Simulate.change(textNode);
+        render(
+            <TextField
+                placeholder="test Name"
+                required
+                label="test Name"
+                labelColor={"#1976d2"}
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                size="small"
+            />,
+        );
+        screen.debug(undefined, 60000);
+        expect(await findByTestId("test-name-text-field")).toBeInTheDocument();
+        const textNode = await getByTestId("test-name-input");
+        userEvent.type(textNode, "newVal");
+        fireEvent.change(textNode);
+        await waitFor(() => {
             expect(textNode.value).toBe("newVal");
         });
     });
 
     test("Max Length renders", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, findByText } = render(
-                <TextField
-                    placeholder="test Name"
-                    required
-                    label="test Name"
-                    id="testName"
-                    inputProps={{ "data-testid": "test-name-input" }}
-                    data-testid="test-name-text-field"
-                    size="small"
-                    maxLength={10}
-                />
-            );
-            expect(
-                await findByTestId("test-name-text-field")
-            ).toBeInTheDocument();
-            const textNode = await getByTestId("test-name-input");
-            userEvent.type(textNode, "newVal");
-            Simulate.change(textNode);
+        render(
+            <TextField
+                placeholder="test Name"
+                required
+                label="test Name"
+                id="testName"
+                inputProps={{ "data-testid": "test-name-input" }}
+                data-testid="test-name-text-field"
+                size="small"
+                maxLength={10}
+            />,
+        );
+        expect(await findByTestId("test-name-text-field")).toBeInTheDocument();
+        const textNode = await getByTestId("test-name-input");
+        userEvent.type(textNode, "newVal");
+        fireEvent.change(textNode);
+        await waitFor(() => {
             expect(textNode.value).toBe("newVal");
-            const maxLength = await findByText("/10 Characters");
-            expect(maxLength).toBeInTheDocument();
         });
+        const maxLength = await findByText("/10 Characters");
+        expect(maxLength).toBeInTheDocument();
     });
 });

package/test/components/Toast.test.js

@@ -1,8 +1,7 @@
 import "@testing-library/jest-dom";
 import { describe, expect, test } from "@jest/globals";
 import Toast from "../../components/Toast/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";
 
@@ -20,105 +19,95 @@ const ToastTester = (toastProps) => {
                 open={toastOpen}
                 onClose={() => setToastOpen(false)}
                 {...toastProps}
+                autoHideDuration={500}
             />
         </div>
     );
 };
 
 describe("Toast", () => {
+    const { getByTestId, findByTestId, queryByText } = screen;
     test("Danger toast renders correctly and disappears", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, queryByText } = await render(
-                <ToastTester
-                    toastKey="toast-key"
-                    testId="danger-toast"
-                    toastType="danger"
-                    autoHideDuration={1000}
-                    message="Something has gone wrong. Please try again"
-                />
-            );
-            const result = await findByTestId("toast-tester");
-            fireEvent.click(result);
-            const dangerToast = await getByTestId("danger-toast");
-            expect(dangerToast).toBeInTheDocument();
-            await waitFor(() => {
-                expect(
-                    queryByText("Something has gone wrong. Please try again")
-                ).not.toBeVisible();
-            });
+        render(
+            <ToastTester
+                toastKey="toast-key"
+                testId="danger-toast"
+                toastType="danger"
+                autoHideDuration={1000}
+                message="Something has gone wrong. Please try again"
+            />,
+        );
+        const result = await findByTestId("toast-tester");
+        fireEvent.click(result);
+        const dangerToast = await getByTestId("danger-toast");
+        expect(dangerToast).toBeInTheDocument();
+        await waitFor(() => {
+            expect(
+                queryByText("Something has gone wrong. Please try again"),
+            ).not.toBeVisible();
         });
     });
 
     test("Success toast renders correctly and disappears", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, queryByText } = await render(
-                <ToastTester
-                    toastKey="toast-key"
-                    testId="success-toast"
-                    toastType="success"
-                    autoHideDuration={1000}
-                    message="Something has completed"
-                />
-            );
-            const result = await findByTestId("toast-tester");
-            fireEvent.click(result);
-            const dangerToast = await getByTestId("success-toast");
-            expect(dangerToast).toBeInTheDocument();
-            await waitFor(() => {
-                expect(
-                    queryByText("Something has completed")
-                ).not.toBeVisible();
-            });
+        render(
+            <ToastTester
+                toastKey="toast-key"
+                testId="success-toast"
+                toastType="success"
+                autoHideDuration={1000}
+                message="Something has completed"
+            />,
+        );
+        const result = await findByTestId("toast-tester");
+        fireEvent.click(result);
+        const dangerToast = await getByTestId("success-toast");
+        expect(dangerToast).toBeInTheDocument();
+        await waitFor(() => {
+            expect(queryByText("Something has completed")).not.toBeVisible();
         });
     });
 
     test("Info toast renders correctly and disappears", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, queryByText } = await render(
-                <ToastTester
-                    toastKey="toast-key"
-                    testId="info-toast"
-                    toastType="info"
-                    autoHideDuration={1000}
-                    message="Something has completed"
-                />
-            );
-            const result = await findByTestId("toast-tester");
-            fireEvent.click(result);
-            const dangerToast = await getByTestId("info-toast");
-            expect(dangerToast).toBeInTheDocument();
-            await waitFor(() => {
-                expect(
-                    queryByText("Something has completed")
-                ).not.toBeVisible();
-            });
+        render(
+            <ToastTester
+                toastKey="toast-key"
+                testId="info-toast"
+                toastType="info"
+                autoHideDuration={1000}
+                message="Something has completed"
+            />,
+        );
+        const result = await findByTestId("toast-tester");
+        fireEvent.click(result);
+        const dangerToast = await getByTestId("info-toast");
+        expect(dangerToast).toBeInTheDocument();
+        await waitFor(() => {
+            expect(queryByText("Something has completed")).not.toBeVisible();
         });
     });
 
     test("Warning toast renders correctly and disappears", async () => {
-        await act(async () => {
-            const { findByTestId, getByTestId, queryByText } = await render(
-                <ToastTester
-                    toastKey="toast-key"
-                    testId="warning-toast"
-                    toastType="warning"
-                    autoHideDuration={1000}
-                    message="Something went wrong"
-                />
-            );
-            const result = await findByTestId("toast-tester");
-            fireEvent.click(result);
-            const dangerToast = await getByTestId("warning-toast");
-            expect(dangerToast).toBeInTheDocument();
-            await waitFor(() => {
-                expect(queryByText("Something went wrong")).not.toBeVisible();
-            });
+        render(
+            <ToastTester
+                toastKey="toast-key"
+                testId="warning-toast"
+                toastType="warning"
+                autoHideDuration={1000}
+                message="Something went wrong"
+            />,
+        );
+        const result = await findByTestId("toast-tester");
+        fireEvent.click(result);
+        const dangerToast = await getByTestId("warning-toast");
+        expect(dangerToast).toBeInTheDocument();
+        await waitFor(() => {
+            expect(queryByText("Something went wrong")).not.toBeVisible();
         });
     });
 
     it("It renders as expected with basic props and triggers on Close on click", async () => {
         const onClose = jest.fn();
-        const { findByTestId, getByTestId } = await render(
+        render(
             <Toast
                 testId="test-toast"
                 message="Something went wrong"
@@ -126,7 +115,7 @@ describe("Toast", () => {
                 closeButtonProps={{
                     "data-testid": "close-button",
                 }}
-            />
+            />,
         );
 
         expect(getByTestId("test-toast")).toBeInTheDocument();

package/test/components/TruncateText.test.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TruncateText } from "../../components";
+
+describe("TruncateText", () => {
+    const longText =
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+        "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+
+    const shortText = "Short text";
+
+    it("returns null when text is empty", () => {
+        const { container } = render(
+            <TruncateText text="" dataTestId="test" />,
+        );
+        expect(container.firstChild).toBeNull();
+    });
+
+    it("returns null when text is only whitespace", () => {
+        const { container } = render(
+            <TruncateText text="   " dataTestId="test" />,
+        );
+        expect(container.firstChild).toBeNull();
+    });
+
+    it("renders full text when shorter than maxLength", () => {
+        render(
+            <TruncateText text={shortText} maxLength={20} dataTestId="test" />,
+        );
+        expect(screen.getByTestId("test-content")).toHaveTextContent(shortText);
+        expect(screen.queryByTestId("test-toggle-button")).toBeNull();
+    });
+
+    it("renders truncated text and handles on click", () => {
+        render(
+            <TruncateText text={longText} maxLength={20} dataTestId="test" />,
+        );
+
+        const content = screen.getByTestId("test-content");
+        expect(content).toBeInTheDocument();
+        expect(content).toHaveTextContent(longText.slice(0, 20));
+
+        const toggleBtn = screen.getByTestId("test-toggle-button");
+        expect(toggleBtn).toBeInTheDocument();
+        expect(toggleBtn).toHaveTextContent("Show more");
+
+        fireEvent.click(toggleBtn);
+
+        expect(screen.getByTestId("test-content")).toHaveTextContent(longText);
+        expect(screen.getByTestId("test-toggle-button")).toHaveTextContent(
+            "Show less",
+        );
+
+        fireEvent.click(toggleBtn);
+
+        expect(screen.getByTestId("test-content")).toHaveTextContent(
+            longText.slice(0, 20),
+        );
+        expect(screen.getByTestId("test-toggle-button")).toHaveTextContent(
+            "Show more",
+        );
+    });
+
+    it("applies custom fontSize", () => {
+        render(
+            <TruncateText
+                text={shortText}
+                dataTestId="font-test"
+                fontSize="2rem"
+            />,
+        );
+        const content = screen.getByTestId("font-test-content");
+        expect(content).toHaveStyle("font-size: 2rem");
+    });
+});

package/test/components/index.test.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import "@testing-library/jest-dom";
+import { describe, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import QppStyleComponents from "../../index";
+
+describe("QppStyleComponents. Should be unused it's not hosted and meant only to be used with storybook.", () => {
+    describe("errorPage", () => {
+        it("renders the error page with the correct text and test ID", () => {
+            const Wrapper = () => QppStyleComponents.errorPage({});
+            render(<Wrapper />);
+            expect(screen.getByTestId("error-page")).toBeInTheDocument();
+        });
+    });
+
+    describe("footer", () => {
+        it("renders the unused footer div with the correct test ID", () => {
+            render(QppStyleComponents.footer());
+            const footer = screen.getByTestId("unused");
+            expect(footer).toBeInTheDocument();
+        });
+    });
+});

package/webpack.config.js

@@ -2,7 +2,6 @@ const path = require("path");
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
-const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 const pkg = require("./package.json");
 const entry = ["./index.js"];

package/.eslintignore

@@ -1,5 +0,0 @@
-_*
-css
-dist
-node_modules
-test