fix: anvil explorer pagination test (#4453)

Author: Fran McDade

e2e/anvil/anvil-dataset.spec.ts

@@ -8,14 +8,7 @@ import {
   CHIP_TEXT_ACCESS_REQUIRED,
   DatasetAccess,
 } from "./common/constants";
-import {
-  MUI_ALERT_ROOT,
-  MUI_BUTTON_GROUP_ROOT,
-  MUI_FORM_CONTROL_ROOT,
-  MUI_TABLE_CELL_ROOT,
-  MUI_TABLE_ROOT,
-  MUI_TABLE_ROW_ROOT,
-} from "../features/common/constants";
+import { MUI_CLASSES } from "../features/common/constants";
 import { ROUTE_MANIFEST_DOWNLOAD } from "../../site-config/anvil-cmg/dev/export/constants";
 import { ANVIL_CMG_CATEGORY_KEY } from "../../site-config/anvil-cmg/category";
 
@@ -54,7 +47,7 @@ describe("Dataset", () => {
     // Confirm the login alert is displayed.
     await expect(
       page.locator(
-        `${MUI_ALERT_ROOT}:has-text("To export this dataset, please sign in and, if necessary, request access.")`
+        `${MUI_CLASSES.ALERT}:has-text("To export this dataset, please sign in and, if necessary, request access.")`
       )
     ).toBeVisible();
   });
@@ -99,7 +92,7 @@ describe("Dataset", () => {
     // Confirm the login alert is displayed.
     await expect(
       page.locator(
-        `${MUI_ALERT_ROOT}:has-text("To download this dataset manifest, please sign in and, if necessary, request access.")`
+        `${MUI_CLASSES.ALERT}:has-text("To download this dataset manifest, please sign in and, if necessary, request access.")`
       )
     ).toBeVisible();
   });
@@ -115,7 +108,7 @@ describe("Dataset", () => {
 
     // Confirm the file manifest page is loaded: check there are two buttons
     // (one for download, one for copy to clipboard).
-    const buttons = page.locator(`${MUI_BUTTON_GROUP_ROOT} button`);
+    const buttons = page.locator(`${MUI_CLASSES.BUTTON_GROUP} button`);
 
     // Ensure there are exactly two buttons.
     await expect(buttons).toHaveCount(2);
@@ -153,7 +146,7 @@ describe("Dataset", () => {
     await clickLink(page, BUTTON_TEXT_ANALYZE_IN_TERRA);
 
     // Confirm the analyze in Terra page is loaded: check for form elements.
-    await expect(page.locator(MUI_FORM_CONTROL_ROOT).first()).toBeVisible();
+    await expect(page.locator(MUI_CLASSES.FORM_CONTROL).first()).toBeVisible();
   });
 
   test("displays analyze in Terra selected data", async ({ page }) => {
@@ -213,12 +206,12 @@ async function goToDataset(page: Page, access: DatasetAccess): Promise<void> {
   // Find a dataset that user has access to.
   const datasetRow = page
     .locator(
-      `${MUI_TABLE_ROOT} ${MUI_TABLE_ROW_ROOT}:has(${MUI_TABLE_CELL_ROOT}:has-text("${access}"))`
+      `${MUI_CLASSES.TABLE} ${MUI_CLASSES.TABLE_ROW}:has(${MUI_CLASSES.TABLE_CELL}:has-text("${access}"))`
     )
     .first();
   await expect(datasetRow).toBeVisible(); // Confirm at least one dataset has been found.
   const datasetLink = datasetRow.locator(
-    `${MUI_TABLE_CELL_ROOT}:first-child a`
+    `${MUI_CLASSES.TABLE_CELL}:first-child a`
   );
   const datasetTitle = await datasetLink.innerText();
   await datasetLink.click();

e2e/anvil/anvil-filters.spec.ts

@@ -10,8 +10,8 @@ import {
 } from "../testFunctions";
 import {
   ANVIL_FILTER_NAMES,
-  ANVIL_TABS,
   ANVIL_TAB_TEST_ORDER,
+  ANVIL_TABS,
   BIOSAMPLE_TYPE_INDEX,
   CONSENT_GROUP_INDEX,
   DATASET_INDEX,

e2e/features/common/constants.ts

@@ -1,6 +1,19 @@
-export const MUI_ALERT_ROOT = ".MuiAlert-root";
-export const MUI_BUTTON_GROUP_ROOT = ".MuiButtonGroup-root";
-export const MUI_FORM_CONTROL_ROOT = ".MuiFormControl-root";
-export const MUI_TABLE_CELL_ROOT = ".MuiTableCell-root";
-export const MUI_TABLE_ROOT = ".MuiTable-root";
-export const MUI_TABLE_ROW_ROOT = ".MuiTableRow-root";
+export const KEYBOARD_KEYS = {
+  ESCAPE: "Escape",
+};
+
+export const MUI_CLASSES = {
+  ALERT: ".MuiAlert-root",
+  BUTTON: ".MuiButton-root",
+  BUTTON_GROUP: ".MuiButtonGroup-root",
+  FORM_CONTROL: ".MuiFormControl-root",
+  ICON_BUTTON: ".MuiIconButton-root",
+  LIST: ".MuiList-root",
+  LIST_ITEM_BUTTON: ".MuiListItemButton-root",
+  POPOVER: ".MuiPopover-root",
+  TABLE: ".MuiTable-root",
+  TABLE_BODY: ".MuiTableBody-root",
+  TABLE_CELL: ".MuiTableCell-root",
+  TABLE_CONTAINER: ".MuiTableContainer-root",
+  TABLE_ROW: ".MuiTableRow-root",
+};

e2e/testFunctions.ts

@@ -1,5 +1,7 @@
 import { expect, Locator, Page } from "@playwright/test";
 import { ColumnDescription, TabDescription } from "./testInterfaces";
+import { TEST_IDS } from "@databiosphere/findable-ui/lib/tests/testIds";
+import { KEYBOARD_KEYS, MUI_CLASSES } from "./features/common/constants";
 
 /* eslint-disable sonarjs/no-duplicate-string  -- ignoring duplicate strings here */
 
@@ -1038,7 +1040,10 @@ export async function filterAndTestLastPagePagination(
 ): Promise<boolean> {
   // Filter to reduce the number of pages that must be selected
   await page.goto(tab.url);
-  await page.getByText(filterRegex(filterName)).click();
+  await page
+    .getByTestId(TEST_IDS.FILTERS)
+    .getByText(filterRegex(filterName))
+    .click();
   await expect(page.getByRole("checkbox").first()).toBeVisible();
   const filterTexts = await page
     .getByRole("button")
@@ -1069,25 +1074,41 @@ export async function filterAndTestLastPagePagination(
     return false;
   }
   const minFilterValue = Math.min(...validFilterCounts);
+
+  const results = await page
+    .getByTestId(TEST_IDS.TABLE_PAGINATION_RESULTS)
+    .textContent();
+
   await page
     .getByRole("button")
     .filter({ hasText: RegExp(`${minFilterValue}[\\s]*$`) })
     .click();
-  await page.locator("body").click();
-  await expect(getFirstRowNthColumnCellLocator(page, 0)).toBeVisible();
+
+  await expect
+    .poll(
+      async () =>
+        await page.getByTestId(TEST_IDS.TABLE_PAGINATION_RESULTS).textContent()
+    )
+    .not.toEqual(results);
+
+  await page.keyboard.press(KEYBOARD_KEYS.ESCAPE);
 
   // Should start on first page, and there should be multiple pages available
   await expect(
-    page.locator(".MuiPaper-table").getByText(PAGE_COUNT_REGEX, { exact: true })
+    page
+      .getByTestId(TEST_IDS.TABLE_PAGINATION_PAGE)
+      .getByText(PAGE_COUNT_REGEX, { exact: true })
   ).toHaveText(/Page 1 of \d+/);
   await expect(
-    page.locator(".MuiPaper-table").getByText(PAGE_COUNT_REGEX, { exact: true })
+    page
+      .getByTestId(TEST_IDS.TABLE_PAGINATION_PAGE)
+      .getByText(PAGE_COUNT_REGEX, { exact: true })
   ).not.toHaveText("Page 1 of 1");
 
   // Detect number of pages
   const splitStartingPageText = (
     await page
-      .locator(".MuiPaper-table")
+      .getByTestId(TEST_IDS.TABLE_PAGINATION_PAGE)
       .getByText(PAGE_COUNT_REGEX, { exact: true })
       .innerText()
   ).split(" ");
@@ -1098,30 +1119,37 @@ export async function filterAndTestLastPagePagination(
   for (let i = 2; i < maxPages + 1; i++) {
     // (dispatchevent necessary because the filter menu sometimes interrupts the click event)
     await page
-      .getByRole("button")
-      .filter({ has: page.getByTestId(FORWARD_BUTTON_TEST_ID) })
+      .getByTestId(TEST_IDS.TABLE_PAGINATION)
+      .locator(MUI_CLASSES.ICON_BUTTON)
+      .last()
       .dispatchEvent("click");
     await expect(getFirstRowNthColumnCellLocator(page, 0)).toBeVisible();
     // Expect the page count to have incremented
-    await expect(page.getByText(PAGE_COUNT_REGEX, { exact: true })).toHaveText(
-      `Page ${i} of ${maxPages}`
-    );
+    await expect(
+      page
+        .getByTestId(TEST_IDS.TABLE_PAGINATION_PAGE)
+        .getByText(PAGE_COUNT_REGEX, { exact: true })
+    ).toHaveText(`Page ${i} of ${maxPages}`);
   }
   // Expect to be on the last page
-  await expect(page.getByText(PAGE_COUNT_REGEX, { exact: true })).toContainText(
-    `Page ${maxPages} of ${maxPages}`
-  );
+  await expect(
+    page
+      .getByTestId(TEST_IDS.TABLE_PAGINATION_PAGE)
+      .getByText(PAGE_COUNT_REGEX, { exact: true })
+  ).toContainText(`Page ${maxPages} of ${maxPages}`);
   // Expect the back button to be enabled on the last page
   await expect(
     page
-      .getByRole("button")
-      .filter({ has: page.getByTestId(BACK_BUTTON_TEST_ID) })
+      .getByTestId(TEST_IDS.TABLE_PAGINATION)
+      .locator(MUI_CLASSES.ICON_BUTTON)
+      .first()
   ).toBeEnabled();
   // Expect the forward button to be disabled
   await expect(
     page
-      .getByRole("button")
-      .filter({ has: page.getByTestId(FORWARD_BUTTON_TEST_ID) })
+      .getByTestId(TEST_IDS.TABLE_PAGINATION)
+      .locator(MUI_CLASSES.ICON_BUTTON)
+      .last()
   ).toBeDisabled();
   return true;
 }
@@ -1142,7 +1170,9 @@ export async function testPaginationContent(
     "true"
   );
 
-  const firstElementTextLocator = getFirstRowNthColumnCellLocator(page, 0);
+  await page.getByTestId(TEST_IDS.TABLE_FIRST_CELL).waitFor();
+
+  const firstElementTextLocator = page.getByTestId(TEST_IDS.TABLE_FIRST_CELL);
 
   // Should start on first page
   await expect(page.getByText(PAGE_COUNT_REGEX, { exact: true })).toHaveText(
@@ -1158,8 +1188,9 @@ export async function testPaginationContent(
     // Click the next button
     // dispatchEvent necessary because the table loading component sometimes interrupts a click event
     await page
-      .getByRole("button")
-      .filter({ has: page.getByTestId(FORWARD_BUTTON_TEST_ID) })
+      .getByTestId(TEST_IDS.TABLE_PAGINATION)
+      .locator(MUI_CLASSES.ICON_BUTTON)
+      .last()
       .dispatchEvent("click");
     // Expect the page count to have incremented
     await expect(page.getByText(PAGE_COUNT_REGEX, { exact: true })).toHaveText(
@@ -1168,15 +1199,17 @@ export async function testPaginationContent(
     // Expect the back button to be enabled
     await expect(
       page
-        .getByRole("button")
-        .filter({ has: page.getByTestId(BACK_BUTTON_TEST_ID) })
+        .getByTestId(TEST_IDS.TABLE_PAGINATION)
+        .locator(MUI_CLASSES.ICON_BUTTON)
+        .first()
     ).toBeEnabled();
     // Expect the forwards button to be enabled
     if (i != maxPages) {
       await expect(
         page
-          .getByRole("button")
-          .filter({ has: page.getByTestId(FORWARD_BUTTON_TEST_ID) })
+          .getByTestId(TEST_IDS.TABLE_PAGINATION)
+          .locator(MUI_CLASSES.ICON_BUTTON)
+          .last()
       ).toBeEnabled();
     }
     // Expect the first entry to have changed on the new page
@@ -1191,9 +1224,11 @@ export async function testPaginationContent(
   for (let i = 0; i < maxPages - 1; i++) {
     const OldFirstTableEntry = FirstTableEntries[maxPages - i - 2];
     await page
-      .getByRole("button")
-      .filter({ has: page.getByTestId(BACK_BUTTON_TEST_ID) })
+      .getByTestId(TEST_IDS.TABLE_PAGINATION)
+      .locator(MUI_CLASSES.ICON_BUTTON)
+      .first()
       .click();
+    await page.getByTestId(TEST_IDS.TABLE_PAGINATION_RESULTS).waitFor();
     // Expect page number to be correct
     await expect(page.getByText(PAGE_COUNT_REGEX, { exact: true })).toHaveText(
       RegExp(`Page ${maxPages - i - 1} of \\d+`)