E2E fixes (#2092)

apps/web/playwright/booking-pages.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 import prisma from "@lib/prisma";
 
-import { todo } from "./lib/testUtils";
+import { selectFirstAvailableTimeSlotNextMonth, todo } from "./lib/testUtils";
 
 const deleteBookingsByEmail = async (email: string) =>
   prisma.booking.deleteMany({
@@ -31,12 +31,8 @@ test.describe("free user", () => {
   test("cannot book same slot multiple times", async ({ page }) => {
     // Click first event type
     await page.click('[data-testid="event-type-link"]');
-    // Click [data-testid="incrementMonth"]
+
-    await page.click('[data-testid="incrementMonth"]');
+    await selectFirstAvailableTimeSlotNextMonth(page);
-    // Click [data-testid="day"]
-    await page.click('[data-testid="day"][data-disabled="false"]');
-    // Click [data-testid="time"]
-    await page.click('[data-testid="time"]');
 
     // Navigate to book page
     await page.waitForNavigation({
@@ -98,17 +94,7 @@ test.describe("pro user", () => {
   test("book an event first day in next month", async ({ page }) => {
     // Click first event type
     await page.click('[data-testid="event-type-link"]');
-    // Click [data-testid="incrementMonth"]
+    await selectFirstAvailableTimeSlotNextMonth(page);
-    await page.click('[data-testid="incrementMonth"]');
-
-    // @TODO: Find a better way to make test wait for full month change render to end
-    // so it can click up on the right day, also when resolve remove other todos
-    // Waiting for full month increment
-    await page.waitForTimeout(400);
-    // Click [data-testid="day"]
-    await page.click('[data-testid="day"][data-disabled="false"]');
-    // Click [data-testid="time"]
-    await page.click('[data-testid="time"]');
     // --- fill form
     await page.fill('[name="name"]', "Test Testson");
     await page.fill('[name="email"]', "test@example.com");

apps/web/playwright/integrations-stripe.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 
 import { hasIntegrationInstalled } from "../lib/integrations/getIntegrations";
-import { todo } from "./lib/testUtils";
+import { selectFirstAvailableTimeSlotNextMonth, todo } from "./lib/testUtils";
 
 test.describe.serial("Stripe integration", () => {
   test.skip(!hasIntegrationInstalled("stripe_payment"), "It should only run if Stripe is installed");
@@ -37,17 +37,7 @@ test.describe.serial("Stripe integration", () => {
 
   test("Can book a paid booking", async ({ page }) => {
     await page.goto("/pro/paid");
-    // Click [data-testid="incrementMonth"]
+    await selectFirstAvailableTimeSlotNextMonth(page);
-    await page.click('[data-testid="incrementMonth"]');
-
-    // @TODO: Find a better way to make test wait for full month change render to end
-    // so it can click up on the right day, also when resolve remove other todos
-    // Waiting for full month increment
-    await page.waitForTimeout(400);
-    // Click [data-testid="day"]
-    await page.click('[data-testid="day"][data-disabled="false"]');
-    // Click [data-testid="time"]
-    await page.click('[data-testid="time"]');
     // --- fill form
     await page.fill('[name="name"]', "Stripe Stripeson");
     await page.fill('[name="email"]', "test@example.com");

apps/web/playwright/integrations.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-import { createHttpServer, todo, waitFor } from "./lib/testUtils";
+import { createHttpServer, selectFirstAvailableTimeSlotNextMonth, todo, waitFor } from "./lib/testUtils";
 
 test.describe("integrations", () => {
   test.use({ storageState: "playwright/artifacts/proStorageState.json" });
@@ -38,14 +38,7 @@ test.describe("integrations", () => {
 
     // --- Book the first available day next month in the pro user's "30min"-event
     await page.goto(`/pro/30min`);
-    await page.click('[data-testid="incrementMonth"]');
+    await selectFirstAvailableTimeSlotNextMonth(page);
-
-    // @TODO: Find a better way to make test wait for full month change render to end
-    // so it can click up on the right day, also when resolve remove other todos
-    // Waiting for full month increment
-    await page.waitForTimeout(400);
-    await page.click('[data-testid="day"][data-disabled="false"]');
-    await page.click('[data-testid="time"]');
 
     // --- fill form
     await page.fill('[name="name"]', "Test Testson");

apps/web/playwright/lib/testUtils.ts

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test";
+import { Page, test } from "@playwright/test";
 import { createServer, IncomingMessage, ServerResponse } from "http";
 
 export function todo(title: string) {
@@ -66,3 +66,13 @@ export async function waitFor(fn: () => Promise<unknown> | unknown, opts: { time
     }
   }
 }
+
+export async function selectFirstAvailableTimeSlotNextMonth(page: Page) {
+  await page.click('[data-testid="incrementMonth"]');
+  // @TODO: Find a better way to make test wait for full month change render to end
+  // so it can click up on the right day, also when resolve remove other todos
+  // Waiting for full month increment
+  await page.waitForTimeout(400);
+  await page.click('[data-testid="day"][data-disabled="false"]');
+  await page.click('[data-testid="time"]');
+}