From 4cc83530f937fc80d58776ab80cbc4055e55a8b5 Mon Sep 17 00:00:00 2001 From: "devin-ai-integration[bot]" <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 22 May 2025 08:46:51 +0000 Subject: [PATCH] refactor(e2e): use filter helper methods instead of raw selectors (#21460) * refactor(e2e): use filter helper methods instead of raw selectors Co-Authored-By: eunjae@cal.com * refactor(e2e): rename selectFilter to addFilter and update all usages Co-Authored-By: eunjae@cal.com --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: eunjae@cal.com --- apps/web/playwright/bookings-list.e2e.ts | 21 ++++++++----------- apps/web/playwright/filter-helpers.ts | 10 ++++----- .../insights-routing-filters.e2e.ts | 8 +++---- apps/web/playwright/insights.e2e.ts | 8 +++---- apps/web/playwright/out-of-office.e2e.ts | 17 +++++++-------- 5 files changed, 29 insertions(+), 35 deletions(-) diff --git a/apps/web/playwright/bookings-list.e2e.ts b/apps/web/playwright/bookings-list.e2e.ts index 1b1b191252..5fe00b7b66 100644 --- a/apps/web/playwright/bookings-list.e2e.ts +++ b/apps/web/playwright/bookings-list.e2e.ts @@ -5,6 +5,7 @@ import prisma from "@calcom/prisma"; import { BookingStatus } from "@calcom/prisma/client"; import { MembershipRole, SchedulingType } from "@calcom/prisma/enums"; +import { addFilter, openFilter } from "./filter-helpers"; import { createTeamEventType } from "./fixtures/users"; import type { Fixtures } from "./lib/fixtures"; import { test } from "./lib/fixtures"; @@ -76,9 +77,8 @@ test.describe("Bookings", () => { await page.goto(`/bookings/upcoming`, { waitUntil: "domcontentloaded" }); await bookingsGetResponse; - await page.locator('[data-testid="add-filter-button"]').click(); - await page.locator('[data-testid="add-filter-item-dateRange"]').click(); - await page.locator('[data-testid="filter-popover-trigger-dateRange"]').click(); + await addFilter(page, "dateRange"); + await openFilter(page, "dateRange"); await expect(page.locator('[data-testid="date-range-options-c"]')).toBeHidden(); await expect(page.locator('[data-testid="date-range-options-w"]')).toBeHidden(); @@ -243,9 +243,8 @@ test.describe("Bookings", () => { await page.goto(`/bookings/past`); await bookingsGetResponse; - await page.locator('[data-testid="add-filter-button"]').click(); - await page.locator('[data-testid="add-filter-item-dateRange"]').click(); - await page.locator('[data-testid="filter-popover-trigger-dateRange"]').click(); + await addFilter(page, "dateRange"); + await openFilter(page, "dateRange"); await expect(page.locator('[data-testid="date-range-options-c"]')).toBeVisible(); await expect(page.locator('[data-testid="date-range-options-w"]')).toBeVisible(); @@ -354,9 +353,8 @@ test.describe("Bookings", () => { await page.goto(`/bookings/upcoming`, { waitUntil: "domcontentloaded" }); await bookingsGetResponse; - await page.locator('[data-testid="add-filter-button"]').click(); - await page.locator('[data-testid="add-filter-item-userId"]').click(); - await page.locator('[data-testid="filter-popover-trigger-userId"]').click(); + await addFilter(page, "userId"); + await openFilter(page, "userId"); const bookingsGetResponse2 = page.waitForResponse( (response) => response.url().includes("/api/trpc/bookings/get?batch=1") && response.status() === 200 @@ -461,9 +459,8 @@ test.describe("Bookings", () => { await page.goto("/bookings/upcoming", { waitUntil: "domcontentloaded" }); await bookingsGetResponse1; - await page.locator('[data-testid="add-filter-button"]').click(); - await page.locator('[data-testid="add-filter-item-userId"]').click(); - await page.locator('[data-testid="filter-popover-trigger-userId"]').click(); + await addFilter(page, "userId"); + await openFilter(page, "userId"); await page .locator(`[data-testid="select-filter-options-userId"] [role="option"]:has-text("${anotherUser}")`) .click(); diff --git a/apps/web/playwright/filter-helpers.ts b/apps/web/playwright/filter-helpers.ts index 0e834d0b01..49cb0b8c9d 100644 --- a/apps/web/playwright/filter-helpers.ts +++ b/apps/web/playwright/filter-helpers.ts @@ -2,9 +2,9 @@ import type { Page } from "@playwright/test"; import { expect } from "@playwright/test"; /** - * Select a filter from the filter dropdown + * Add a filter from the filter dropdown */ -export async function selectFilter(page: Page, columnId: string) { +export async function addFilter(page: Page, columnId: string) { await page.getByTestId("add-filter-button").click(); await page.getByTestId(`add-filter-item-${columnId}`).click(); } @@ -19,7 +19,7 @@ export async function openFilter(page: Page, columnId: string) { export async function applySelectFilter(page: Page, columnId: string, value: string) { const existingFilter = page.getByTestId(`filter-popover-trigger-${columnId}`); if (!(await existingFilter.isVisible())) { - await selectFilter(page, columnId); + await addFilter(page, columnId); } await openFilter(page, columnId); await selectOptionValue(page, columnId, value); @@ -33,7 +33,7 @@ export async function selectOptionValue(page: Page, columnId: string, value: str export async function applyTextFilter(page: Page, columnId: string, operator: string, operand?: string) { const existingFilter = page.getByTestId(`filter-popover-trigger-${columnId}`); if (!(await existingFilter.isVisible())) { - await selectFilter(page, columnId); + await addFilter(page, columnId); } await openFilter(page, columnId); @@ -55,7 +55,7 @@ export async function applyTextFilter(page: Page, columnId: string, operator: st export async function applyNumberFilter(page: Page, columnId: string, operator: string, operand: number) { const existingFilter = page.getByTestId(`filter-popover-trigger-${columnId}`); if (!(await existingFilter.isVisible())) { - await selectFilter(page, columnId); + await addFilter(page, columnId); } await openFilter(page, columnId); diff --git a/apps/web/playwright/insights-routing-filters.e2e.ts b/apps/web/playwright/insights-routing-filters.e2e.ts index 1410f787ec..56b81dde0c 100644 --- a/apps/web/playwright/insights-routing-filters.e2e.ts +++ b/apps/web/playwright/insights-routing-filters.e2e.ts @@ -4,7 +4,7 @@ import { v4 as uuidv4 } from "uuid"; import { BookingStatus, MembershipRole } from "@calcom/prisma/enums"; import { - selectFilter, + addFilter, openFilter, clearFilters, applySelectFilter, @@ -286,7 +286,7 @@ test.describe("Insights > Routing Filters", () => { await page.goto(`/insights/routing`); - await selectFilter(page, "bookingAttendees"); + await addFilter(page, "bookingAttendees"); await openFilter(page, "bookingAttendees"); await page.getByPlaceholder("Filter attendees by name or email").fill("John"); await page.keyboard.press("Enter"); @@ -295,7 +295,7 @@ test.describe("Insights > Routing Filters", () => { await expect(page.getByText("Response 2")).toBeHidden(); await clearFilters(page); - await selectFilter(page, "bookingAttendees"); + await addFilter(page, "bookingAttendees"); await openFilter(page, "bookingAttendees"); await page.getByPlaceholder("Filter attendees by name or email").fill("jane.smith@example"); await page.keyboard.press("Enter"); @@ -304,7 +304,7 @@ test.describe("Insights > Routing Filters", () => { await expect(page.getByText("Response 1")).toBeHidden(); await clearFilters(page); - await selectFilter(page, "bookingAttendees"); + await addFilter(page, "bookingAttendees"); await openFilter(page, "bookingAttendees"); await page.getByPlaceholder("Filter attendees by name or email").fill("JANE"); await page.keyboard.press("Enter"); diff --git a/apps/web/playwright/insights.e2e.ts b/apps/web/playwright/insights.e2e.ts index 973e195204..d245f20f9e 100644 --- a/apps/web/playwright/insights.e2e.ts +++ b/apps/web/playwright/insights.e2e.ts @@ -3,6 +3,7 @@ import { expect } from "@playwright/test"; import { randomString } from "@calcom/lib/random"; import prisma from "@calcom/prisma"; +import { addFilter, openFilter, clearFilters } from "./filter-helpers"; import { test } from "./lib/fixtures"; test.describe.configure({ mode: "parallel" }); @@ -202,14 +203,13 @@ test.describe("Insights", async () => { await page.keyboard.press("Escape"); // Choose User filter item from dropdown - await page.getByTestId("add-filter-button").click(); - await page.getByTestId("add-filter-item-bookingUserId").click(); + await addFilter(page, "bookingUserId"); // Wait for the URL to include bookingUserId await page.waitForURL((url) => url.toString().includes("bookingUserId")); // Click User filter to see a user list - await page.getByTestId("filter-popover-trigger-bookingUserId").click(); + await openFilter(page, "bookingUserId"); await page .locator('[data-testid="select-filter-options-bookingUserId"]') @@ -226,7 +226,7 @@ test.describe("Insights", async () => { // press escape button to close the filter await page.keyboard.press("Escape"); - await page.getByTestId("clear-filters-button").click(); + await clearFilters(page); await expect(page.url()).not.toContain("bookingUserId"); }); diff --git a/apps/web/playwright/out-of-office.e2e.ts b/apps/web/playwright/out-of-office.e2e.ts index 3290994ec7..2447195667 100644 --- a/apps/web/playwright/out-of-office.e2e.ts +++ b/apps/web/playwright/out-of-office.e2e.ts @@ -7,6 +7,7 @@ import { randomString } from "@calcom/lib/random"; import prisma from "@calcom/prisma"; import { MembershipRole } from "@calcom/prisma/enums"; +import { addFilter, openFilter } from "./filter-helpers"; import { test } from "./lib/fixtures"; import { localize } from "./lib/localize"; import { submitAndWaitForResponse } from "./lib/testUtils"; @@ -657,8 +658,7 @@ test.describe("Out of office", () => { await page.waitForResponse( (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200 ); - await page.locator('[data-testid="add-filter-button"]').click(); - await page.locator('[data-testid="add-filter-item-dateRange"]').click(); + await addFilter(page, "dateRange"); await expect( page.locator('[data-testid="filter-popover-trigger-dateRange"]', { hasText: "Last 7 Days" }).first() ).toBeVisible(); @@ -672,9 +672,8 @@ test.describe("Out of office", () => { await page.waitForResponse( (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200 ); - await page.locator('[data-testid="add-filter-button"]').click(); - await page.locator('[data-testid="add-filter-item-dateRange"]').click(); - await page.locator('[data-testid="filter-popover-trigger-dateRange"]').click(); + await addFilter(page, "dateRange"); + await openFilter(page, "dateRange"); await expect(page.locator('[data-testid="date-range-options-tdy"]')).toBeVisible(); //Today await expect(page.locator('[data-testid="date-range-options-w"]')).toBeVisible(); //Last 7 Days @@ -777,11 +776,10 @@ test.describe("Out of office", () => { //Default filter 'Last 7 Days' when DateRange Filter is selected await test.step("Default filter - 'Last 7 Days'", async () => { - await page.locator('[data-testid="add-filter-button"]').click(); + await addFilter(page, "dateRange"); const entriesListRespPromise = page.waitForResponse( (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200 ); - await page.locator('[data-testid="add-filter-item-dateRange"]').click(); await entriesListRespPromise; //1 OOO record should be visible for member3, end=currentDate-4days @@ -839,14 +837,13 @@ test.describe("Out of office", () => { //Select 'Last 30 Days' await test.step("select 'Last 30 Days'", async () => { - await page.locator('[data-testid="add-filter-button"]').click(); + await addFilter(page, "dateRange"); const entriesListRespPromise1 = page.waitForResponse( (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200 ); - await page.locator('[data-testid="add-filter-item-dateRange"]').click(); await entriesListRespPromise1; - await page.locator('[data-testid="filter-popover-trigger-dateRange"]').click(); + await openFilter(page, "dateRange"); const entriesListRespPromise2 = page.waitForResponse( (response) => response.url().includes("outOfOfficeEntriesList") && response.status() === 200 );