import { expect } from "@playwright/test"; import { randomString } from "@calcom/lib/random"; import { test } from "./lib/fixtures"; import { bookFirstEvent, bookOptinEvent, bookTimeSlot, expectEmailsToHaveSubject, selectFirstAvailableTimeSlotNextMonth, testEmail, testName, } from "./lib/testUtils"; const freeUserObj = { name: `Free-user-${randomString(3)}` }; test.describe.configure({ mode: "parallel" }); test.afterEach(async ({ users }) => { await users.deleteAll(); }); test.describe("free user", () => { test.beforeEach(async ({ page, users }) => { const free = await users.create(freeUserObj); await page.goto(`/${free.username}`); }); test("cannot book same slot multiple times", async ({ page, users, emails }) => { const [user] = users.get(); const bookerObj = { email: `testEmail-${randomString(4)}@example.com`, name: "testBooker" }; // Click first event type await page.click('[data-testid="event-type-link"]'); await selectFirstAvailableTimeSlotNextMonth(page); await bookTimeSlot(page, bookerObj); // save booking url const bookingUrl: string = page.url(); // Make sure we're navigated to the success page await expect(page.locator("[data-testid=success-page]")).toBeVisible(); const { title: eventTitle } = await user.getFirstEventAsOwner(); await expectEmailsToHaveSubject({ emails, organizer: user, booker: bookerObj, eventTitle, }); await page.goto(bookingUrl); // book same time spot again await bookTimeSlot(page); await page.locator("[data-testid=booking-fail]").waitFor({ state: "visible" }); }); }); test.describe("pro user", () => { test.beforeEach(async ({ page, users }) => { const pro = await users.create(); await page.goto(`/${pro.username}`); }); test("pro user's page has at least 2 visible events", async ({ page }) => { const $eventTypes = page.locator("[data-testid=event-types] > *"); expect(await $eventTypes.count()).toBeGreaterThanOrEqual(2); }); test("book an event first day in next month", async ({ page }) => { await bookFirstEvent(page); }); test("can reschedule a booking", async ({ page, users, bookings }) => { const [pro] = users.get(); const [eventType] = pro.eventTypes; await bookings.create(pro.id, pro.username, eventType.id); await pro.apiLogin(); await page.goto("/bookings/upcoming"); await page.waitForSelector('[data-testid="bookings"]'); await page.locator('[data-testid="edit_booking"]').nth(0).click(); await page.locator('[data-testid="reschedule"]').click(); await page.waitForURL((url) => { const bookingId = url.searchParams.get("rescheduleUid"); return !!bookingId; }); await selectFirstAvailableTimeSlotNextMonth(page); await page.locator('[data-testid="confirm-reschedule-button"]').click(); await page.waitForURL((url) => { return url.pathname.startsWith("/booking"); }); }); test("Can cancel the recently created booking and rebook the same timeslot", async ({ page, users, }, testInfo) => { // Because it tests the entire booking flow + the cancellation + rebooking test.setTimeout(testInfo.timeout * 3); await bookFirstEvent(page); await expect(page.locator(`[data-testid="attendee-email-${testEmail}"]`)).toHaveText(testEmail); await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName); const [pro] = users.get(); await pro.apiLogin(); await page.goto("/bookings/upcoming"); await page.locator('[data-testid="cancel"]').click(); await page.waitForURL((url) => { return url.pathname.startsWith("/booking/"); }); await page.locator('[data-testid="confirm_cancel"]').click(); const cancelledHeadline = page.locator('[data-testid="cancelled-headline"]'); await expect(cancelledHeadline).toBeVisible(); await expect(page.locator(`[data-testid="attendee-email-${testEmail}"]`)).toHaveText(testEmail); await expect(page.locator(`[data-testid="attendee-name-${testName}"]`)).toHaveText(testName); await page.goto(`/${pro.username}`); await bookFirstEvent(page); }); test("can book an event that requires confirmation and then that booking can be accepted by organizer", async ({ page, users, }) => { await bookOptinEvent(page); const [pro] = users.get(); await pro.apiLogin(); await page.goto("/bookings/unconfirmed"); await Promise.all([ page.click('[data-testid="confirm"]'), page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/confirm")), ]); // This is the only booking in there that needed confirmation and now it should be empty screen await expect(page.locator('[data-testid="empty-screen"]')).toBeVisible(); }); test("can book with multiple guests", async ({ page, users }) => { const additionalGuests = ["test@gmail.com", "test2@gmail.com"]; await page.click('[data-testid="event-type-link"]'); await selectFirstAvailableTimeSlotNextMonth(page); await page.fill('[name="name"]', "test1234"); await page.fill('[name="email"]', "test1234@example.com"); await page.locator('[data-testid="add-guests"]').click(); await page.locator('input[type="email"]').nth(1).fill(additionalGuests[0]); await page.locator('[data-testid="add-another-guest"]').click(); await page.locator('input[type="email"]').nth(2).fill(additionalGuests[1]); await page.locator('[data-testid="confirm-book-button"]').click(); await expect(page.locator("[data-testid=success-page]")).toBeVisible(); const promises = additionalGuests.map(async (email) => { await expect(page.locator(`[data-testid="attendee-email-${email}"]`)).toHaveText(email); }); await Promise.all(promises); }); test("Time slots should be reserved when selected", async ({ context, page }) => { await page.click('[data-testid="event-type-link"]'); const initialUrl = page.url(); await selectFirstAvailableTimeSlotNextMonth(page); const pageTwo = await context.newPage(); await pageTwo.goto(initialUrl); await pageTwo.waitForURL(initialUrl); await pageTwo.waitForSelector('[data-testid="event-type-link"]'); const eventTypeLink = pageTwo.locator('[data-testid="event-type-link"]').first(); await eventTypeLink.click(); await pageTwo.waitForLoadState("networkidle"); await pageTwo.locator('[data-testid="incrementMonth"]').waitFor(); await pageTwo.click('[data-testid="incrementMonth"]'); await pageTwo.waitForLoadState("networkidle"); await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).waitFor(); await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).click(); // 9:30 should be the first available time slot await pageTwo.locator('[data-testid="time"]').nth(0).waitFor(); const firstSlotAvailable = pageTwo.locator('[data-testid="time"]').nth(0); // Find text inside the element const firstSlotAvailableText = await firstSlotAvailable.innerText(); expect(firstSlotAvailableText).toContain("9:30"); }); test("Time slots are not reserved when going back via Cancel button on Event Form", async ({ context, page, }) => { const initialUrl = page.url(); await page.waitForSelector('[data-testid="event-type-link"]'); const eventTypeLink = page.locator('[data-testid="event-type-link"]').first(); await eventTypeLink.click(); await selectFirstAvailableTimeSlotNextMonth(page); const pageTwo = await context.newPage(); await pageTwo.goto(initialUrl); await pageTwo.waitForURL(initialUrl); await pageTwo.waitForSelector('[data-testid="event-type-link"]'); const eventTypeLinkTwo = pageTwo.locator('[data-testid="event-type-link"]').first(); await eventTypeLinkTwo.click(); await page.locator('[data-testid="back"]').waitFor(); await page.click('[data-testid="back"]'); await pageTwo.waitForLoadState("networkidle"); await pageTwo.locator('[data-testid="incrementMonth"]').waitFor(); await pageTwo.click('[data-testid="incrementMonth"]'); await pageTwo.waitForLoadState("networkidle"); await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).waitFor(); await pageTwo.locator('[data-testid="day"][data-disabled="false"]').nth(0).click(); await pageTwo.locator('[data-testid="time"]').nth(0).waitFor(); const firstSlotAvailable = pageTwo.locator('[data-testid="time"]').nth(0); // Find text inside the element const firstSlotAvailableText = await firstSlotAvailable.innerText(); expect(firstSlotAvailableText).toContain("9:00"); }); }); test.describe("prefill", () => { test("logged in", async ({ page, users }) => { const prefill = await users.create({ name: "Prefill User" }); await prefill.apiLogin(); await page.goto("/pro/30min"); await test.step("from session", async () => { await selectFirstAvailableTimeSlotNextMonth(page); await expect(page.locator('[name="name"]')).toHaveValue(prefill.name || ""); await expect(page.locator('[name="email"]')).toHaveValue(prefill.email); }); await test.step("from query params", async () => { const url = new URL(page.url()); url.searchParams.set("name", testName); url.searchParams.set("email", testEmail); await page.goto(url.toString()); await expect(page.locator('[name="name"]')).toHaveValue(testName); await expect(page.locator('[name="email"]')).toHaveValue(testEmail); }); }); test("Persist the field values when going back and coming back to the booking form", async ({ page, users, }) => { await page.goto("/pro/30min"); await selectFirstAvailableTimeSlotNextMonth(page); await page.fill('[name="name"]', "John Doe"); await page.fill('[name="email"]', "john@example.com"); await page.fill('[name="notes"]', "Test notes"); await page.click('[data-testid="back"]'); await selectFirstAvailableTimeSlotNextMonth(page); await expect(page.locator('[name="name"]')).toHaveValue("John Doe"); await expect(page.locator('[name="email"]')).toHaveValue("john@example.com"); await expect(page.locator('[name="notes"]')).toHaveValue("Test notes"); }); test("logged out", async ({ page, users }) => { await page.goto("/pro/30min"); await test.step("from query params", async () => { await selectFirstAvailableTimeSlotNextMonth(page); const url = new URL(page.url()); url.searchParams.set("name", testName); url.searchParams.set("email", testEmail); await page.goto(url.toString()); await expect(page.locator('[name="name"]')).toHaveValue(testName); await expect(page.locator('[name="email"]')).toHaveValue(testEmail); }); }); }); test.describe("Booking on different layouts", () => { test.beforeEach(async ({ page, users }) => { const user = await users.create(); await page.goto(`/${user.username}`); }); test("Book on week layout", async ({ page }) => { // Click first event type await page.click('[data-testid="event-type-link"]'); await page.click('[data-testid="toggle-group-item-week_view"]'); await page.click('[data-testid="incrementMonth"]'); await page.locator('[data-testid="calendar-empty-cell"]').nth(0).click(); // Fill what is this meeting about? name email and notes await page.locator('[name="name"]').fill("Test name"); await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`); await page.locator('[name="notes"]').fill("Test notes"); await page.click('[data-testid="confirm-book-button"]'); await page.waitForURL((url) => { return url.pathname.startsWith("/booking"); }); // expect page to be booking page await expect(page.locator("[data-testid=success-page]")).toBeVisible(); }); test("Book on column layout", async ({ page }) => { // Click first event type await page.click('[data-testid="event-type-link"]'); await page.click('[data-testid="toggle-group-item-column_view"]'); await page.click('[data-testid="incrementMonth"]'); await page.locator('[data-testid="time"]').nth(0).click(); // Fill what is this meeting about? name email and notes await page.locator('[name="name"]').fill("Test name"); await page.locator('[name="email"]').fill(`${randomString(4)}@example.com`); await page.locator('[name="notes"]').fill("Test notes"); await page.click('[data-testid="confirm-book-button"]'); await page.waitForURL((url) => { return url.pathname.startsWith("/booking"); }); // expect page to be booking page await expect(page.locator("[data-testid=success-page]")).toBeVisible(); }); });