Add Booking tests - Reschedule and Cancel. (#2163)

Co-authored-by: zomars <zomars@me.com>

apps/web/components/booking/pages/BookingPage.tsx

@@ -532,7 +532,10 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                     />
                   </div>
                   <div className="flex items-start space-x-2 rtl:space-x-reverse">
-                    <Button type="submit" loading={mutation.isLoading}>
+                    <Button
+                      type="submit"
+                      data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
+                      loading={mutation.isLoading}>
                       {rescheduleUid ? t("reschedule") : t("confirm")}
                     </Button>
                     <Button color="secondary" type="button" onClick={() => router.back()}>

apps/web/pages/404.tsx

@@ -51,7 +51,7 @@ export default function Custom404() {
           noindex: true,
         }}
       />
-      <div className="min-h-screen bg-white px-4">
+      <div className="min-h-screen bg-white px-4" data-testid="404-page">
         <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
           {isSignup && process.env.NEXT_PUBLIC_BASE_URL !== "https://app.cal.com" ? (
             <div>

apps/web/pages/[user]/[type].tsx

@@ -153,10 +153,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const [eventType] = user.eventTypes;
 
   // check this is the first event
-
-  // TEMPORARILY disabled because of a bug during event create - during which users were able
-  // to create event types >n1.
-  /*if (user.plan === "FREE") {
+  if (user.plan === "FREE") {
     const firstEventType = await prisma.eventType.findFirst({
       where: {
         OR: [
@@ -181,7 +178,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
         notFound: true,
       } as const;
     }
-  }*/
+  }
 
   const eventTypeObject = Object.assign({}, eventType, {
     metadata: (eventType.metadata || {}) as JSONObject,

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

@@ -1,7 +1,28 @@
 import { expect, Page, test } from "@playwright/test";
 
 import { deleteAllBookingsByEmail } from "./lib/teardown";
-import { selectFirstAvailableTimeSlotNextMonth, todo } from "./lib/testUtils";
+import {
+  selectFirstAvailableTimeSlotNextMonth,
+  selectSecondAvailableTimeSlotNextMonth,
+  todo,
+} from "./lib/testUtils";
+
+async function bookFirstEvent(page) {
+  // Click first event type
+  await page.click('[data-testid="event-type-link"]');
+  await selectFirstAvailableTimeSlotNextMonth(page);
+  // --- fill form
+  await page.fill('[name="name"]', "Test Testson");
+  await page.fill('[name="email"]', "test@example.com");
+  await page.press('[name="email"]', "Enter");
+
+  // Make sure we're navigated to the success page
+  await page.waitForNavigation({
+    url(url) {
+      return url.pathname.endsWith("/success");
+    },
+  });
+}
 
 const bookTimeSlot = async (page: Page) => {
   // --- fill form
@@ -61,12 +82,22 @@ test.describe("free user", () => {
     await expect(page.locator("[data-testid=booking-fail]")).toBeVisible();
   });
 
+  // Why do we need this test. The previous test is testing /30min booking only ?
   todo("`/free/30min` is bookable");
 
-  todo("`/free/60min` is not bookable");
+  test("`/free/60min` is not bookable", async ({ page }) => {
+    // Not available in listing
+    await expect(page.locator('[href="/free/60min"]')).toHaveCount(0);
+
+    await page.goto("/free/60min");
+    // Not available on a direct visit to event type page
+    await expect(page.locator('[data-testid="404-page"]')).toBeVisible();
+  });
 });
 
 test.describe("pro user", () => {
+  test.use({ storageState: "playwright/artifacts/proStorageState.json" });
+
   test.beforeEach(async ({ page }) => {
     await page.goto("/pro");
   });
@@ -95,8 +126,43 @@ test.describe("pro user", () => {
       },
     });
   });
+  test("can reschedule a booking", async ({ page }) => {
+    await bookFirstEvent(page);
 
-  todo("Can reschedule the recently created booking");
-
-  todo("Can cancel the recently created booking");
+    await page.goto("/bookings/upcoming");
+    await page.locator('[data-testid="reschedule"]').click();
+    await page.waitForNavigation({
+      url: (url) => {
+        const bookingId = url.searchParams.get("rescheduleUid");
+        return !!bookingId;
+      },
+    });
+    await selectSecondAvailableTimeSlotNextMonth(page);
+    // --- fill form
+    await page.locator('[data-testid="confirm-reschedule-button"]').click();
+    await page.waitForNavigation({
+      url(url) {
+        return url.pathname === "/success" && url.searchParams.get("reschedule") === "true";
+      },
+    });
+  });
+
+  test("Can cancel the recently created booking", async ({ page }) => {
+    await bookFirstEvent(page);
+
+    await page.goto("/bookings/upcoming");
+    await page.locator('[data-testid="cancel"]').click();
+    await page.waitForNavigation({
+      url: (url) => {
+        return url.pathname.startsWith("/cancel");
+      },
+    });
+    // --- fill form
+    await page.locator('[data-testid="cancel"]').click();
+    await page.waitForNavigation({
+      url(url) {
+        return url.pathname === "/cancel/success";
+      },
+    });
+  });
 });

apps/web/playwright/lib/testUtils.ts

@@ -76,3 +76,13 @@ export async function selectFirstAvailableTimeSlotNextMonth(page: Page) {
   await page.click('[data-testid="day"][data-disabled="false"]');
   await page.click('[data-testid="time"]');
 }
+
+export async function selectSecondAvailableTimeSlotNextMonth(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.locator('[data-testid="time"]').nth(1).click();
+}