add changes

apps/web/playwright/booking/availability.e2e.ts

@@ -0,0 +1,15 @@
+import { loginUser } from "../fixtures/regularBookings";
+import { test } from "../lib/fixtures";
+
+test.describe("Check availability tab in a event-type", () => {
+  test("Check availability in event type", async ({ bookingPage, users, page }) => {
+    await loginUser(users);
+    await bookingPage.goToEventTypesPage();
+
+    await bookingPage.goToEventType("30 min");
+    await bookingPage.goToTab("availability");
+    await bookingPage.checkAvailabilityTab();
+    await bookingPage.goToAvailabilityPage();
+    await bookingPage.checkAvailabilityPage();
+  });
+});

apps/web/playwright/fixtures/regularBookings.ts

@@ -2,6 +2,7 @@ import { expect, type Page } from "@playwright/test";
 
 import dayjs from "@calcom/dayjs";
 
+import { localize } from "../lib/testUtils";
 import type { createUsersFixture } from "./users";
 
 const reschedulePlaceholderText = "Let others know why you need to reschedule";
@@ -196,6 +197,9 @@ export function createBookingPageFixture(page: Page) {
     goToTab: async (tabName: string) => {
       await page.getByTestId(`vertical-tab-${tabName}`).click();
     },
+    goToEventTypesPage: async () => {
+      await page.goto("/event-types");
+    },
     addQuestion: async (
       questionType: string,
       identifier: string,
@@ -356,5 +360,84 @@ export function createBookingPageFixture(page: Page) {
       await scheduleSuccessfullyPage.waitFor({ state: "visible" });
       await expect(scheduleSuccessfullyPage).toBeVisible();
     },
+    checkAvailabilityTab: async () => {
+      const editAvailability = (await localize("en"))("edit_availability");
+
+      // verify if the icon is rendered
+      await expect(page.locator("span").filter({ hasText: "Europe/London" }).locator("svg")).toBeVisible();
+      await expect(page.getByText("Europe/London")).toBeVisible();
+      await page.getByRole("link", { name: editAvailability }).click();
+    },
+    goToAvailabilityPage: async () => {
+      const workingHours = (await localize("en"))("default_schedule_name");
+
+      await page.goto("/availability");
+      await page
+        .getByTestId("schedules")
+        .locator("div")
+        .filter({
+          hasText: workingHours,
+        })
+        .first()
+        .click();
+    },
+    checkAvailabilityPage: async () => {
+      const sunday = (await localize("en"))("sunday");
+      const monday = (await localize("en"))("monday");
+      const wednesday = (await localize("en"))("wednesday");
+      const saturday = (await localize("en"))("saturday");
+      const save = (await localize("en"))("save");
+
+      await page.getByTestId("availablity-title").click();
+      // change availability name
+      await page.getByTestId("availablity-title").fill("Working Hours test");
+      await expect(page.getByText("Mon - Fri, 9:00 AM - 5:00 PM")).toBeVisible();
+      await page.locator("label").filter({ hasText: sunday }).getByRole("switch").click();
+      await page.locator("div").filter({ hasText: monday }).first().click();
+      await page.locator("label").filter({ hasText: wednesday }).getByRole("switch").click();
+      await page.locator("label").filter({ hasText: saturday }).getByRole("switch").click();
+      await page
+        .locator("div")
+        .filter({ hasText: "Sunday9:00am - 5:00pm" })
+        .getByTestId("add-time-availability")
+        .first()
+        .click();
+      await expect(page.locator("div").filter({ hasText: "6:00pm" }).nth(1)).toBeVisible();
+      await page.getByRole("button", { name: save }).click();
+      await expect(page.getByText("Sun - Tue, Thu - Sat, 9:00 AM - 5:00 PM")).toBeVisible();
+      await expect(page.getByText("Sun, 5:00 PM - 6:00 PM")).toBeVisible();
+      await page
+        .locator("div")
+        .filter({ hasText: "Sunday9:00am - 5:00pm" })
+        .getByTestId("copy-button")
+        .first()
+        .click();
+      await expect(
+        page.getByText("Copy times toSelect AllSundayMondayTuesdayWednesdayThursdayFridaySaturday")
+      ).toBeVisible();
+      await page.getByRole("checkbox", { name: monday }).check();
+      await page.getByRole("button", { name: "Apply" }).click();
+      await page.getByRole("button", { name: save }).click();
+      await page
+        .locator("#availability-form div")
+        .filter({ hasText: "TimezoneEurope/London" })
+        .locator("svg")
+        .click();
+      await page.locator("#react-select-3-input").fill("bras");
+      await page.getByTestId("select-option-America/Sao_Paulo").click();
+      await page.getByRole("button", { name: save }).click();
+      await expect(
+        page.getByRole("button", { name: "Working Hours test schedule updated successfully" }).nth(1)
+      ).toBeVisible();
+      await page.getByTestId("add-override").click();
+      await page.getByTestId("incrementMonth").click();
+      await page.getByRole("button", { name: "20" }).click();
+      await page.getByTestId("date-override-mark-unavailable").click();
+      await page.getByTestId("add-override-submit-btn").click();
+      await page.getByTestId("dialog-rejection").click();
+      await page.getByRole("heading", { name: "Wed, 20 December" }).click();
+      await page.getByTestId("date-overrides-list").getByRole("button").nth(1).click();
+      await page.getByRole("button", { name: save }).click();
+    },
   };
 }

packages/features/schedules/components/Schedule.tsx

@@ -107,6 +107,7 @@ const CopyButton = ({
             "text-default",
             open && "ring-brand-500 !bg-subtle outline-none ring-2 ring-offset-1"
           )}
+          data-testid="copy-button"
           type="button"
           tooltip={t("copy_times_to_tooltip")}
           color="minimal"
@@ -192,6 +193,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
             {index === 0 && (
               <Button
                 disabled={disabled}
+                data-testid="add-time-availability"
                 tooltip={t("add_time_availability")}
                 className="text-default mx-2 "
                 type="button"