test: E2E test to verify event multiple duration works correctly #23144
Conversation
WalkthroughThis change adds an end-to-end test validating multiple-duration selection behavior on booking pages and introduces a reusable booking confirmation helper. The test logs in as a user, updates an event type to use a duration placeholder, navigates to the multiple-duration page, switches from the default duration to a longer option, books a slot in the next month, submits attendee details, confirms the booking, and asserts the booking reflects the selected duration. Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/17/25)1 reviewer was added to this PR based on Keith Williams's automation. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
apps/web/playwright/dynamic-booking-pages.e2e.ts (4)
124-130: Minor: Use expect(...).toBeVisible() for visibility rather than waitForSmall readability improvement and consistency with Playwright best practices.
- await page.locator('[data-testid="multiple-choice-30mins"]').waitFor({ state: "visible" }); + await expect(page.getByTestId("multiple-choice-30mins")).toBeVisible();
132-138: Stabilize the 90-minute selection with a visibility assertion before clickMaking sure the 90-min option is visible before clicking reduces flakiness on slow UIs.
- await page.getByTestId("multiple-choice-90mins").click(); - - const duration90 = page.getByTestId("multiple-choice-90mins"); + const duration90 = page.getByTestId("multiple-choice-90mins"); + await expect(duration90).toBeVisible(); + await duration90.click(); const activeState = await duration90.getAttribute("data-active"); expect(activeState).toEqual("true");
141-144: Avoid duplicate form-filling if confirmBooking already handles itIf
confirmBookingfills attendee details, the manualname/If
confirmBookingcovers attendee form fields, simplify:- await page.fill('[name="name"]', "Test User"); - await page.fill('[name="email"]', "test@example.com"); await confirmBooking(page);Otherwise, keep as-is.
147-151: Strengthen the booking title assertion to reduce false positivesChecking for plain "90" could inadvertently match unrelated text. Anchor the assertion with nearby static text you control or use a regex.
- const titleText = await bookingTitle.textContent(); - expect(titleText).toContain("90"); + const titleText = (await bookingTitle.textContent()) ?? ""; + // Since you set the title template, assert both "90" and a static part you control: + expect(titleText).toMatch(/\b90\b/); + expect(titleText).toContain("event btwn");
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/web/playwright/dynamic-booking-pages.e2e.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.ts
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
**/*.ts: For Prisma queries, only select data you need; never useinclude, always useselect
Ensure thecredential.keyfield is never returned from tRPC endpoints or APIs
Files:
apps/web/playwright/dynamic-booking-pages.e2e.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
apps/web/playwright/dynamic-booking-pages.e2e.ts
🧬 Code Graph Analysis (1)
apps/web/playwright/dynamic-booking-pages.e2e.ts (1)
apps/web/playwright/lib/testUtils.ts (1)
selectFirstAvailableTimeSlotNextMonth(109-117)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Tests / Unit
- GitHub Check: Linters / lint
- GitHub Check: Type check / check-types
- GitHub Check: Install dependencies / Yarn install & cache
🔇 Additional comments (3)
apps/web/playwright/dynamic-booking-pages.e2e.ts (3)
9-13: ConfirmBooking helper confirmed—retain manual attendee fills
I’ve verified thatconfirmBookingis exported fromapps/web/playwright/lib/testUtils.ts(starts at line 516) and only clicks the confirm button (via[data-testid="confirm-book-button"]) and waits for the response. It does not populate attendee name/email fields, so you should keep the manual fill steps below to avoid breaking the test.
107-120: Ensure exact placeholder tokens are supportedThe
{Event duration}string (and your other tokens{Organiser}/{Scheduler}) must match exactly the names the placeholder-replacement code recognizes—casing and spelling (British vs. American) matter. If the logic only handles{Event Duration}or{Organizer}, the substitution will silently fail and your booking-page title check will break.Please verify:
- The supported placeholder keys in your template-interpolation function (e.g. is it
{Event duration}or{Event Duration}?).- The exact spelling for the “organiser/organizer” token.
- That
{Scheduler}is registered as a valid token.Adjust either the test input or the replacement logic so they align.
107-118: Tab/field mismatch: Setup vs Advanced
You’re asserting the Setup tab is active, then clicking Advanced and filling theeventNamefield—which lives on Setup. That will be flaky or wrong ifeventNameisn’t rendered in Advanced.Two ways to fix:
• If you meant to edit the static name on Setup, fill before switching tabs:await expect( page.getByTestId("vertical-tab-event_setup_tab_title") ).toHaveAttribute("aria-current", "page"); - await page.getByTestId("vertical-tab-event_advanced_tab_title").click(); - await page.fill('[name="eventName"]', "{Event duration} event btwn {Organiser} {Scheduler}"); + await page.fill('[name="eventName"]', "{Event duration} event btwn {Organiser} {Scheduler}"); + // now you can switch to Advanced if needed + // await page.getByTestId("vertical-tab-event_advanced_tab_title").click(); await page.locator('[data-testid="update-eventtype"]').click();• If you intended to set the dynamic booking title under Advanced, please confirm the correct input selector on that tab (e.g. a data-testid or name) and replace
eventNamewith it:await page.getByTestId("vertical-tab-event_advanced_tab_title").click(); // TODO: use the Advanced‐tab’s booking‐title selector here await page.fill('[your-advanced-title-selector]', "{Event duration} event btwn {Organiser} {Scheduler}"); await page.locator('[data-testid="update-eventtype"]').click();Please verify the selector for the dynamic booking title on the Advanced tab.
E2E results are ready! |
What does this PR do?
The test verifies that the issue from #23140 does not reappear in the future