91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
|
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");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|