test: add click event propagation tests

canonical · Mar 25, 2024 · 9b1b103 · 9b1b103
1 parent c8772f8
commit 9b1b103
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/src/components/ConfirmationModal/ConfirmationModal.test.tsx b/src/components/ConfirmationModal/ConfirmationModal.test.tsx
@@ -55,4 +55,73 @@ describe("ConfirmationModal ", () => {
     await userEvent.click(screen.getByText("Proceed"));
     expect(onConfirm).toHaveBeenCalled();
   });
+
+  it("should stop click event propagation on cancel by default", async () => {
+    const handleExternalClick = jest.fn();
+    render(
+      <div onClick={handleExternalClick}>
+        <ConfirmationModal
+          cancelButtonLabel="Go back"
+          confirmButtonLabel="Proceed"
+          onConfirm={jest.fn()}
+        >
+          Test click propagation
+        </ConfirmationModal>
+      </div>
+    );
+
+    await userEvent.click(screen.getByText("Go back"));
+    expect(handleExternalClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should propagate click event on cancel", async () => {
+    const handleExternalClick = jest.fn();
+    render(
+      <div onClick={handleExternalClick}>
+        <ConfirmationModal
+          cancelButtonLabel="Go back"
+          confirmButtonLabel="Proceed"
+          onConfirm={jest.fn()}
+          shouldPropagateClickEvent={true}
+        >
+          Test click propagation
+        </ConfirmationModal>
+      </div>
+    );
+
+    await userEvent.click(screen.getByText("Go back"));
+    expect(handleExternalClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should stop click event propagation on confirm by default", async () => {
+    const handleExternalClick = jest.fn();
+    render(
+      <div onClick={handleExternalClick}>
+        <ConfirmationModal confirmButtonLabel="Proceed" onConfirm={jest.fn()}>
+          Test click propagation
+        </ConfirmationModal>
+      </div>
+    );
+
+    await userEvent.click(screen.getByText("Proceed"));
+    expect(handleExternalClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should propagate click event on confirm", async () => {
+    const handleExternalClick = jest.fn();
+    render(
+      <div onClick={handleExternalClick}>
+        <ConfirmationModal
+          confirmButtonLabel="Proceed"
+          onConfirm={jest.fn()}
+          shouldPropagateClickEvent={true}
+        >
+          Test click propagation
+        </ConfirmationModal>
+      </div>
+    );
+
+    await userEvent.click(screen.getByText("Proceed"));
+    expect(handleExternalClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
@@ -139,4 +139,36 @@ describe("Modal ", () => {
     expect(mockHandleModalClose).toHaveBeenCalledTimes(1);
     expect(mockHandleEscPress).not.toHaveBeenCalled();
   });
+
+  it("should stop click event propagation on close by default", async () => {
+    const handleExternalClick = jest.fn();
+    const { container } = render(
+      <div onClick={handleExternalClick}>
+        <Modal title="Test" close={jest.fn()}>
+          Bare bones
+        </Modal>
+      </div>
+    );
+
+    const closeButton = container.querySelector("button.p-modal__close");
+    expect(closeButton).not.toBeNull();
+    await userEvent.click(closeButton!);
+    expect(handleExternalClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should propagate click event on close", async () => {
+    const handleExternalClick = jest.fn();
+    const { container } = render(
+      <div onClick={handleExternalClick}>
+        <Modal title="Test" close={jest.fn()} shouldPropagateClickEvent={true}>
+          Bare bones
+        </Modal>
+      </div>
+    );
+
+    const closeButton = container.querySelector("button.p-modal__close");
+    expect(closeButton).not.toBeNull();
+    await userEvent.click(closeButton!);
+    expect(handleExternalClick).toHaveBeenCalledTimes(1);
+  });
 });