calendar/packages/embeds/embed-react/playwright/tests/basic.e2e.ts

import { expect } from "@playwright/test";

import { getEmbedIframe } from "@calcom/embed-core/playwright/lib/testUtils";
import { test } from "@calcom/web/playwright/lib/fixtures";

test.describe("React Embed", () => {
  test.describe("Inline", () => {
    test("should verify that the iframe got created with correct URL - namespaced", async ({
      page,
      embeds,
    }) => {
      const calNamespace = "inline";
      await embeds.gotoPlayground({ url: "/inline.html", calNamespace });
      const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
      expect(embedIframe).toBeEmbedCalLink("", embeds.getActionFiredDetails, {
        pathname: "/pro",
        searchParams: {
          theme: "dark",
        },
      });
      // expect(await page.screenshot()).toMatchSnapshot("react-component-inline.png");
    });
  });

  test.describe("Floating button Popup", () => {
    test("should verify that the iframe got created with correct URL - namespaced", async ({
      page,
      embeds,
    }) => {
      const calNamespace = "floating";
      await page.waitForLoadState();
      await embeds.gotoPlayground({ url: "/floating.html", calNamespace });

      await page.click("text=Book my Cal");

      const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
      expect(embedIframe).toBeEmbedCalLink(calNamespace, embeds.getActionFiredDetails, {
        pathname: "/pro",
        searchParams: {
          theme: "dark",
        },
      });
    });
  });

  test.describe("Element Click Popup", () => {
    test("should verify that the iframe got created with correct URL - namespaced", async ({
      page,
      embeds,
    }) => {
      const calNamespace = "element-click";
      await embeds.gotoPlayground({ url: "/element-click.html", calNamespace });
      await page.waitForLoadState();
      await page.click("text=Click me");

      const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
      expect(embedIframe).toBeEmbedCalLink(calNamespace, embeds.getActionFiredDetails, {
        pathname: "/pro",
        searchParams: {
          theme: "dark",
        },
      });
    });
  });
});