test: Create E2E tests to check the responsive design for a regular booking and edit a regular event type (responsiveLayoute2e) (#12432)

* add tests for responsive layout * test: Create E2E tests to check the responsive design for a regular booking and edit a regular event type * test: Create E2E tests to check the responsive design for a regular booking and edit a regular event type * test: Create E2E tests to check the responsive design for a regular booking and edit a regular event type * Create tests * Create tests * Create tests * add changes --------- Co-authored-by: gitstart-calcom <gitstart-calcom@users.noreply.github.com> Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com> Co-authored-by: Keith Williams <keithwillcode@gmail.com>
2024-01-24 13:02:12 -03:00
parent 24a4646fdc
commit 7b30ade284
2 changed files with 118 additions and 0 deletions
@@ -0,0 +1,107 @@
+/* eslint-disable playwright/no-conditional-in-test */
+import { loginUser } from "../fixtures/regularBookings";
+import { test } from "../lib/fixtures";
+
+const resolutions = [
+  {
+    width: 1920,
+    height: 1080,
+  },
+  {
+    width: 1280,
+    height: 720,
+  },
+  {
+    width: 640,
+    height: 480,
+  },
+];
+
+test.describe("Booking With All Questions", () => {
+  test.beforeEach(async ({ page, users, bookingPage }) => {
+    await loginUser(users);
+    await page.goto("/event-types");
+    await bookingPage.goToEventType("30 min");
+    await bookingPage.goToTab("event_advanced_tab_title");
+
+    const allQuestions = [
+      "phone",
+      "address",
+      "checkbox",
+      "boolean",
+      "textarea",
+      "multiemail",
+      "multiselect",
+      "number",
+      "radio",
+      "select",
+      "text",
+    ];
+    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);
+    }
+  });
+
+  for (const resolution of resolutions) {
+    test(`Booking with ${resolution.width}x${resolution.height} resolution and all questions`, async ({
+      bookingPage,
+    }) => {
+      await bookingPage.setResolution(resolution.width, resolution.height);
+      await bookingPage.updateEventType();
+    });
+  }
+});
+
+test.describe("Booking With no questions", () => {
+  test.beforeEach(async ({ page, users, bookingPage }) => {
+    await loginUser(users);
+    await page.goto("/event-types");
+    await bookingPage.goToEventType("30 min");
+    await bookingPage.goToTab("event_advanced_tab_title");
+  });
+
+  for (const resolution of resolutions) {
+    test(`Booking with ${resolution.width}x${resolution.height} resolution and no questions`, async ({
+      bookingPage,
+    }) => {
+      await bookingPage.setResolution(resolution.width, resolution.height);
+      await bookingPage.updateEventType();
+    });
+  }
+});
+
+test.describe("Booking page with no questions", () => {
+  test.beforeEach(async ({ page, users, bookingPage }) => {
+    await loginUser(users);
+    await page.goto("/event-types");
+    await bookingPage.goToEventType("30 min");
+    await bookingPage.goToTab("event_advanced_tab_title");
+  });
+
+  for (const resolution of resolutions) {
+    test(`Booking page with ${resolution.width}x${resolution.height} resolution`, async ({ bookingPage }) => {
+      const eventTypePage = await bookingPage.previewEventType();
+      await eventTypePage.setViewportSize({ width: resolution.width, height: resolution.height });
+      await bookingPage.selectTimeSlot(eventTypePage);
+      await bookingPage.confirmBooking(eventTypePage);
+    });
+  }
+});
@@ -207,6 +207,9 @@ export function createBookingPageFixture(page: Page) {
    goToTab: async (tabName: string) => {
      await page.getByTestId(`vertical-tab-${tabName}`).click();
    },
+    setResolution: async (width: number, height: number) => {
+      await page.setViewportSize({ width: width, height: height });
+    },
    addQuestion: async (
      questionType: string,
      identifier: string,
@@ -325,6 +328,14 @@ export function createBookingPageFixture(page: Page) {
      await expect(eventTypePage.getByTestId("cancelled-headline")).toBeVisible();
    },

+    confirmBooking: async (eventTypePage: Page) => {
+      const confirmButton = "confirm-book-button";
+      await eventTypePage.getByTestId(confirmButton).click();
+      const scheduleSuccessfullyPage = eventTypePage.getByText(scheduleSuccessfullyText);
+      await scheduleSuccessfullyPage.waitFor({ state: "visible" });
+      await expect(scheduleSuccessfullyPage).toBeVisible();
+    },
+
    fillAndConfirmBooking: async ({
      eventTypePage,
      placeholderText,