From 65384d7b1fd57ed6f8000e3af751da969d4b8f55 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Mon, 31 Jul 2023 07:37:21 +0100
Subject: [PATCH] test: Create unit tests for react components in
 packages/ui/components/layout (#10458)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 .../layout/shellSubHeading.test.tsx           | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 packages/ui/components/layout/shellSubHeading.test.tsx

diff --git a/packages/ui/components/layout/shellSubHeading.test.tsx b/packages/ui/components/layout/shellSubHeading.test.tsx
new file mode 100644
index 0000000000..f695d6d23e
--- /dev/null
+++ b/packages/ui/components/layout/shellSubHeading.test.tsx
@@ -0,0 +1,37 @@
+import { render, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { ShellSubHeading } from "./ShellSubHeading";
+
+const titleText = "Main Title";
+const subtitleText = "Subtitle Text";
+const buttonText = "Click Me";
+
+describe("Tests for ShellSubHeading Component", () => {
+  test("Should render correctly the component with title and subtitle if the prop was passed", () => {
+    const { getByText, queryByText, rerender } = render(
+      <ShellSubHeading title={titleText} subtitle={subtitleText} />
+    );
+
+    expect(getByText(titleText)).toBeInTheDocument();
+    expect(getByText(subtitleText)).toBeInTheDocument();
+
+    rerender(<ShellSubHeading title={titleText} />);
+
+    expect(getByText(titleText)).toBeInTheDocument();
+    expect(queryByText(subtitleText)).toBeNull();
+  });
+
+  test("Should render the component with actions and verifies if the button was clicked", () => {
+    const mockClickHandler = vi.fn();
+
+    const { getByText } = render(
+      <ShellSubHeading title={titleText} actions={<button onClick={mockClickHandler}>{buttonText}</button>} />
+    );
+
+    const button = getByText(buttonText);
+    fireEvent.click(button);
+
+    expect(mockClickHandler).toHaveBeenCalled();
+  });
+});