vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.7k Packages Projects Releases Wiki Activity

fix: Embed theme not working using Embed API (#10163)

Browse Source 
## 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
2023-07-17 18:02:42 -07:00
committed by GitHub
parent 2db4998eaa
commit 6dfc19247e
13 changed files with 173 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
+109 -50
View File
@@ -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");
});
});
});
});