Extract to a separate test (#10699)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

packages/ui/components/head-seo/head-seo.test.tsx

@@ -0,0 +1,90 @@
+import { render, waitFor } from "@testing-library/react";
+import type { NextSeoProps } from "next-seo";
+import type { OpenGraph } from "next/dist/lib/metadata/types/opengraph-types";
+import { vi } from "vitest";
+
+import type { HeadSeoProps } from "./HeadSeo";
+import HeadSeo from "./HeadSeo";
+
+vi.mock("next-seo", () => {
+  return {
+    NextSeo: (props: NextSeoProps) => {
+      const { images, ...restOpenGraph } = props.openGraph as OpenGraph & { images: Array<{ url: string }> };
+      const mockedProps = {
+        ...restOpenGraph,
+        canonical: props.canonical,
+        image: images[0].url,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any;
+      return <title {...mockedProps} />;
+    },
+  };
+});
+
+vi.mock("@calcom/lib/OgImages", async () => {
+  return {
+    constructAppImage() {
+      return "constructAppImage";
+    },
+    constructGenericImage() {
+      return "constructGenericImage";
+    },
+    constructMeetingImage() {
+      return "constructMeetingImage";
+    },
+  };
+});
+
+const basicProps = {
+  image: "image.png",
+  siteName: "calcomsite",
+  url: "calcom.com",
+  canonical: "test canonical",
+  title: "Test Title",
+  description: "Test Description",
+};
+
+describe("Tests for HeadSeo component", () => {
+  test("Should render mocked NextSeo", async () => {
+    const { container } = render(<HeadSeo {...basicProps} />);
+    await waitFor(async () => {
+      const titleEl = container.querySelector("title");
+      expect(titleEl?.getAttribute("canonical")).toEqual(basicProps.canonical);
+      expect(titleEl?.getAttribute("description")).toEqual(basicProps.description);
+      expect(titleEl?.getAttribute("site_name")).toEqual(basicProps.siteName);
+      expect(titleEl?.getAttribute("image")).toContain("constructGenericImage");
+    });
+  });
+
+  test("Should render title with brand", async () => {
+    const { container } = render(<HeadSeo {...basicProps} />);
+    await waitFor(async () => {
+      const titleEl = container.querySelector("title");
+      expect(titleEl?.getAttribute("title")).toEqual(`${basicProps.title} | Cal.com`);
+    });
+  });
+
+  test("Should render title without brand", async () => {
+    const { container } = render(<HeadSeo {...basicProps} isBrandingHidden />);
+    await waitFor(async () => {
+      const titleEl = container.querySelector("title");
+      expect(titleEl?.getAttribute("title")).toEqual(`${basicProps.title}`);
+    });
+  });
+
+  test("Should render with app props", async () => {
+    const { container } = render(<HeadSeo {...basicProps} app={{} as HeadSeoProps["app"]} />);
+    await waitFor(async () => {
+      const titleEl = container.querySelector("title");
+      expect(titleEl?.getAttribute("image")).toContain("constructAppImage");
+    });
+  });
+
+  test("Should render with meeting props", async () => {
+    const { container } = render(<HeadSeo {...basicProps} meeting={{} as HeadSeoProps["meeting"]} />);
+    await waitFor(async () => {
+      const titleEl = container.querySelector("title");
+      expect(titleEl?.getAttribute("image")).toContain("constructMeetingImage");
+    });
+  });
+});