vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

feat: atoms e2e tests (#23273)

Browse Source 
* e2e tests for availability settings atom

* init tests for booking page

* add data test id for event type card

* update tests for booking page

* add data test ids for playwright tests

* update test coverage for booking page
This commit is contained in:
Rajiv Sahal
2025-08-26 07:35:45 +00:00
committed by GitHub
parent f4944a05c9
commit d9adb6c1fc
4 changed files with 109 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/platform/examples/base/src/pages/[bookingUid].tsx
+5 -2
View File
@@ -35,6 +35,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
{isLoading && <p>Loading...</p>}
{!isLoading && booking && (
<div
data-testid="booking-success-page"
key={booking.id}
className="my-10 w-[440px] overflow-hidden rounded-md border-[0.7px] border-black px-10 py-5">
{booking.status === "accepted" ? (
@@ -43,7 +44,9 @@ export default function Bookings(props: { calUsername: string; calEmail: string
name="circle-check-big"
className="my-5 flex h-[40px] w-[40px] rounded-full bg-green-500"
/>
<h1 className="text-xl font-bold">This meeting is scheduled</h1>
<h1 className="text-xl font-bold" data-testid="booking-success-message">
This meeting is scheduled
</h1>
<p>We sent an email with a calendar invitation with the details to everyone.</p>
</div>
) : (
@@ -134,7 +137,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
<>
<hr className="mx-3" />
<div className="mx-2 my-3 text-center">
<p>
<p data-testid="booking-redirect-or-cancel-links">
Need to make a change?{" "}
<button
className="underline"
packages/platform/examples/base/src/pages/booking.tsx
+1
View File
@@ -42,6 +42,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
return (
<div
data-testid="event-type-card"
onClick={() => {
setEventTypeSlug(event.slug);
setEventTypeDuration(event.lengthInMinutes);
packages/platform/examples/base/tests/availability-settings-atom/availability-settings-atom.e2e.ts
+60
View File
@@ -0,0 +1,60 @@
import { test, expect } from "@playwright/test";
import type { Page } from "@playwright/test";
async function selectOption(page: Page, optionNumber: number) {
for (let i = 0; i < optionNumber; i++) {
await page.keyboard.press("ArrowDown");
}
await page.keyboard.press("Enter");
}
test("availability page loads with all components", async ({ page }) => {
await page.goto("/availability");
await expect(page).toHaveURL("/availability");
await expect(page.locator('h1:has-text("Availability Settings")')).toBeVisible();
await expect(page.locator('button:has-text("Validate Form")')).toBeVisible();
await expect(page.locator('button:has-text("Submit Form")')).toBeVisible();
await expect(page.locator('[data-testid="Monday"]')).toBeVisible();
await expect(page.locator('[data-testid="Tuesday"]')).toBeVisible();
await expect(page.locator('[data-testid="Wednesday"]')).toBeVisible();
await expect(page.locator('[data-testid="Thursday"]')).toBeVisible();
await expect(page.locator('[data-testid="Friday"]')).toBeVisible();
await expect(page.locator('[data-testid="Saturday"]')).toBeVisible();
await expect(page.locator('[data-testid="Sunday"]')).toBeVisible();
await page.locator('[data-testid="Sunday-switch"]').click();
await page.locator('[data-testid="Monday-switch"]').click();
await page.locator('[data-testid="Thursday-switch"]').click();
await page.locator('[data-testid="Wednesday"] [data-testid="select-control"] div').first().click();
await selectOption(page, 5);
await page.locator('[data-testid="Wednesday"] [data-testid="select-control"] div').last().click();
await selectOption(page, 7);
await page.locator('[data-testid="Friday"] [data-testid="select-control"] div').first().click();
await selectOption(page, 3);
await page.locator('[data-testid="Friday"] [data-testid="select-control"] div').last().click();
await selectOption(page, 10);
await page.locator('[data-testid="Friday"] [data-testid="add-time-availability"]').click();
await page.locator('[data-testid="timezone-select"] div').first().click();
await selectOption(page, 10);
await page.locator('[data-testid="add-override"]').click();
await page.locator('[data-testid="day"]:not([data-disabled="true"])').first().click();
await page.locator('[data-testid="add-override-submit-btn"]').click();
await page.locator('[data-testid="dialog-rejection"]').click();
await page.locator('button[form="availability-form"]').click();
});
packages/platform/examples/base/tests/booker-atom/booker-atom.e2e.ts
+43
View File
@@ -0,0 +1,43 @@
import { test, expect } from "@playwright/test";
import type { Page } from "@playwright/test";
async function selectOption(page: Page, optionNumber: number) {
for (let i = 0; i < optionNumber; i++) {
await page.keyboard.press("ArrowDown");
}
await page.keyboard.press("Enter");
}
test("tweak availability using AvailabilitySettings Atom", async ({ page }) => {
await page.goto("/booking");
await expect(page).toHaveURL("/booking");
await expect(page.locator("body")).toBeVisible();
await expect(page.locator('[data-testid="event-type-card"]').first()).toBeVisible();
await page.locator('[data-testid="event-type-card"]').first().click();
await expect(page.locator('[data-testid="booker-container"]')).toBeVisible();
await page.locator('[data-testid="day"]:not([data-disabled="true"])').first().click();
await page.locator('[data-testid="time"]:not([data-disabled="true"])').first().click();
await page.locator('[data-testid="back"]').first().click();
await page.locator('[data-testid="event-meta-current-timezone"]').first().click();
await selectOption(page, 7);
await page.locator('[data-testid="day"]:not([data-disabled="true"])').first().click();
await page.locator('[data-testid="time"]:not([data-disabled="true"])').first().click();
await page.locator('[data-testid="add-guests"]').click();
await expect(page.locator('[data-testid="input-field"]')).toBeVisible();
await page.locator('[data-testid="input-field"]').fill("free@example.com");
await page.locator('[data-testid="confirm-book-button"]').click();
await expect(page.locator('[data-testid="booking-success-page"]')).toBeVisible();
await expect(page.locator('[data-testid="booking-success-message"]')).toBeVisible();
await expect(page.locator('[data-testid="booking-success-message"]')).toContainText(
"This meeting is scheduled"
);
await expect(page.locator('[data-testid="booking-redirect-or-cancel-links"]')).toBeVisible();
});