test: added export dialog tests and update button tests

src/components/Button.jsx

@@ -9,16 +9,15 @@ export const Button = props => {
         "o-70 cursor-not-allowed": props.disabled,
         "w-full": props.fullWidth,
     });
-
     return (
-        <div className={classList} onClick={props.onClick} style={props.style}>
+        <div data-testid={props.testid} className={classList} onClick={props.onClick} style={props.style}>
             {!!props.icon && (
-                <div className={classNames(props.iconClassName, "flex items-center")} data-test="icon">
+                <div className={classNames(props.iconClassName, "flex items-center")} data-testid="btn-icon">
                     {props.icon}
                 </div>
             )}
             {!!props.text && (
-                <div className={props.textClassName} data-test="text">
+                <div className={props.textClassName} data-testid="btn-text">
                     {props.text}
                 </div>
             )}
@@ -27,6 +26,7 @@ export const Button = props => {
 };
 
 Button.defaultProps = {
+    testid: "btn",
     className: "",
     text: "",
     textClassName: "",
@@ -40,6 +40,7 @@ Button.defaultProps = {
 
 export const PrimaryButton = props => (
     <Button
+        testid="btn-primary"
         className="bg-gray-800 hover:bg-gray-900 text-white"
         textClassName="text-sm"
         iconClassName="text-xl"
@@ -49,6 +50,7 @@ export const PrimaryButton = props => (
 
 export const SecondaryButton = props => (
     <Button
+        testid="btn-secondary"
         className="bg-white hover:bg-gray-100 border border-gray-300"
         textClassName="text-sm"
         iconClassName="text-xl"

src/components/Button.test.jsx

@@ -1,18 +1,34 @@
-import TestRenderer from "react-test-renderer";
+import {fireEvent, render, screen, act} from "@testing-library/react";
 import {Button} from "./Button.jsx";
 
 describe("Button", () => {
     it("should render", () => {
-        const testRenderer = TestRenderer.create(<Button />);
+        render(<Button />);
+        expect(screen.getByTestId("btn")).toBeDefined();
+    });
+
+    it("should render button text if provided", () => {
+        render(<Button text="BTN_TEXT" />);
+        expect(screen.getByTestId("btn-text").textContent).toEqual("BTN_TEXT");
+    });
+
+    it("should render button icon if provided", () => {
+        render(<Button icon="BTN_ICON" />);
+        expect(screen.getByTestId("btn-icon").textContent).toEqual("BTN_ICON");
+    });
 
-        expect(testRenderer.toJSON()).toMatchSnapshot();
+    it("should do not render button text container if no text is provided", () => {
+        render(<Button />);
+        expect(screen.queryByTestId("btn-text")).toBeNull();
     });
 
-    it("should render button text and icon", () => {
-        const testRenderer = TestRenderer.create(<Button text="TEXT" icon="ICON" />);
-        const testInstance = testRenderer.root;
+    it("should execute the provided function on click", () => {
+        const handleClick = jest.fn();
 
-        expect(testInstance.findByProps({"data-test":"icon"}).children[0]).toBe("ICON");
-        expect(testInstance.findByProps({"data-test":"text"}).children[0]).toBe("TEXT");
+        render(<Button onClick={handleClick} />);
+        act(() => {
+            fireEvent.click(screen.getByTestId("btn"));
+        });
+        expect(handleClick).toHaveBeenCalled();
     });
 });

src/components/ExportDialog.test.jsx

@@ -0,0 +1,93 @@
+import {fireEvent, render, screen, act, waitFor} from "@testing-library/react";
+import {ExportDialog} from "./ExportDialog.jsx";
+
+jest.mock("../contexts/BoardContext.jsx", () => ({
+    useBoard: jest.fn(() => ({
+        elements: [],
+    })),
+}));
+jest.mock("../export.js", () => ({
+    exportToDataURL: jest.fn(() => Promise.resolve("DATA_URL")),
+    exportToFile: jest.fn(),
+    exportToClipboard: jest.fn(),
+}));
+jest.mock("../assets/transparent.svg", () => "TRANSPARENT_BG");
+jest.mock("./Modal.jsx", () => ({
+    Modal: props => props.children,
+}));
+// Mock the button component to make it simple
+jest.mock("./Button.jsx", () => ({
+    SecondaryButton: props => (
+        <div data-testid={props.testid} onClick={props.onClick}>
+            {props.text}
+        </div>
+    ),
+}));
+
+describe("ExportDialog", () => {
+    it("should render", async () => {
+        render(<ExportDialog />);
+        // Hack to prevent 'act' warning
+        // https://davidwcai.medium.com/react-testing-library-and-the-not-wrapped-in-act-errors-491a5629193b
+        await waitFor(() => {
+            return expect(screen.getByTestId("export-preview")).toBeDefined();
+        });
+    });
+
+    it("should close export dialog when clicking on X icon", async () => {
+        const onClose = jest.fn();
+        render(<ExportDialog onClose={onClose} />);
+        await waitFor(() => {
+            return expect(screen.getByTestId("export-close")).toBeDefined();
+        });
+        // Fire click on close button
+        act(() => {
+            fireEvent.click(screen.getByTestId("export-close"));
+        });
+        // Expect 'onClose'  to have been called
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it("should render preview image", async () => {
+        render(<ExportDialog />);
+        expect(screen.getByText("Generating preview...")).toBeDefined();
+
+        // After preview is generated, it should be displayed in the preview section
+        await waitFor(() => {
+            return expect(screen.getByTestId("export-preview-image").getAttribute("src")).toEqual("DATA_URL");
+        });
+    });
+
+    it("should change text in clipboard button when clicked", async () => {
+        render(<ExportDialog />);
+        await waitFor(() => {
+            expect(screen.getByTestId("export-btn-clipboard")).toBeDefined();
+            expect(screen.getByTestId("export-btn-clipboard").textContent).toEqual("Copy to clipboard");
+        });
+        // Fire click event in copy to clipboard button
+        act(() => {
+            fireEvent.click(screen.getByTestId("export-btn-clipboard"));
+        });
+        await waitFor(() => {
+            return expect(screen.getByTestId("export-btn-clipboard").textContent).toEqual("Copied!");
+        });
+    });
+
+    it("should reset text in clipboard button after the specified delay", async () => {
+        render(<ExportDialog copiedToClipboardMessageDelay={500} />);
+        await waitFor(() => {
+            expect(screen.getByTestId("export-btn-clipboard")).toBeDefined();
+            expect(screen.getByTestId("export-btn-clipboard").textContent).toEqual("Copy to clipboard");
+        });
+        // Fire click event in copy to clipboard button
+        act(() => {
+            fireEvent.click(screen.getByTestId("export-btn-clipboard"));
+        });
+        await waitFor(() => {
+            return expect(screen.getByTestId("export-btn-clipboard").textContent).toEqual("Copied!");
+        });
+        await waitFor(() => {
+            return expect(screen.getByTestId("export-btn-clipboard").textContent).toEqual("Copy to clipboard");
+        });
+    });
+});