feat(#1340374): Refacto e2e grid tests, and add e2e tests for recommender

pages

Author: botisSmile

front/e2e/src/helper/alertMessage.ts

@@ -1,5 +1,5 @@
 import { Locator, Page, expect } from '@playwright/test'
-import {generateTestId, TestId} from "./testIds";
+import {generateTestId, TestId} from "../utils/testIds";
 
 /**
  * Helper class to interact with alert messages on the page.

front/e2e/src/helper/dropdown.ts

@@ -1,5 +1,5 @@
 import {expect, Locator, Page} from '@playwright/test'
-import {generateTestId, TestId} from "./testIds";
+import {generateTestId, TestId} from "../utils/testIds";
 
 /**
  * A generic Dropdown class to interact with single or multi-select dropdowns in Playwright.

front/e2e/src/helper/filter.ts

@@ -1,6 +1,6 @@
 import {expect, Locator, Page} from '@playwright/test'
 import {Dropdown} from './dropdown'
-import {generateTestId, TestId} from "./testIds";
+import {generateTestId, TestId} from "../utils/testIds";
 
 /**
  * Enumeration of supported filter types.
@@ -12,6 +12,21 @@ export enum FilterType {
   RANGE,
 }
 
+export type FilterValue<T extends FilterType> =
+  T extends FilterType.BOOLEAN
+    ? boolean
+    : T extends FilterType.TEXT
+    ? string
+    : T extends FilterType.DROPDOWN
+    ? string[]
+    : T extends FilterType.RANGE
+    ? [number, number]
+    : never;
+
+export type FilterValues<TFilters extends Record<string, FilterType>> = {
+  [K in keyof TFilters]?: FilterValue<TFilters[K]>;
+};
+
 /**
  * Generic class to manage and assert filters in a UI, supporting
  * various filter types like dropdowns, booleans, text inputs, and ranges.
@@ -177,6 +192,21 @@ export class Filter<TFilters extends Record<string, FilterType>> {
     }
   }
 
+  public async removeFilters(filters: Partial<{ [K in keyof TFilters]: any }>): Promise<void> {
+    for (const name in filters) {
+      const value = filters[name];
+
+      // If it's an array (only for DROPDOWN), iterate.
+      if (Array.isArray(value) && this.filters[name] !== FilterType.RANGE) {
+        for (const item of value) {
+          await this.removeFilter(name as keyof TFilters & string, item);
+        }
+      } else {
+        await this.removeFilter(name as keyof TFilters & string, value);
+      }
+    }
+  }
+
   /**
    * Adds a new filter based on its type and value.
    *
@@ -185,15 +215,7 @@ export class Filter<TFilters extends Record<string, FilterType>> {
    */
   public async addFilter<Name extends keyof TFilters & string>(
     name: Name,
-    value: TFilters[Name] extends FilterType.BOOLEAN
-      ? boolean
-      : TFilters[Name] extends FilterType.TEXT
-      ? string
-      : TFilters[Name] extends FilterType.DROPDOWN
-      ? string[]
-      : TFilters[Name] extends FilterType.RANGE
-      ? [number, number]
-      : never
+    value: FilterValue<TFilters[Name]>
   ): Promise<void> {
     const type = this.filters[name]
     const filter = this.getFilter()
@@ -243,6 +265,17 @@ export class Filter<TFilters extends Record<string, FilterType>> {
     await expect(activeFiltersCount).toHaveText(count.toString())
   }
 
+  public async addFilters(filters: FilterValues<TFilters>): Promise<void> {
+    for (const name in filters) {
+      const value = filters[name];
+
+        await this.addFilter(
+          name as keyof TFilters & string,
+          value as FilterValue<TFilters[keyof TFilters]>
+        );
+    }
+  }
+
   /**
    * Asserts that the current number of active filters equals the expected count.
    *

front/e2e/src/helper/grid.ts

@@ -1,6 +1,7 @@
 import {Locator, Page, expect} from '@playwright/test'
 import {Pagination} from './pagination'
-import {generateTestId, TestId} from "./testIds";
+import {generateTestId, TestId} from "../utils/testIds";
+import {Filter, FilterType, FilterValues} from "./filter";
 
 interface GridCondition {
   columnName: string
@@ -55,6 +56,82 @@ export class Grid {
     })
   }
 
+  /**
+   * Asserts that the grid headers match the given list.
+   * Asserts that the pagination dropdown contains the given pagination options.
+   * Asserts that the "rows per page" input has the expected value.
+   *
+   * @param headerNames - An array of expected header titles
+   * @param paginationOptions - Array of expected pagination options (as strings)
+   * @param rowsPerPage - Expected number of rows per page
+   *
+   */
+  public async expectHeadersAndPaginationTobe(headerNames: string[], paginationOptions: string[] = ['10', '25', '50'] , rowsPerPage: number = 50): Promise<void> {
+    await this.expectHeadersToBe(headerNames)
+    await this.pagination.expectToHaveOptions(paginationOptions)
+    await this.pagination.expectToHaveRowsPerPage(rowsPerPage)
+  }
+
+  /**
+   * Assert that the expected rows are present after the filters have been applied.
+   *
+   * @param filter - Grid's filter
+   * @param filtersToApply - Filters to apply
+   * @param expectedRow - An array of objects containing:
+   *   - columnName: the header of the column to search in
+   *   - value: the expected value in that column
+   * @param expectedRowCount - Expected row count
+   */
+  public async expectRowsToBe<TFilters extends Record<string, FilterType>>(
+    filter: Filter<TFilters>,
+    filtersToApply: FilterValues<TFilters>,
+    expectedRow: GridCondition[],
+    expectedRowCount: number = 1,
+  ) {
+    await filter.addFilters(filtersToApply)
+    await this.pagination.expectToHaveCount(expectedRowCount)
+    if (expectedRowCount !== 0 || expectedRow.length !== 0) {
+      await this.expectToFindLineWhere(expectedRow)
+    }
+  }
+
+  /**
+   * Assert that the expected rows are present after the filters have been applied.
+   *
+   * @param filter - Grid's filter
+   * @param term - The search term to input
+   * @param expectedRow - An array of objects containing:
+   *   - columnName: the header of the column to search in
+   *   - value: the expected value in that column
+   * @param expectedRowCount - Expected row count
+   */
+  public async expectRowsAfterSearchToBe<TFilters extends Record<string, FilterType>>(
+    filter: Filter<TFilters>,
+    term: string,
+    expectedRow: GridCondition[],
+    expectedRowCount: number = 1,
+  ) {
+    await filter.searchTerm(term)
+    await this.pagination.expectToHaveCount(expectedRowCount)
+    if (expectedRowCount !== 0 || expectedRow.length !== 0) {
+      await this.expectToFindLineWhere(expectedRow)
+    }
+  }
+
+  /**
+   * Assert that All filters have been removed.
+   *
+   * @param filter - Grid's filter
+   * @param defaultRowCount - Row count without filters
+   */
+  public async expectAllFiltersRemoved<TFilters extends Record<string, FilterType>>(
+    filter: Filter<TFilters>,
+    defaultRowCount: number,
+  ) {
+    await filter.clearFilters()
+    await this.pagination.expectToHaveCount(defaultRowCount)
+  }
+
   /**
    * Returns the total number of rows in the grid via the pagination component.
    *
@@ -136,6 +213,14 @@ export class Grid {
     await expect(grid).toBeVisible()
   }
 
+  public static getCommonGridTestIds(
+    resourceName: string,
+  ) {
+    return {
+      createButton: generateTestId(TestId.GRID_CREATE_BUTTON, resourceName)
+    } as const
+  }
+
   /**
    * Lazily retrieves the grid Locator.
    *

front/e2e/src/helper/pagination.ts

@@ -1,5 +1,5 @@
 import { Locator, Page, expect } from '@playwright/test'
-import {generateTestId, TestId} from "./testIds";
+import {generateTestId, TestId} from "../utils/testIds";
 
 /**
  * Represents a pagination component on a web page.

front/e2e/src/helper/switch.ts

@@ -1,5 +1,5 @@
 import { Locator, Page, expect } from '@playwright/test'
-import {generateTestId, TestId} from "./testIds";
+import {generateTestId, TestId} from "../utils/testIds";
 
 /**
  * Represents a toggle switch component on a web page.

front/e2e/src/helper/tabs.ts

@@ -1,5 +1,5 @@
 import {expect, Locator, Page} from "@playwright/test";
-import {generateTestId, TestId} from "./testIds";
+import {generateTestId, TestId} from "../utils/testIds";
 
 /**
  * Utility class to interact with a Tabs component in Playwright tests.

front/e2e/src/tests/globals/appBar.spec.ts

@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test'
-import {login} from '../../helper/auth'
-import {generateTestId, TestId} from "../../helper/testIds";
+import {login} from '../../utils/auth'
+import {generateTestId, TestId} from "../../utils/testIds";
 
 const testIds = {
   appBar: generateTestId(TestId.APP_BAR),

front/e2e/src/tests/globals/sideBar.spec.ts

@@ -1,6 +1,6 @@
 import {expect, test} from '@playwright/test'
-import {login} from '../../helper/auth'
-import {generateTestId, TestId} from "../../helper/testIds";
+import {login} from '../../utils/auth'
+import {generateTestId, TestId} from "../../utils/testIds";
 
 const testIds = {
   sideBar: generateTestId(TestId.SIDE_BAR),

front/e2e/src/tests/pages/admin/analyze/results.spec.ts

@@ -1,9 +1,9 @@
-import {login} from '../../../../helper/auth'
+import {login} from '../../../../utils/auth'
 import {Dropdown} from '../../../../helper/dropdown'
 import {Grid} from '../../../../helper/grid'
-import {navigateTo} from '../../../../helper/menu'
+import {navigateTo} from '../../../../utils/menu'
 import {expect, test} from '@playwright/test'
-import {generateTestId, TestId} from "../../../../helper/testIds";
+import {generateTestId, TestId} from "../../../../utils/testIds";
 
 const testIds = {
   explainButton: generateTestId(TestId.BUTTON, 'explain'),