test: add e2e tests for filters on /insights/routing (calcom#21332)

* test: add e2e tests for insights routing filters

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: improve stability of insights routing filters e2e tests

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: address PR feedback for insights routing filters e2e tests

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: add explicit page navigation to resolve timeout issues in filters.e2e.ts

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: navigate to routing tab after loading insights page

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix e2e tests

* fix tests

* rename

* fix tests

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: eunjae@cal.com <hey@eunjae.dev>

Author: devin-ai-integration[bot]

apps/web/playwright/filter-helpers.ts

@@ -9,18 +9,65 @@ export async function selectFilter(page: Page, columnId: string) {
   await page.getByTestId(`add-filter-item-${columnId}`).click();
 }
 
+export async function openFilter(page: Page, columnId: string) {
+  await page.getByTestId(`filter-popover-trigger-${columnId}`).click();
+}
+
 /**
  * Apply a filter with a specific value
  */
-export async function applyFilter(page: Page, columnId: string, value: 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 openFilter(page, columnId);
+  await selectOptionValue(page, columnId, value);
+  await page.keyboard.press("Escape");
+}
 
-  await page.getByTestId(`filter-popover-trigger-${columnId}`).click();
-
+export async function selectOptionValue(page: Page, columnId: string, value: string) {
   await page.getByTestId(`select-filter-options-${columnId}`).getByRole("option", { name: value }).click();
+}
+
+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 openFilter(page, columnId);
+
+  await page.getByTestId(`text-filter-options-select-${columnId}`).click();
+  await page
+    .locator(`[data-testid="text-filter-options-${columnId}"] [id^="react-select-"]`)
+    .getByText(operator)
+    .first()
+    .click();
+  if (operand) {
+    await page.keyboard.press("Tab");
+    await page.keyboard.type(operand);
+  }
+  await page.keyboard.press("Enter");
+
+  await page.keyboard.press("Escape");
+}
+
+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 openFilter(page, columnId);
+
+  await page.getByTestId(`number-filter-options-select-${columnId}`).click();
+  await page
+    .locator(`[data-testid="number-filter-options-${columnId}"] [id^="react-select-"]`)
+    .getByText(operator)
+    .first()
+    .click();
+  await page.keyboard.press("Tab");
+  await page.keyboard.type(String(operand));
+  await page.keyboard.press("Enter");
 
   await page.keyboard.press("Escape");
 }

apps/web/playwright/filter-segment.e2e.ts

@@ -3,7 +3,7 @@ import { expect } from "@playwright/test";
 import { MembershipRole } from "@calcom/prisma/enums";
 
 import {
-  applyFilter,
+  applySelectFilter,
   createFilterSegment,
   selectSegment,
   deleteSegment,
@@ -56,7 +56,7 @@ test.describe("Filter Segment Functionality", () => {
     const segmentName = "Admin Users";
 
     await test.step("Can apply and save a role filter as a segment", async () => {
-      await applyFilter(page, "role", "admin");
+      await applySelectFilter(page, "role", "admin");
 
       await expect(page.getByText(adminUser.email)).toBeVisible();
       await expect(page.getByText(memberUser.email)).toBeHidden();
@@ -110,7 +110,7 @@ test.describe("Filter Segment Functionality", () => {
     const dataTable = page.getByTestId("user-list-data-table");
     await expect(dataTable).toBeVisible();
 
-    await applyFilter(page, "role", "admin");
+    await applySelectFilter(page, "role", "admin");
     const segmentName = "Admin Users Persistent";
     await createFilterSegment(page, segmentName);
 
@@ -158,7 +158,7 @@ test.describe("Filter Segment Functionality", () => {
     const segmentName = "Team Admin Filter";
 
     await test.step("Can create a team scope filter segment", async () => {
-      await applyFilter(page, "role", "admin");
+      await applySelectFilter(page, "role", "admin");
 
       await createFilterSegment(page, segmentName, {
         teamScope: true,