feat: refactored tests to make usability on other platforms better (#3626)

Author: mrtopsyt

explorer/e2e/anvil/anvil-pagination-content.spec.ts

@@ -5,7 +5,9 @@ const BackButtonTestID = "WestRoundedIcon";
 const ForwardButtonTestID = "EastRoundedIcon";
 
 test.setTimeout(90000);
-test("Check forward and backwards pagination causes the ", async ({ page }) => {
+test("Check forward and backwards pagination causes the page content to change", async ({
+  page,
+}) => {
   // Navigate to the BioSamples page
   await page.goto("/explore/biosamples");
   await expect(page.locator("text=Biosample Id")).toBeVisible();

explorer/e2e/anvil/anvil-pagination.spec.ts

@@ -31,7 +31,7 @@ test("Check first page has disabled back and enabled forward pagination buttons
 });
 
 test.setTimeout(300000);
-test("Check that forward pagination increases the page count for the first five pages on the donors tab", async ({
+test("Check that forward pagination increments the current page and that page count stays static for the first five pages on the donors tab", async ({
   page,
 }) => {
   // Should start on first page, and there should be multiple pages available
@@ -45,7 +45,6 @@ test("Check that forward pagination increases the page count for the first five
   const max_pages = parseInt(
     SplitStartingPageText[SplitStartingPageText.length - 1]
   );
-  console.log(max_pages);
   // Paginate forwards
   for (let i = 2; i < max_pages + 1; i++) {
     await page

explorer/e2e/anvil/anvil-sort.spec.ts

@@ -1,77 +1,35 @@
-import { expect, test } from "@playwright/test";
-import { anvilTabs, anvilTabTestOrder } from "./anvil-tabs";
+import { test } from "@playwright/test";
+import { testSort } from "../testFunctions";
+import { anvilTabs } from "./anvil-tabs";
 
-test.setTimeout(90000);
-test("Expect clicking the column header to change the first displayed entry in each column on each tab, except where all tabs have the same values", async ({
+test.describe.configure({ mode: "parallel" });
+
+test("Expect clicking the column header to change the first displayed entry in each column on the datasets tab, except where all tabs have the same values", async ({
+  page,
+}) => {
+  await testSort(page, anvilTabs.datasets);
+});
+
+test("Expect clicking the column header to change the first displayed entry in each column on the donors tab, except where all tabs have the same values", async ({
+  page,
+}) => {
+  await testSort(page, anvilTabs.donors);
+});
+
+test("Expect clicking the column header to change the first displayed entry in each column on the biosamples tab, except where all tabs have the same values", async ({
+  page,
+}) => {
+  await testSort(page, anvilTabs.biosamples);
+});
+
+test("Expect clicking the column header to change the first displayed entry in each column on the activities tab, except where all tabs have the same values", async ({
   page,
 }) => {
-  // For each tab
-  for (const tabId of anvilTabTestOrder) {
-    // Get the current tab, and go to it's URL
-    const tab = anvilTabs[tabId];
-    await page.goto(tab.url);
-    // For each column
-    for (
-      let columnPosition = 0;
-      columnPosition < tab.preselectedColumns.length;
-      columnPosition++
-    ) {
-      // Get the column position, taking into account that some tabs start with a non-text first column
-      if (tab.preselectedColumns[columnPosition].sortable) {
-        const workColumnPosition: number = tab.emptyFirstColumn
-          ? columnPosition + 1
-          : columnPosition;
-        // Locators for the first and last cells in a particular column position on the page
-        const firstElementTextLocator = page
-          .getByRole("rowgroup")
-          .nth(1)
-          .getByRole("row")
-          .nth(0)
-          .getByRole("cell")
-          .nth(workColumnPosition);
-        const lastElementTextLocator = page
-          .getByRole("rowgroup")
-          .nth(1)
-          .getByRole("row")
-          .last()
-          .getByRole("cell")
-          .nth(workColumnPosition);
-        // Locator for the sort button
-        const columnSortLocator = page
-          .getByRole("columnheader", {
-            name: tab.preselectedColumns[columnPosition].name,
-          })
-          .getByRole("button");
-        // Expect the first and last cells to be visible
-        await expect(firstElementTextLocator).toBeVisible();
-        await expect(lastElementTextLocator).toBeVisible();
-        // Get the first cell text
-        const firstElementTextNoClick =
-          await firstElementTextLocator.innerText();
-        // Sort may do nothing if the first and last element are equal, so skip testing here
-        if (
-          (await lastElementTextLocator.innerText()) == firstElementTextNoClick
-        ) {
-          continue;
-        }
-        // Click to sort
-        await columnSortLocator.click();
-        await expect(firstElementTextLocator).toBeVisible();
-        const firstElementTextFirstClick =
-          await firstElementTextLocator.innerText();
-        // Click again
-        await columnSortLocator.click();
-        // Expect the first cell to have changed after clicking sort
-        await expect(firstElementTextLocator).toBeVisible();
-        await expect(firstElementTextLocator).not.toHaveText(
-          firstElementTextFirstClick
-        );
-        //await expect(firstElementTextLocator).toBeLessThanOrEqual( TODO: make this work, even though this function only works on numbers
-        //  firstElementTextFirstClick
-        //);
+  await testSort(page, anvilTabs.activities);
+});
 
-        //const newFirstElementText = await getFirstElementText(workColumnPosition);
-      }
-    }
-  }
+test("Expect clicking the column header to change the first displayed entry in each column on the files tab, except where all tabs have the same values", async ({
+  page,
+}) => {
+  await testSort(page, anvilTabs.files);
 });

explorer/e2e/anvil/anvil-tabs-buttons.spec.ts

@@ -0,0 +1,43 @@
+import { test } from "@playwright/test";
+import { testTab } from "../testFunctions";
+import { anvilTabs } from "./anvil-tabs";
+
+test("Expect clicking the activities tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilTabs.activities;
+  await page.goto(anvilTabs.datasets.url);
+  await testTab(page, tab);
+});
+
+test("Expect clicking the datasets tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilTabs.datasets;
+  await page.goto(anvilTabs.activities.url);
+  await testTab(page, tab);
+});
+
+test("Expect clicking the files tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilTabs.files;
+  await page.goto(anvilTabs.datasets.url);
+  await testTab(page, tab);
+});
+
+test("Expect clicking the donors tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilTabs.donors;
+  await page.goto(anvilTabs.datasets.url);
+  await testTab(page, tab);
+});
+
+test("Expect clicking the biosamples tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilTabs.biosamples;
+  await page.goto(anvilTabs.datasets.url);
+  await testTab(page, tab);
+});

explorer/e2e/anvil/anvil-tabs.spec.ts

@@ -1,28 +1,10 @@
-export interface tabDescription {
-  emptyFirstColumn: boolean;
-  preselectedColumns: columnDescription[];
-  selectableColumns: columnDescription[];
-  tabName: string;
-  uniqueColumn: string;
-  url: string;
-}
-
-export interface tabCollection {
-  activities: tabDescription;
-  biosamples: tabDescription;
-  datasets: tabDescription;
-  donors: tabDescription;
-  files: tabDescription;
-}
-
-type tabCollectionKeys = keyof tabCollection;
-
-export interface columnDescription {
-  name: string;
-  sortable: boolean;
-}
-
 /* eslint-disable sonarjs/no-duplicate-string  -- ignoring duplicate strings here */
+import {
+  AnvilCMGTabCollection,
+  TabCollectionKeys,
+  TabDescription,
+} from "../testInterfaces";
+
 export const filters: string[] = [
   "Anatomical Site",
   "BioSample Type",
@@ -37,7 +19,7 @@ export const filters: string[] = [
   "Reported Ethnicity",
 ];
 
-export const anvilTabs: tabCollection = {
+export const anvilTabs: AnvilCMGTabCollection = {
   activities: {
     emptyFirstColumn: false,
     preselectedColumns: [
@@ -54,7 +36,6 @@ export const anvilTabs: tabCollection = {
       { name: "Diagnosis", sortable: true },
     ],
     tabName: "Activities",
-    uniqueColumn: "Document Id",
     url: "/explore/activities",
   },
   biosamples: {
@@ -72,7 +53,6 @@ export const anvilTabs: tabCollection = {
       { name: "Reported Ethnicity", sortable: true },
     ],
     tabName: "BioSamples",
-    uniqueColumn: "BioSample Id",
     url: "/explore/biosamples",
   },
   datasets: {
@@ -91,7 +71,6 @@ export const anvilTabs: tabCollection = {
       { name: "Reported Ethnicity", sortable: true },
     ],
     tabName: "Datasets",
-    uniqueColumn: "Access",
     url: "/explore/datasets",
   },
   donors: {
@@ -106,7 +85,6 @@ export const anvilTabs: tabCollection = {
     ],
     selectableColumns: [],
     tabName: "Donors",
-    uniqueColumn: "Donor Id",
     url: "/explore/donors",
   },
   files: {
@@ -125,12 +103,19 @@ export const anvilTabs: tabCollection = {
       { name: "Diagnosis", sortable: true },
     ],
     tabName: "Files",
-    uniqueColumn: "Name",
     url: "/explore/files",
   },
 };
 
-export const anvilTabTestOrder: tabCollectionKeys[] = [
+export const anvilTabList: TabDescription[] = [
+  anvilTabs.activities,
+  anvilTabs.datasets,
+  anvilTabs.biosamples,
+  anvilTabs.donors,
+  anvilTabs.files,
+];
+
+export const anvilTabTestOrder: TabCollectionKeys[] = [
   "files",
   "datasets",
   "activities",

explorer/e2e/anvil/anvil-tabs.ts

@@ -0,0 +1,38 @@
+import { test } from "@playwright/test";
+import { testUrl } from "../testFunctions";
+import { anvilTabList, anvilTabs } from "./anvil-tabs";
+
+test("Expect the activities tab to appear as selected when the corresponding url is accessed", async ({
+  page,
+}) => {
+  const tab = anvilTabs.activities;
+  await testUrl(page, tab, anvilTabList);
+});
+
+test("Expect the datasets tab to appear as selected when the corresponding url is accessed", async ({
+  page,
+}) => {
+  const tab = anvilTabs.datasets;
+  await testUrl(page, tab, anvilTabList);
+});
+
+test("Expect the files tab to appear as selected when the corresponding url is accessed", async ({
+  page,
+}) => {
+  const tab = anvilTabs.files;
+  await testUrl(page, tab, anvilTabList);
+});
+
+test("Expect the donors tab to appear as selected when the corresponding url is accessed", async ({
+  page,
+}) => {
+  const tab = anvilTabs.donors;
+  await testUrl(page, tab, anvilTabList);
+});
+
+test("Expect the biosamples tab to appear as selected when the corresponding url is accessed", async ({
+  page,
+}) => {
+  const tab = anvilTabs.biosamples;
+  await testUrl(page, tab, anvilTabList);
+});