One playwright config to rule them all (#4072)

2022-09-01 20:00:48 -06:00
parent b09d727d3f
commit d27b7ab2c4
60 changed files with 658 additions and 970 deletions
@@ -0,0 +1,218 @@
+import { expect, Page } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+function chooseEmbedType(page: Page, embedType: string) {
+  page.locator(`[data-testid=${embedType}]`).click();
+}
+
+async function gotToPreviewTab(page: Page) {
+  // To prevent early timeouts
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  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.waitForNavigation({
+    url: (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.waitForNavigation({
+    url: (url) => {
+      return (
+        url.pathname === basePage &&
+        url.searchParams.get("dialog") === "embed" &&
+        url.searchParams.get("embedUrl") === embedUrl &&
+        url.searchParams.get("embedType") === embedType &&
+        url.searchParams.get("tabName") === "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,
+  };
+}
+
+async function expectToContainValidPreviewIframe(
+  page: Page,
+  { embedType, calLink }: { embedType: string; calLink: string }
+) {
+  expect(await page.locator("[data-testid=embed-preview]").getAttribute("src")).toContain(
+    `/preview.html?embedType=${embedType}&calLink=${calLink}`
+  );
+}
+
+test.describe.configure({ mode: "parallel" });
+
+test.describe("Embed Code Generator Tests", () => {
+  test.beforeEach(async ({ users }) => {
+    const pro = await users.create();
+    await pro.login();
+  });
+
+  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",
+      });
+
+      chooseEmbedType(page, "inline");
+
+      await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+        embedUrl,
+        embedType: "inline",
+        basePage: "/event-types",
+      });
+
+      await expectToContainValidCode(page, { embedType: "inline" });
+
+      await gotToPreviewTab(page);
+
+      await expectToContainValidPreviewIframe(page, {
+        embedType: "inline",
+        calLink: `${pro.username}/30-min`,
+      });
+    });
+
+    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",
+      });
+
+      chooseEmbedType(page, "floating-popup");
+
+      await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+        embedUrl,
+        embedType: "floating-popup",
+        basePage: "/event-types",
+      });
+      await expectToContainValidCode(page, { embedType: "floating-popup" });
+
+      await gotToPreviewTab(page);
+      await expectToContainValidPreviewIframe(page, {
+        embedType: "floating-popup",
+        calLink: `${pro.username}/30-min`,
+      });
+    });
+
+    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",
+      });
+
+      chooseEmbedType(page, "element-click");
+
+      await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+        embedUrl,
+        embedType: "element-click",
+        basePage: "/event-types",
+      });
+      await expectToContainValidCode(page, { embedType: "element-click" });
+
+      await gotToPreviewTab(page);
+      await expectToContainValidPreviewIframe(page, {
+        embedType: "element-click",
+        calLink: `${pro.username}/30-min`,
+      });
+    });
+  });
+
+  test.describe("Event Type Edit Page", () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/event-types`);
+      await Promise.all([
+        page.locator('[href*="/event-types/"]').first().click(),
+        page.waitForNavigation({
+          url: (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,
+      });
+
+      chooseEmbedType(page, "inline");
+
+      await expectToBeNavigatingToEmbedCodeAndPreviewDialog(page, {
+        embedUrl,
+        basePage,
+        embedType: "inline",
+      });
+
+      await expectToContainValidCode(page, {
+        embedType: "inline",
+      });
+
+      await gotToPreviewTab(page);
+
+      await expectToContainValidPreviewIframe(page, {
+        embedType: "inline",
+        calLink: decodeURIComponent(embedUrl),
+      });
+    });
+  });
+});