From 2272da5ee750331030cfe3ce6112e40b2edbc6a6 Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Mon, 26 Jun 2023 18:57:24 +0530 Subject: [PATCH] test: New Booker Tests for Embed (#9666) --- .../embed-core/playwright/lib/testUtils.ts | 20 ++++--- .../playwright/tests/action-based.e2e.ts | 12 ++-- .../embed-core/playwright/tests/inline.e2e.ts | 57 ++++++++++--------- .../playwright/tests/preview.e2e.ts | 39 +++++++------ .../embed-react/playwright/tests/basic.e2e.ts | 3 +- 5 files changed, 73 insertions(+), 58 deletions(-) diff --git a/packages/embeds/embed-core/playwright/lib/testUtils.ts b/packages/embeds/embed-core/playwright/lib/testUtils.ts index ab8af19340..f5af2703e1 100644 --- a/packages/embeds/embed-core/playwright/lib/testUtils.ts +++ b/packages/embeds/embed-core/playwright/lib/testUtils.ts @@ -101,7 +101,7 @@ async function selectFirstAvailableTimeSlotNextMonth(frame: Frame, page: Page) { await frame.click('[data-testid="time"]'); } -export async function bookFirstEvent(username: string, frame: Frame, page: Page) { +export async function bookFirstEvent(username: string, frame: Frame, page: Page, bookerVariant: string) { // Click first event type on Profile Page await frame.click('[data-testid="event-type-link"]'); await frame.waitForURL((url) => { @@ -125,9 +125,11 @@ export async function bookFirstEvent(username: string, frame: Frame, page: Page) // Remove /embed from the end if present. const eventSlug = new URL(frame.url()).pathname.replace(/\/embed$/, ""); await selectFirstAvailableTimeSlotNextMonth(frame, page); - await frame.waitForURL((url) => { - return url.pathname.includes(`/${username}/book`); - }); + if (bookerVariant !== "new-booker") { + await frame.waitForURL((url) => { + return url.pathname.includes(`/${username}/book`); + }); + } // expect(await page.screenshot()).toMatchSnapshot("booking-page.png"); // --- fill form await frame.fill('[name="name"]', "Embed User"); @@ -150,11 +152,13 @@ export async function bookFirstEvent(username: string, frame: Frame, page: Page) return booking; } -export async function rescheduleEvent(username: string, frame: Frame, page: Page) { +export async function rescheduleEvent(username: string, frame: Frame, page: Page, bookerVariant: string) { await selectFirstAvailableTimeSlotNextMonth(frame, page); - await frame.waitForURL((url: { pathname: string | string[] }) => { - return url.pathname.includes(`/${username}/book`); - }); + if (bookerVariant !== "new-booker") { + await frame.waitForURL((url: { pathname: string | string[] }) => { + return url.pathname.includes(`/${username}/book`); + }); + } // --- fill form await frame.press('[name="email"]', "Enter"); await frame.click("[data-testid=confirm-reschedule-button]"); diff --git a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts index 6e3d21f703..4f5e22cffa 100644 --- a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts +++ b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts @@ -3,6 +3,7 @@ import { expect } from "@playwright/test"; import { test } from "@calcom/web/playwright/lib/fixtures"; import type { Fixtures } from "@calcom/web/playwright/lib/fixtures"; +import { testBothBookers } from "@calcom/web/playwright/lib/new-booker"; import { todo, @@ -17,10 +18,12 @@ async function bookFirstFreeUserEventThroughEmbed({ addEmbedListeners, page, getActionFiredDetails, + bookerVariant, }: { addEmbedListeners: Fixtures["addEmbedListeners"]; page: Page; getActionFiredDetails: Fixtures["getActionFiredDetails"]; + bookerVariant: string; }) { const embedButtonLocator = page.locator('[data-cal-link="free"]').first(); await page.goto("/"); @@ -40,11 +43,11 @@ async function bookFirstFreeUserEventThroughEmbed({ if (!embedIframe) { throw new Error("Embed iframe not found"); } - const booking = await bookFirstEvent("free", embedIframe, page); + const booking = await bookFirstEvent("free", embedIframe, page, bookerVariant); return booking; } -test.describe("Popup Tests", () => { +testBothBookers.describe("Popup Tests", (bookerVariant) => { test.afterEach(async () => { await deleteAllBookingsByEmail("embed-user@example.com"); }); @@ -72,7 +75,7 @@ test.describe("Popup Tests", () => { if (!embedIframe) { throw new Error("Embed iframe not found"); } - const { uid: bookingId } = await bookFirstEvent("free", embedIframe, page); + const { uid: bookingId } = await bookFirstEvent("free", embedIframe, page, bookerVariant); const booking = await getBooking(bookingId); expect(booking.attendees.length).toBe(1); @@ -85,6 +88,7 @@ test.describe("Popup Tests", () => { page, addEmbedListeners, getActionFiredDetails, + bookerVariant, }); }); @@ -97,7 +101,7 @@ test.describe("Popup Tests", () => { if (!embedIframe) { throw new Error("Embed iframe not found"); } - await rescheduleEvent("free", embedIframe, page); + await rescheduleEvent("free", embedIframe, page, bookerVariant); }); }); diff --git a/packages/embeds/embed-core/playwright/tests/inline.e2e.ts b/packages/embeds/embed-core/playwright/tests/inline.e2e.ts index da1169f670..ec3102578c 100644 --- a/packages/embeds/embed-core/playwright/tests/inline.e2e.ts +++ b/packages/embeds/embed-core/playwright/tests/inline.e2e.ts @@ -1,35 +1,38 @@ import { expect } from "@playwright/test"; import { test } from "@calcom/web/playwright/lib/fixtures"; +import { testBothBookers } from "@calcom/web/playwright/lib/new-booker"; import { bookFirstEvent, deleteAllBookingsByEmail, getEmbedIframe, todo } from "../lib/testUtils"; -test("Inline Iframe - Configured with Dark Theme", async ({ - page, - getActionFiredDetails, - addEmbedListeners, -}) => { - await deleteAllBookingsByEmail("embed-user@example.com"); - await addEmbedListeners(""); - await page.goto("/?only=ns:default"); - const calNamespace = ""; - const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" }); - expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, { - pathname: "/pro", - searchParams: { - theme: "dark", - }, +testBothBookers.describe("Inline Iframe", (bookerVariant) => { + test("Inline Iframe - Configured with Dark Theme", async ({ + page, + getActionFiredDetails, + addEmbedListeners, + }) => { + await deleteAllBookingsByEmail("embed-user@example.com"); + await addEmbedListeners(""); + await page.goto("/?only=ns:default"); + const calNamespace = ""; + const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" }); + expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, { + pathname: "/pro", + searchParams: { + theme: "dark", + }, + }); + // expect(await page.screenshot()).toMatchSnapshot("event-types-list.png"); + if (!embedIframe) { + throw new Error("Embed iframe not found"); + } + await bookFirstEvent("pro", embedIframe, page, bookerVariant); + await deleteAllBookingsByEmail("embed-user@example.com"); }); - // expect(await page.screenshot()).toMatchSnapshot("event-types-list.png"); - if (!embedIframe) { - throw new Error("Embed iframe not found"); - } - await bookFirstEvent("pro", embedIframe, page); - await deleteAllBookingsByEmail("embed-user@example.com"); + + todo( + "Ensure that on all pages - [user], [user]/[type], team/[slug], team/[slug]/book, UI styling works if these pages are directly linked in embed" + ); + + todo("Check that UI Configuration doesn't work for Free Plan"); }); - -todo( - "Ensure that on all pages - [user], [user]/[type], team/[slug], team/[slug]/book, UI styling works if these pages are directly linked in embed" -); - -todo("Check that UI Configuration doesn't work for Free Plan"); diff --git a/packages/embeds/embed-core/playwright/tests/preview.e2e.ts b/packages/embeds/embed-core/playwright/tests/preview.e2e.ts index ea21cab2ba..dbb387beab 100644 --- a/packages/embeds/embed-core/playwright/tests/preview.e2e.ts +++ b/packages/embeds/embed-core/playwright/tests/preview.e2e.ts @@ -1,25 +1,28 @@ import { expect } from "@playwright/test"; import { test } from "@calcom/web/playwright/lib/fixtures"; +import { testBothBookers } from "@calcom/web/playwright/lib/new-booker"; -test("Preview - embed-core should load", async ({ page }) => { - await page.goto("http://localhost:3000/embed/preview.html"); - const libraryLoaded = await page.evaluate(() => { - return new Promise((resolve) => { - setInterval(() => { - if ( - ( - window as unknown as { - Cal: { - __css: string; - }; - } - ).Cal.__css - ) { - resolve(true); - } - }, 1000); +testBothBookers.describe("Preview", () => { + test("Preview - embed-core should load", async ({ page }) => { + await page.goto("http://localhost:3000/embed/preview.html"); + const libraryLoaded = await page.evaluate(() => { + return new Promise((resolve) => { + setInterval(() => { + if ( + ( + window as unknown as { + Cal: { + __css: string; + }; + } + ).Cal.__css + ) { + resolve(true); + } + }, 1000); + }); }); + expect(libraryLoaded).toBe(true); }); - expect(libraryLoaded).toBe(true); }); diff --git a/packages/embeds/embed-react/playwright/tests/basic.e2e.ts b/packages/embeds/embed-react/playwright/tests/basic.e2e.ts index 8eabd97e2c..73d0f8dfe4 100644 --- a/packages/embeds/embed-react/playwright/tests/basic.e2e.ts +++ b/packages/embeds/embed-react/playwright/tests/basic.e2e.ts @@ -2,8 +2,9 @@ import { expect } from "@playwright/test"; import { getEmbedIframe } from "@calcom/embed-core/playwright/lib/testUtils"; import { test } from "@calcom/web/playwright/lib/fixtures"; +import { testBothBookers } from "@calcom/web/playwright/lib/new-booker"; -test.describe("Inline Embed", () => { +testBothBookers.describe("Inline Embed", () => { test("should verify that the iframe got created with correct URL", async ({ page, getActionFiredDetails,