From c8beb6fba066aa72a0e143e93bb4a6ecc56736ec Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Wed, 2 Aug 2023 07:11:37 +0100
Subject: [PATCH] test: Create unit tests for react components in
 packages/ui/components/scrollable (#10489)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 .../components/scrollable/ScrollableArea.tsx  |  2 +-
 .../scrollable/scrollablearea.test.tsx        | 48 +++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/components/scrollable/scrollablearea.test.tsx

diff --git a/packages/ui/components/scrollable/ScrollableArea.tsx b/packages/ui/components/scrollable/ScrollableArea.tsx
index 941e254cf2..1e1306e2bb 100644
--- a/packages/ui/components/scrollable/ScrollableArea.tsx
+++ b/packages/ui/components/scrollable/ScrollableArea.tsx
@@ -35,7 +35,7 @@ const ScrollableArea = ({ children, className }: PropsWithChildren<{ className?:
         className // Pass in your max-w / max-h
       )}>
       {children}
-      {isOverflowingY && <div style={overflowIndicatorStyles} />}
+      {isOverflowingY && <div style={overflowIndicatorStyles} data-testid="overflow-indicator" />}
     </div>
   );
 };
diff --git a/packages/ui/components/scrollable/scrollablearea.test.tsx b/packages/ui/components/scrollable/scrollablearea.test.tsx
new file mode 100644
index 0000000000..73071a6092
--- /dev/null
+++ b/packages/ui/components/scrollable/scrollablearea.test.tsx
@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { ScrollableArea } from "./ScrollableArea";
+
+describe("Tests for ScrollableArea Component", () => {
+  const toJSONMock = vi.fn();
+  test("Should render children inside the scrollable area", () => {
+    const { getByText } = render(
+      <ScrollableArea>
+        <div>Child 1</div>
+        <div>Child 2</div>
+      </ScrollableArea>
+    );
+
+    expect(getByText("Child 1")).toBeInTheDocument();
+    expect(getByText("Child 2")).toBeInTheDocument();
+  });
+
+  test("Shouldn't show the overflow indicator when content does not overflow vertically", () => {
+    const mockScrollHeight = 50;
+
+    const { queryByTestId } = render(
+      <ScrollableArea>
+        <div style={{ height: `${mockScrollHeight}px` }}>Non-Overflowing Content</div>
+      </ScrollableArea>
+    );
+
+    expect(queryByTestId("overflow-indicator")).not.toBeInTheDocument();
+  });
+
+  test("Should show the overflow indicator when content overflows vertically", () => {
+    const mockScrollHeight = 100;
+
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {
+      value: mockScrollHeight,
+      writable: true,
+    });
+
+    const { getByTestId } = render(
+      <ScrollableArea>
+        <div>Overflowing Content</div>
+      </ScrollableArea>
+    );
+
+    expect(getByTestId("overflow-indicator")).toBeInTheDocument();
+  });
+});