diff --git a/apps/web/playwright/booking/managedBookingAllQuestion.e2e.ts b/apps/web/playwright/booking/managedBookingAllQuestion.e2e.ts new file mode 100644 index 0000000000..96eb241fbd --- /dev/null +++ b/apps/web/playwright/booking/managedBookingAllQuestion.e2e.ts @@ -0,0 +1,109 @@ +/* eslint-disable playwright/no-conditional-in-test */ +import { expect } from "@playwright/test"; + +import { loginUser } from "../fixtures/regularBookings"; +import { test } from "../lib/fixtures"; + +test.describe("Booking With All Questions", () => { + test.beforeEach(async ({ page, users, bookingPage }) => { + await loginUser(users); + await page.goto("/event-types"); + await bookingPage.createTeam("Test Team"); + await bookingPage.goToTab("Back"); + await bookingPage.createManagedEventType("Test Managed Event Type"); + await bookingPage.goToEventType("Event Types"); + await expect( + page.getByRole("link", { + name: "Test Managed Event Type", + }) + ).toBeVisible(); + await bookingPage.goToEventType("Test Managed Event Type"); + await bookingPage.goToTab("event_advanced_tab_title"); + }); + + const bookingOptions = { isAllRequired: true }; + + test("Selecting and filling all questions as required", async ({ bookingPage }) => { + const allQuestions = [ + "phone", + "address", + "checkbox", + "boolean", + "textarea", + "multiemail", + "multiselect", + "number", + "radio", + "select", + "text", + ]; + for (const question of allQuestions) { + if (bookingOptions.isAllRequired) { + if ( + question !== "number" && + question !== "multiemail" && + question !== "select" && + question !== "checkbox" && + question !== "boolean" && + question !== "multiselect" && + question !== "radio" + ) { + await bookingPage.addQuestion( + question, + `${question}-test`, + `${question} test`, + true, + `${question} test` + ); + } else { + await bookingPage.addQuestion(question, `${question}-test`, `${question} test`, true); + } + await bookingPage.checkField(question); + } + } + + await bookingPage.updateEventType(); + }); + + test("Selecting and filling all questions as optional", async ({ bookingPage }) => { + const allQuestions = [ + "phone", + "address", + "checkbox", + "boolean", + "textarea", + "multiemail", + "multiselect", + "number", + "radio", + "select", + "text", + ]; + for (const question of allQuestions) { + if (bookingOptions.isAllRequired) { + if ( + question !== "number" && + question !== "multiemail" && + question !== "select" && + question !== "checkbox" && + question !== "boolean" && + question !== "multiselect" && + question !== "radio" + ) { + await bookingPage.addQuestion( + question, + `${question}-test`, + `${question} test`, + true, + `${question} test` + ); + } else { + await bookingPage.addQuestion(question, `${question}-test`, `${question} test`, true); + } + await bookingPage.checkField(question); + } + } + + await bookingPage.updateEventType(); + }); +}); diff --git a/apps/web/playwright/fixtures/regularBookings.ts b/apps/web/playwright/fixtures/regularBookings.ts index 3ad4c0e7d3..caa6097a2f 100644 --- a/apps/web/playwright/fixtures/regularBookings.ts +++ b/apps/web/playwright/fixtures/regularBookings.ts @@ -1,5 +1,7 @@ import { expect, type Page } from "@playwright/test"; +import { randomString } from "@calcom/lib/random"; + import type { createUsersFixture } from "./users"; const reschedulePlaceholderText = "Let others know why you need to reschedule"; @@ -13,6 +15,7 @@ type BookingOptions = { hasPlaceholder?: boolean; isReschedule?: boolean; isRequired?: boolean; + isAllRequired?: boolean; }; interface QuestionActions { @@ -115,8 +118,21 @@ export async function loginUser(users: UserFixture) { export function createBookingPageFixture(page: Page) { return { - goToEventType: async (eventType: string) => { - await page.getByRole("link", { name: eventType }).click(); + goToEventType: async ( + eventType: string, + options?: { + clickOnFirst?: boolean; + clickOnLast?: boolean; + } + ) => { + if (options?.clickOnFirst) { + await page.getByRole("link", { name: eventType }).first().click(); + } + if (options?.clickOnLast) { + await page.getByRole("link", { name: eventType }).last().click(); + } else { + await page.getByRole("link", { name: eventType }).click(); + } }, goToTab: async (tabName: string) => { await page.getByTestId(`vertical-tab-${tabName}`).click(); @@ -144,8 +160,12 @@ export function createBookingPageFixture(page: Page) { } await page.getByTestId("field-add-save").click(); }, - updateEventType: async () => { + updateEventType: async (options: { shouldCheck?: boolean }) => { await page.getByTestId("update-eventtype").click(); + options.shouldCheck && + (await expect( + page.getByRole("button", { name: "Test Managed Event Type event type updated successfully" }) + ).toBeVisible()); }, previewEventType: async () => { const eventtypePromise = page.waitForEvent("popup"); @@ -246,6 +266,150 @@ export function createBookingPageFixture(page: Page) { // Fill the second question if is required options.isRequired && (await fillQuestion(eventTypePage, secondQuestion, customLocators)); + await eventTypePage.getByTestId(confirmButton).click(); + const scheduleSuccessfullyPage = eventTypePage.getByText(scheduleSuccessfullyText); + await scheduleSuccessfullyPage.waitFor({ state: "visible" }); + await expect(scheduleSuccessfullyPage).toBeVisible(); + }, + createTeam: async (name: string) => { + await page.getByRole("link", { name: "Teams" }).click(); + await page.getByTestId("new-team-btn").click(); + await page.getByPlaceholder("Acme Inc.").click(); + await page.getByPlaceholder("Acme Inc.").fill(`${name}-${randomString(3)}`); + await page.getByRole("button", { name: "Continue" }).click(); + await page.getByRole("button", { name: "Publish team" }).click(); + + await page.getByTestId("vertical-tab-Back").click(); + }, + createManagedEventType: async (name: string) => { + await page.getByTestId("new-event-type").click(); + await page.getByTestId("option-0").click(); + await page.getByTestId("dialog-rejection").click(); + + // We first simulate to creste a default event type to check if managed option is not available + await expect( + page + .locator("div") + .filter({ hasText: "Managed EventCreate & distribute event types in bulk to team members" }) + ).toBeHidden(); + await page.getByTestId("new-event-type").click(); + await page.getByTestId("option-team-1").click(); + await page.getByPlaceholder("Quick Chat").fill(name); + await page + .locator("div") + .filter({ hasText: "Managed EventCreate & distribute event types in bulk to team members" }) + .getByRole("radio") + .last() + .click(); + await expect( + page.getByText('"username" will be filled by the username of the members assigned') + ).toBeVisible(); + await page.getByRole("button", { name: "Continue" }).click(); + await page.getByTestId("update-eventtype").click(); + }, + removeManagedEventType: async () => { + await page + .locator("header") + .filter({ hasText: "Test Managed Event TypeSave" }) + .getByRole("button") + .first() + .click(); + + // Check if the correct messages is showed in the dialog + await expect( + page.getByText("Members assigned to this event type will also have their event types deleted.") + ).toBeVisible(); + await expect( + page.getByText("Anyone who they've shared their link with will no longer be able to book using it") + ).toBeVisible(); + await page.getByRole("button", { name: "Yes, delete" }).click(); + + // Check if the correct image is showed when there is no event type + await expect(page.getByTestId("empty-screen")).toBeVisible(); + }, + assertManagedEventTypeDeleted: async () => { + await expect(page.getByRole("button", { name: "Event type deleted successfully" })).toBeVisible(); + }, + deleteTeam: async () => { + await page.getByRole("link", { name: "Teams" }).click(); + await page.getByRole("link", { name: "Team Logo Test Team" }).click(); + await page.getByRole("button", { name: "Disband Team" }).click(); + await page.getByRole("button", { name: "Yes, disband team" }).click(); + + // Check if the correct image is showed when there is no team + await expect(page.getByRole("img", { name: "Cal.com is better with teams" })).toBeVisible(); + }, + assertTeamDeleted: async () => { + await expect( + page.getByRole("button", { name: "Your team has been disbanded successfully" }) + ).toBeVisible(); + }, + checkField: async (question: string, options?: { isOptional: boolean }) => { + if (options?.isOptional) { + await expect(page.getByTestId(`field-${question}-test`).getByText("Optional")).toBeVisible(); + } else { + await expect(page.getByTestId(`field-${question}-test`).getByText("Required")).toBeVisible(); + } + await expect(page.getByTestId(`field-${question}-test`)).toBeVisible(); + }, + fillAllQuestions: async (eventTypePage: Page, questions: string[], options: BookingOptions) => { + const confirmButton = options.isReschedule ? "confirm-reschedule-button" : "confirm-book-button"; + + if (options.isAllRequired) { + for (const question of questions) { + switch (question) { + case "email": + await eventTypePage.getByPlaceholder("Email").click(); + await eventTypePage.getByPlaceholder("Email").fill(EMAIL); + break; + case "phone": + await eventTypePage.getByPlaceholder("Phone test").click(); + await eventTypePage.getByPlaceholder("Phone test").fill(PHONE); + break; + case "address": + await eventTypePage.getByPlaceholder("Address test").click(); + await eventTypePage.getByPlaceholder("Address test").fill("123 Main St, City, Country"); + break; + case "textarea": + await eventTypePage.getByPlaceholder("Textarea test").click(); + await eventTypePage + .getByPlaceholder("Textarea test") + .fill("This is a sample text for textarea."); + break; + case "select": + await eventTypePage.locator("form svg").last().click(); + await eventTypePage.getByTestId("select-option-Option 1").click(); + break; + case "multiselect": + await eventTypePage.locator("form svg").nth(4).click(); + await eventTypePage.getByTestId("select-option-Option 1").click(); + break; + case "number": + await eventTypePage.getByLabel("number test").click(); + await eventTypePage.getByLabel("number test").fill("123"); + break; + case "radio": + await eventTypePage.getByRole("radiogroup").getByText("Option 1").check(); + break; + case "text": + await eventTypePage.getByPlaceholder("Text test").click(); + await eventTypePage.getByPlaceholder("Text test").fill("Sample text"); + break; + case "checkbox": + await eventTypePage.getByLabel("Option 1").first().check(); + await eventTypePage.getByLabel("Option 2").first().check(); + break; + case "boolean": + await eventTypePage.getByLabel(`${question} test`).check(); + break; + case "multiemail": + await eventTypePage.getByRole("button", { name: "multiemail test" }).click(); + await eventTypePage.getByPlaceholder("multiemail test").fill(EMAIL); + break; + } + } + } + await eventTypePage.getByTestId(confirmButton).click(); const scheduleSuccessfullyPage = eventTypePage.getByText(scheduleSuccessfullyText); await scheduleSuccessfullyPage.waitFor({ state: "visible" }); diff --git a/apps/web/playwright/managedBooking/allQuestions.e2e.ts b/apps/web/playwright/managedBooking/allQuestions.e2e.ts new file mode 100644 index 0000000000..3e6d355e33 --- /dev/null +++ b/apps/web/playwright/managedBooking/allQuestions.e2e.ts @@ -0,0 +1,98 @@ +/* eslint-disable playwright/no-conditional-in-test */ +import { expect } from "@playwright/test"; + +import { loginUser } from "../fixtures/regularBookings"; +import { test } from "../lib/fixtures"; + +test.describe("Create a Team, a Managed Event Type and add all questions", () => { + const allQuestions = [ + "phone", + "address", + "checkbox", + "boolean", + "textarea", + "multiemail", + "multiselect", + "number", + "radio", + "select", + "text", + ]; + + test.beforeEach(async ({ page, users, bookingPage }) => { + await loginUser(users); + await page.goto("/event-types"); + await bookingPage.createTeam("Test Team"); + await bookingPage.goToTab("Back"); + await bookingPage.createManagedEventType("Test Managed Event Type"); + await bookingPage.goToEventType("Event Types"); + await expect( + page.getByRole("link", { + name: "Test Managed Event Type", + }) + ).toBeVisible(); + await bookingPage.goToEventType("Test Managed Event Type"); + await bookingPage.goToTab("event_advanced_tab_title"); + }); + + test.afterEach(async ({ bookingPage }) => { + await bookingPage.goToEventType("Event Types"); + await bookingPage.goToEventType("Test Managed Event Type"); + await bookingPage.removeManagedEventType(); + await bookingPage.assertManagedEventTypeDeleted(); + await bookingPage.deleteTeam(); + await bookingPage.assertTeamDeleted(); + }); + + test("All Questions as Required", async ({ bookingPage }) => { + for (const question of allQuestions) { + if ( + question !== "number" && + question !== "select" && + question !== "checkbox" && + question !== "boolean" && + question !== "multiselect" && + question !== "radio" + ) { + await bookingPage.addQuestion( + question, + `${question}-test`, + `${question} test`, + true, + `${question} test` + ); + } else { + await bookingPage.addQuestion(question, `${question}-test`, `${question} test`, true); + } + await bookingPage.checkField(question); + } + + await bookingPage.updateEventType({ shouldCheck: true }); + }); + + test("All Questions as Optional", async ({ bookingPage }) => { + for (const question of allQuestions) { + if ( + question !== "number" && + question !== "select" && + question !== "checkbox" && + question !== "boolean" && + question !== "multiselect" && + question !== "radio" + ) { + await bookingPage.addQuestion( + question, + `${question}-test`, + `${question} test`, + false, + `${question} test` + ); + } else { + await bookingPage.addQuestion(question, `${question}-test`, `${question} test`, false); + } + await bookingPage.checkField(question, { isOptional: true }); + } + + await bookingPage.updateEventType({ shouldCheck: true }); + }); +});