fix: Embed theme not working using Embed API (#10163)
## What does this PR do? Fixes #10187 See [Tests Done](https://www.loom.com/share/f03e0191b60143d8b45a505042dbfa11) ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How should this be tested? - [x] Configure embed to use `dark` theme and verify that dark theme is shown on event booking page(when user has light theme set). This is failing in main - Additional Tests for embed to avoid any new regression - [x] - Configure "auto" theme using embed API and see it reacts to system theme - [x] - Don't configure any theme and see that "light" theme is shown even when we switch system theme(Because User has configured light theme in App) - Tests outside embed to avoid any new regression - [x] - See that light theme is shown even after switching system theme - [x] - Now, switch the user theme to dark and see that it reflects the change. ## Mandatory Tasks [x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
This commit is contained in:
Hariom Balhara authored and 
GitHub committed
1 parent
2db4998eaa
commit
6dfc19247e
13 files changed
+173
-82
No files matched your search
@@ -8,6 +8,16 @@ const callback = function (e) {
|
||||
|
||||
const searchParams = new URL(document.URL).searchParams;
|
||||
const only = searchParams.get("only");
|
||||
const themeInParam = searchParams.get("theme");
|
||||
const validThemes = ["light", "dark", "auto"] as const;
|
||||
const theme = validThemes.includes((themeInParam as (typeof validThemes)[number]) || "")
|
||||
? (themeInParam as (typeof validThemes)[number])
|
||||
: null;
|
||||
if (themeInParam && !theme) {
|
||||
throw new Error(`Invalid theme: ${themeInParam}`);
|
||||
}
|
||||
|
||||
const calLink = searchParams.get("cal-link");
|
||||
|
||||
if (only === "all" || only === "ns:default") {
|
||||
Cal("init", {
|
||||
@@ -331,7 +341,7 @@ Cal("init", "routingFormDark", {
|
||||
|
||||
if (only === "all" || only == "ns:floatingButton") {
|
||||
Cal.ns.floatingButton("floatingButton", {
|
||||
calLink: "pro",
|
||||
calLink: calLink || "pro",
|
||||
config: {
|
||||
iframeAttrs: {
|
||||
id: "floatingtest",
|
||||
@@ -340,7 +350,7 @@ if (only === "all" || only == "ns:floatingButton") {
|
||||
email: "johndoe@gmail.com",
|
||||
notes: "Test Meeting",
|
||||
guests: ["janedoe@example.com", "test@example.com"],
|
||||
theme: "dark",
|
||||
...(theme ? { theme } : {}),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -44,6 +44,7 @@ async function bookFirstFreeUserEventThroughEmbed({
|
||||
return booking;
|
||||
}
|
||||
|
||||
//TODO: Change these tests to use a user/eventType per embed type atleast. This is so that we can test different themes,layouts configured in App or per EventType
|
||||
test.describe("Popup Tests", () => {
|
||||
test.afterEach(async () => {
|
||||
await deleteAllBookingsByEmail("embed-user@example.com");
|
||||
@@ -102,56 +103,6 @@ test.describe("Popup Tests", () => {
|
||||
});
|
||||
});
|
||||
|
||||
test("should open embed iframe on floating button clicked", async ({
|
||||
page,
|
||||
addEmbedListeners,
|
||||
getActionFiredDetails,
|
||||
}) => {
|
||||
const calNamespace = "floatingButton";
|
||||
await addEmbedListeners(calNamespace);
|
||||
await page.goto("/?only=ns:floatingButton");
|
||||
|
||||
await page.click('[data-cal-namespace="floatingButton"] > button');
|
||||
|
||||
const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
|
||||
await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
|
||||
pathname: "/pro",
|
||||
});
|
||||
|
||||
if (!embedIframe) {
|
||||
throw new Error("Embed iframe not found");
|
||||
}
|
||||
|
||||
const { uid: bookingId } = await bookFirstEvent("pro", embedIframe, page);
|
||||
const booking = await getBooking(bookingId);
|
||||
|
||||
expect(booking.attendees.length).toBe(3);
|
||||
});
|
||||
|
||||
test("should open embed iframe with dark theme on floating button clicked", async ({
|
||||
page,
|
||||
addEmbedListeners,
|
||||
getActionFiredDetails,
|
||||
}) => {
|
||||
const calNamespace = "floatingButton";
|
||||
await addEmbedListeners(calNamespace);
|
||||
await page.goto("/?only=ns:floatingButton");
|
||||
|
||||
await page.click('[data-cal-namespace="floatingButton"] > button');
|
||||
|
||||
const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
|
||||
await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
|
||||
pathname: "/pro",
|
||||
});
|
||||
|
||||
if (!embedIframe) {
|
||||
throw new Error("Embed iframe not found");
|
||||
}
|
||||
|
||||
const html = embedIframe.locator("html");
|
||||
await expect(html).toHaveAttribute("class", "dark");
|
||||
});
|
||||
|
||||
todo("Add snapshot test for embed iframe");
|
||||
|
||||
test("should open Routing Forms embed on click", async ({
|
||||
@@ -186,4 +137,112 @@ test.describe("Popup Tests", () => {
|
||||
});
|
||||
await expect(embedIframe.locator("text=Seeded Form - Pro")).toBeVisible();
|
||||
});
|
||||
|
||||
test.describe("Floating Button Popup", () => {
|
||||
test.describe("Pro User - Configured in App with default setting of system theme", () => {
|
||||
test("should open embed iframe according to system theme when no theme is configured through Embed API", async ({
|
||||
page,
|
||||
addEmbedListeners,
|
||||
getActionFiredDetails,
|
||||
}) => {
|
||||
const calNamespace = "floatingButton";
|
||||
await addEmbedListeners(calNamespace);
|
||||
await page.goto("/?only=ns:floatingButton");
|
||||
|
||||
await page.click('[data-cal-namespace="floatingButton"] > button');
|
||||
|
||||
const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
|
||||
await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
|
||||
pathname: "/pro",
|
||||
});
|
||||
|
||||
if (!embedIframe) {
|
||||
throw new Error("Embed iframe not found");
|
||||
}
|
||||
const html = embedIframe.locator("html");
|
||||
// Expect "light" theme as configured in App for pro user.
|
||||
await expect(html).toHaveAttribute("class", "light");
|
||||
const { uid: bookingId } = await bookFirstEvent("pro", embedIframe, page);
|
||||
const booking = await getBooking(bookingId);
|
||||
|
||||
expect(booking.attendees.length).toBe(3);
|
||||
});
|
||||
|
||||
test("should open embed iframe according to system theme when configured with 'auto' theme using Embed API", async ({
|
||||
page,
|
||||
addEmbedListeners,
|
||||
getActionFiredDetails,
|
||||
}) => {
|
||||
const calNamespace = "floatingButton";
|
||||
await addEmbedListeners(calNamespace);
|
||||
await page.goto("/?only=ns:floatingButton");
|
||||
|
||||
await page.click('[data-cal-namespace="floatingButton"] > button');
|
||||
|
||||
const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
|
||||
await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
|
||||
pathname: "/pro",
|
||||
});
|
||||
|
||||
if (!embedIframe) {
|
||||
throw new Error("Embed iframe not found");
|
||||
}
|
||||
|
||||
const html = embedIframe.locator("html");
|
||||
const prefersDarkScheme = await page.evaluate(() => {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
});
|
||||
// Detect browser preference and expect accordingly
|
||||
await expect(html).toHaveAttribute("class", prefersDarkScheme ? "dark" : "light");
|
||||
});
|
||||
|
||||
test("should open embed iframe(Booker Profile Page) with dark theme when configured with dark theme using Embed API", async ({
|
||||
page,
|
||||
addEmbedListeners,
|
||||
getActionFiredDetails,
|
||||
}) => {
|
||||
const calNamespace = "floatingButton";
|
||||
await addEmbedListeners(calNamespace);
|
||||
await page.goto("/?only=ns:floatingButton&theme=dark");
|
||||
|
||||
await page.click('[data-cal-namespace="floatingButton"] > button');
|
||||
|
||||
const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
|
||||
await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
|
||||
pathname: "/pro",
|
||||
});
|
||||
|
||||
if (!embedIframe) {
|
||||
throw new Error("Embed iframe not found");
|
||||
}
|
||||
|
||||
const html = embedIframe.locator("html");
|
||||
await expect(html).toHaveAttribute("class", "dark");
|
||||
});
|
||||
|
||||
test("should open embed iframe(Event Booking Page) with dark theme when configured with dark theme using Embed API", async ({
|
||||
page,
|
||||
addEmbedListeners,
|
||||
getActionFiredDetails,
|
||||
}) => {
|
||||
const calNamespace = "floatingButton";
|
||||
await addEmbedListeners(calNamespace);
|
||||
await page.goto("/?only=ns:floatingButton&cal-link=pro/30min&theme=dark");
|
||||
|
||||
await page.click('[data-cal-namespace="floatingButton"] > button');
|
||||
|
||||
const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro/30min" });
|
||||
await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
|
||||
pathname: "/pro/30min",
|
||||
});
|
||||
|
||||
if (!embedIframe) {
|
||||
throw new Error("Embed iframe not found");
|
||||
}
|
||||
|
||||
const html = embedIframe.locator("html");
|
||||
await expect(html).toHaveAttribute("class", "dark");
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user