Test

apps/web/components/booking/BookingListItem.tsx

@@ -336,7 +336,7 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="hover:bg-muted group flex flex-col sm:flex-row">
+      <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>

apps/web/pages/bookings/[status].tsx

@@ -179,7 +179,7 @@ export default function Bookings() {
                 )}
                 <div className="pt-2 xl:pt-0">
                   <div className="border-subtle overflow-hidden rounded-md border">
-                    <table className="w-full max-w-full table-fixed">
+                    <table data-testid={`${status}-bookings`} className="w-full max-w-full table-fixed">
                       <tbody className="bg-default divide-subtle divide-y" data-testid="bookings">
                         {query.data.pages.map((page, index) => (
                           <Fragment key={index}>

apps/web/playwright/bookings-list.e2e.ts

@@ -0,0 +1,106 @@
+import { expect } from "@playwright/test";
+
+import { BookingStatus } from "@calcom/prisma/client";
+
+import type { Fixtures } from "./lib/fixtures";
+import { test } from "./lib/fixtures";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Bookings", () => {
+  test.only("Upcoming bookings", async ({ page, users, bookings }) => {
+    const firstUser = await users.create();
+    const secondUser = await users.create();
+    const firstEventType = firstUser.eventTypes[0];
+
+    const bookingWhereFirstUserIsOrganizerFixture = await createBooking({
+      title: "Booking as organizer",
+      bookingsFixture: bookings,
+      relativeDate: 3,
+      organizer: firstUser,
+      organizerEventType: firstUser.eventTypes[0],
+      attendees: [
+        { name: "First", email: "first@cal.com", timeZone: "Europe/Berlin" },
+        { name: "Second", email: "second@cal.com", timeZone: "Europe/Berlin" },
+        { name: "Third", email: "third@cal.com", timeZone: "Europe/Berlin" },
+      ],
+    });
+    const bookingWhereFirstUserIsOrganizer = await bookingWhereFirstUserIsOrganizerFixture.self();
+
+    const bookingWhereFirstUserIsAttendeeFixture = await createBooking({
+      title: "Booking as attendee",
+      bookingsFixture: bookings,
+      organizer: secondUser,
+      relativeDate: 2,
+      organizerEventType: secondUser.eventTypes[0],
+      attendees: [
+        { name: "OrganizerAsBooker", email: firstUser.email, timeZone: "Europe/Berlin" },
+        { name: "Second", email: "second@cal.com", timeZone: "Europe/Berlin" },
+        { name: "Third", email: "third@cal.com", timeZone: "Europe/Berlin" },
+      ],
+    });
+    const bookingWhereFirstUserIsAttendee = await bookingWhereFirstUserIsAttendeeFixture.self();
+
+    await firstUser.apiLogin();
+    await page.goto(`/bookings/upcoming`);
+    const firstUpcomingBooking = page
+      .locator('[data-testid="upcoming-bookings"] [data-testid="booking-item"]')
+      .nth(0);
+    const secondUpcomingBooking = page
+      .locator('[data-testid="upcoming-bookings"] [data-testid="booking-item"]')
+      .nth(1);
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      firstUpcomingBooking.locator(`text=${bookingWhereFirstUserIsAttendee!.title}`)
+    ).toBeVisible();
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      secondUpcomingBooking.locator(`text=${bookingWhereFirstUserIsOrganizer!.title}`)
+    ).toBeVisible();
+
+    await page.pause();
+  });
+});
+
+async function createBooking({
+  bookingsFixture,
+  organizer,
+  organizerEventType,
+  attendees,
+  relativeDate = 0,
+  durationMins = 30,
+  title,
+}: {
+  bookingsFixture: Fixtures["bookings"];
+  organizer: {
+    id: number;
+    username: string | null;
+  };
+  organizerEventType: {
+    id: number;
+  };
+  attendees: {
+    name: string;
+    email: string;
+    timeZone: string;
+  }[];
+  relativeDate?: number;
+  durationMins?: number;
+  title: string;
+}) {
+  const DAY_MS = 24 * 60 * 60 * 1000;
+  const bookingDurationMs = durationMins * 60 * 1000;
+  const startTime = new Date(Date.now() + relativeDate * DAY_MS);
+  const endTime = new Date(Date.now() + relativeDate * DAY_MS + bookingDurationMs);
+  return await bookingsFixture.create(organizer.id, organizer.username, organizerEventType.id, {
+    title,
+    status: BookingStatus.ACCEPTED,
+    startTime,
+    endTime,
+    attendees: {
+      createMany: {
+        data: [...attendees],
+      },
+    },
+  });
+}

apps/web/playwright/fixtures/bookings.ts

@@ -19,9 +19,12 @@ export const createBookingsFixture = (page: Page) => {
       username: string | null,
       eventTypeId = -1,
       {
+        title = "",
         rescheduled = false,
         paid = false,
         status = "ACCEPTED",
+        startTime,
+        endTime,
         attendees = {
           create: {
             email: "attendee@example.com",
@@ -39,9 +42,9 @@ export const createBookingsFixture = (page: Page) => {
       const booking = await prisma.booking.create({
         data: {
           uid: uid,
-          title: "30min",
-          startTime: startDate,
-          endTime: endDateParam || dayjs().add(1, "day").add(30, "minutes").toDate(),
+          title: title || "30min",
+          startTime: startTime || startDate,
+          endTime: endTime || endDateParam || dayjs().add(1, "day").add(30, "minutes").toDate(),
           user: {
             connect: {
               id: userId,