cal.pub0.org/apps/web/playwright/embed-code-generator.e2e.ts

229 lines
6.7 KiB
TypeScript
Raw Normal View History

import type { Page } from "@playwright/test";
import { expect } from "@playwright/test";
import { EMBED_LIB_URL, WEBAPP_URL } from "@calcom/lib/constants";
import { test } from "./lib/fixtures";
2022-09-19 09:47:46 +00:00
function chooseEmbedType(page: Page, embedType: string) {
page.locator(`[data-testid=${embedType}]`).click();
}
async function gotToPreviewTab(page: Page) {
2022-05-14 03:02:10 +00:00
// To prevent early timeouts
// eslint-disable-next-line playwright/no-wait-for-timeout
2022-05-14 03:02:10 +00:00
await page.waitForTimeout(1000);
await page.locator("[data-testid=embed-tabs]").locator("text=Preview").click();
}
async function clickEmbedButton(page: Page) {
const embedButton = page.locator("[data-testid=embed]");
const embedUrl = await embedButton.getAttribute("data-test-embed-url");
embedButton.click();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return embedUrl!;
}
async function clickFirstEventTypeEmbedButton(page: Page) {
const menu = page.locator("[data-testid*=event-type-options]").first();
await menu.click();
const embedUrl = await clickEmbedButton(page);
return embedUrl;
}
async function expectToBeNavigatingToEmbedTypesDialog(
page: Page,
{ embedUrl, basePage }: { embedUrl: string | null; basePage: string }
) {
if (!embedUrl) {
throw new Error("Couldn't find embedUrl");
}
await page.waitForURL((url) => {
return (
url.pathname === basePage &&
url.searchParams.get("dialog") === "embed" &&
url.searchParams.get("embedUrl") === embedUrl
);
});
}
async function expectToBeNavigatingToEmbedCodeAndPreviewDialog(
page: Page,
{
embedUrl,
embedType,
basePage,
}: {
embedUrl: string | null;
embedType: string;
basePage: string;
}
) {
if (!embedUrl) {
throw new Error("Couldn't find embedUrl");
}
await page.waitForURL((url) => {
return (
url.pathname === basePage &&
url.searchParams.get("dialog") === "embed" &&
url.searchParams.get("embedUrl") === embedUrl &&
url.searchParams.get("embedType") === embedType &&
url.searchParams.get("embedTabName") === "embed-code"
);
});
}
async function expectToContainValidCode(page: Page, { embedType }: { embedType: string }) {
const embedCode = await page.locator("[data-testid=embed-code]").inputValue();
expect(embedCode.includes("(function (C, A, L)")).toBe(true);
expect(embedCode.includes(`Cal ${embedType} embed code begins`)).toBe(true);
return {
message: () => `passed`,
pass: true,
};
}
/**
* Let's just check if iframe is opened with preview.html. preview.html tests are responsibility of embed-core
*/
async function expectToContainValidPreviewIframe(
page: Page,
{ embedType, calLink }: { embedType: string; calLink: string }
) {
const bookerUrl = `${WEBAPP_URL}`;
expect(await page.locator("[data-testid=embed-preview]").getAttribute("src")).toContain(
`/preview.html?embedType=${embedType}&calLink=${calLink}&embedLibUrl=${EMBED_LIB_URL}&bookerUrl=${bookerUrl}`
);
}
2022-05-11 17:12:58 +00:00
test.describe.configure({ mode: "parallel" });
2023-03-01 20:18:51 +00:00
test.afterEach(({ users }) => users.deleteAll());
test.describe("Embed Code Generator Tests", () => {
test.beforeEach(async ({ users }) => {
const pro = await users.create();
await pro.apiLogin();
});
test.describe("Event Types Page", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/event-types");
});
test("open Embed Dialog and choose Inline for First Event Type", async ({ page, users }) => {
const [pro] = users.get();
const embedUrl = await clickFirstEventTypeEmbedButton(page);
await expectToBeNavigatingToEmbedTypesDialog(page, {
embedUrl,
basePage: "/event-types",
});
2022-09-19 09:47:46 +00:00
chooseEmbedType(page, "inline");
await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
embedUrl,
embedType: "inline",
basePage: "/event-types",
});
2022-09-19 09:47:46 +00:00
await expectToContainValidCode(page, { embedType: "inline" });
await gotToPreviewTab(page);
await expectToContainValidPreviewIframe(page, {
embedType: "inline",
calLink: `${pro.username}/30-min`,
2022-09-19 09:47:46 +00:00
});
});
test("open Embed Dialog and choose floating-popup for First Event Type", async ({ page, users }) => {
const [pro] = users.get();
const embedUrl = await clickFirstEventTypeEmbedButton(page);
await expectToBeNavigatingToEmbedTypesDialog(page, {
embedUrl,
basePage: "/event-types",
});
2022-09-19 09:47:46 +00:00
chooseEmbedType(page, "floating-popup");
await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
embedUrl,
embedType: "floating-popup",
basePage: "/event-types",
});
2022-09-19 09:47:46 +00:00
await expectToContainValidCode(page, { embedType: "floating-popup" });
await gotToPreviewTab(page);
await expectToContainValidPreviewIframe(page, {
embedType: "floating-popup",
calLink: `${pro.username}/30-min`,
2022-09-19 09:47:46 +00:00
});
});
test("open Embed Dialog and choose element-click for First Event Type", async ({ page, users }) => {
const [pro] = users.get();
const embedUrl = await clickFirstEventTypeEmbedButton(page);
await expectToBeNavigatingToEmbedTypesDialog(page, {
embedUrl,
basePage: "/event-types",
});
2022-09-19 09:47:46 +00:00
chooseEmbedType(page, "element-click");
await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
embedUrl,
embedType: "element-click",
basePage: "/event-types",
});
2022-09-19 09:47:46 +00:00
await expectToContainValidCode(page, { embedType: "element-click" });
await gotToPreviewTab(page);
await expectToContainValidPreviewIframe(page, {
embedType: "element-click",
calLink: `${pro.username}/30-min`,
2022-09-19 09:47:46 +00:00
});
});
});
test.describe("Event Type Edit Page", () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/event-types`);
await Promise.all([
page.locator('a[href*="/event-types/"]').first().click(),
page.waitForURL((url) => url.pathname.startsWith("/event-types/")),
]);
});
test("open Embed Dialog for the Event Type", async ({ page }) => {
const basePage = new URL(page.url()).pathname;
const embedUrl = await clickEmbedButton(page);
await expectToBeNavigatingToEmbedTypesDialog(page, {
embedUrl,
basePage,
});
2022-09-19 09:47:46 +00:00
chooseEmbedType(page, "inline");
await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
embedUrl,
basePage,
embedType: "inline",
});
2022-09-19 09:47:46 +00:00
await expectToContainValidCode(page, {
embedType: "inline",
});
2022-05-14 03:02:10 +00:00
await gotToPreviewTab(page);
await expectToContainValidPreviewIframe(page, {
embedType: "inline",
calLink: decodeURIComponent(embedUrl),
2022-09-19 09:47:46 +00:00
});
});
});
});