feat: added first round E2E tests for anvil-catalog (#3598)

Author: mrtopsyt

explorer/e2e/anvil-catalog/anvilcatalog-filters.spec.ts

@@ -0,0 +1,34 @@
+import { test } from "@playwright/test";
+import {
+  testPreSelectedColumns,
+  testSelectableColumns,
+} from "../testFunctions";
+import { anvilcatalogTabs } from "./anvilcatalog-tabs";
+
+test("Expect the checkboxes in the 'Edit Columns' menu to add those columns to the tab in the Consortia tab", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.consortia;
+  await testSelectableColumns(page, tab);
+});
+
+test("Expect the checkboxes for preselected columns in the 'Edit Columns' menu to be checked and disabled on the consortia tab", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.consortia;
+  await testPreSelectedColumns(page, tab);
+});
+
+test("Expect the checkboxes for preselected columns in the 'Edit Columns' menu to be checked and disabled on the studies tab", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.studies;
+  await testPreSelectedColumns(page, tab);
+});
+
+test("Expect the checkboxes for preselected columns in the 'Edit Columns' menu to be checked and disabled on the workspaces tab", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.workspaces;
+  await testPreSelectedColumns(page, tab);
+});

explorer/e2e/anvil-catalog/anvilcatalog-select-tabs.spec.ts

@@ -0,0 +1,24 @@
+import { test } from "@playwright/test";
+import { testSort } from "../testFunctions";
+import { anvilcatalogTabs } from "./anvilcatalog-tabs";
+
+test.describe.configure({ mode: "parallel" });
+
+test("Expect clicking the column header to change the first displayed entry in each column on the consortia tab, except where all tabs have the same values", async ({
+  page,
+}) => {
+  await testSort(page, anvilcatalogTabs.consortia);
+});
+
+test.setTimeout(120000);
+test("Expect clicking the column header to change the first displayed entry in each column on the studies tab, except where all tabs have the same values", async ({
+  page,
+}) => {
+  await testSort(page, anvilcatalogTabs.studies);
+});
+
+test("Expect clicking the column header to change the first displayed entry in each column on the workspaces tab, except where all tabs have the same values", async ({
+  page,
+}) => {
+  await testSort(page, anvilcatalogTabs.workspaces);
+});

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

@@ -0,0 +1,27 @@
+import { test } from "@playwright/test";
+import { testTab } from "../testFunctions";
+import { anvilcatalogTabs } from "./anvilcatalog-tabs";
+
+test("Expect clicking the consortia tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.consortia;
+  await page.goto(anvilcatalogTabs.studies.url);
+  await testTab(page, tab);
+});
+
+test("Expect clicking the studies tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.studies;
+  await page.goto(anvilcatalogTabs.consortia.url);
+  await testTab(page, tab);
+});
+
+test("Expect clicking the workspaces tab to go to the correct url and to show all of the relevant columns when selected", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.workspaces;
+  await page.goto(anvilcatalogTabs.workspaces.url);
+  await testTab(page, tab);
+});

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

@@ -0,0 +1,69 @@
+/* eslint-disable sonarjs/no-duplicate-string  -- ignoring duplicate strings here */
+
+import { AnvilCatalogTabCollection, TabDescription } from "../testInterfaces";
+
+export const anvilcatalogTabs: AnvilCatalogTabCollection = {
+  consortia: {
+    emptyFirstColumn: false,
+    preselectedColumns: [
+      { name: "Consortium", sortable: true },
+      { name: "dbGap Id", sortable: true },
+      { name: "Consent Codes", sortable: true },
+      { name: "Disease (indication)", sortable: true },
+      { name: "Data Type", sortable: true },
+      { name: "Study Design", sortable: true },
+      { name: "Participants", sortable: true },
+      { name: "Size (TB)", sortable: true },
+    ],
+    selectableColumns: [
+      { name: "Study", sortable: true },
+      { name: "Workspaces", sortable: true },
+    ],
+    tabName: "Consortia",
+    url: "/data/consortia",
+  },
+  studies: {
+    emptyFirstColumn: false,
+    preselectedColumns: [
+      { name: "Study", sortable: true },
+      { name: "dbGap Id", sortable: true },
+      { name: "Consortium", sortable: true },
+      { name: "Consent Codes", sortable: true },
+      { name: "Disease (indication)", sortable: true },
+      { name: "Data Type", sortable: true },
+      { name: "Study Design", sortable: true },
+      { name: "Workspaces", sortable: true },
+      { name: "Participants", sortable: true },
+      { name: "Size (TB)", sortable: true },
+    ],
+    selectableColumns: [],
+    tabName: "Studies",
+    url: "/data/studies",
+  },
+  workspaces: {
+    emptyFirstColumn: false,
+    preselectedColumns: [
+      { name: "Consortium", sortable: true },
+      { name: "Terra Workspace", sortable: true },
+      { name: "Study", sortable: true },
+      { name: "dbGap Id", sortable: true },
+      { name: "Consent Code", sortable: true },
+      { name: "Disease (indication)", sortable: true },
+      { name: "Data Type", sortable: true },
+      { name: "Study Design", sortable: true },
+      { name: "Participants", sortable: true },
+      { name: "Size (TB)", sortable: true },
+    ],
+    selectableColumns: [],
+    tabName: "Workspaces",
+    url: "/data/workspaces",
+  },
+};
+
+export const anvilCatalogTabList: TabDescription[] = [
+  anvilcatalogTabs.consortia,
+  anvilcatalogTabs.studies,
+  anvilcatalogTabs.workspaces,
+];
+
+/* eslint-enable sonarjs/no-duplicate-string -- Checking duplicate strings again*/

explorer/e2e/anvil-catalog/anvilcatalog-tabs.ts

@@ -1,30 +1,24 @@
-import { expect, test } from "@playwright/test";
-/* eslint-disable sonarjs/no-duplicate-string  -- ignoring duplicate strings here */
+import { test } from "@playwright/test";
+import { testUrl } from "../testFunctions";
+import { anvilCatalogTabList, anvilcatalogTabs } from "./anvilcatalog-tabs";
 
-test("Expect workspaces url to go to workspaces tab", async ({ page }) => {
-  await page.goto("/explore/workspaces");
-  await expect(
-    page.locator("_react=Tabs >> button >> text='Workspaces'")
-  ).toHaveAttribute("aria-selected", "true");
-  await expect(
-    page.locator("text='Terra Workspace Name' >> nth=0")
-  ).toBeVisible();
+test("Expect the consortia tab to appear as selected when the corresponding url is accessed", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.consortia;
+  await testUrl(page, tab, anvilCatalogTabList);
 });
 
-test("Expect studies url to go to studies tab", async ({ page }) => {
-  await page.goto("/explore/studies");
-  await expect(
-    page.locator("_react=Tabs >> button >> text='Studies'")
-  ).toHaveAttribute("aria-selected", "true");
-  await expect(page.locator("text='Study Design' >> nth=0")).toBeVisible();
+test("Expect the studies tab to appear as selected when the corresponding url is accessedb", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.studies;
+  await testUrl(page, tab, anvilCatalogTabList);
 });
 
-test("Expect consortia url to go to consortia tab", async ({ page }) => {
-  await page.goto("/explore/consortia");
-  await expect(
-    page.locator("_react=Tabs >> button >> text='Consortia'")
-  ).toHaveAttribute("aria-selected", "true");
-  await expect(page.locator("text='Study Design' >> nth=0")).toBeVisible();
+test("Expect the workspaces tab to appear as selected when the corresponding url is accessed", async ({
+  page,
+}) => {
+  const tab = anvilcatalogTabs.workspaces;
+  await testUrl(page, tab, anvilCatalogTabList);
 });
-
-/* eslint-enable sonarjs/no-duplicate-string -- Checking duplicate strings again*/

explorer/e2e/anvil-catalog/anvilcatalog-url.spec.ts

@@ -1,53 +1,58 @@
 import { expect, test } from "@playwright/test";
 
 const PaginationSelector = "_react=Pagination";
-const BackButtonSelector = "data-testid=WestRoundedIcon";
-const ForwardButtonSelector = "data-testid=EastRoundedIcon";
+const BackButtonTestID = "WestRoundedIcon";
+const ForwardButtonTestID = "EastRoundedIcon";
 
 test.setTimeout(90000);
-test("Check forward and backwards pagination causes values to change", async ({
+test("Check forward and backwards pagination causes the page content to change on the biosamples apge", async ({
   page,
 }) => {
   // Navigate to the BioSamples page
-  await page.goto("/explore/");
-  await page.locator("text=BioSamples").click();
-  await expect(page).toHaveURL("/explore/biosamples", { timeout: 10000 });
+  await page.goto("/explore/biosamples");
   await expect(page.locator("text=Biosample Id")).toBeVisible();
 
-  const TestThreePageText = await page.locator(PaginationSelector).innerText();
+  const firstElementTextLocator = page
+    .getByRole("rowgroup")
+    .nth(1)
+    .getByRole("row")
+    .nth(0)
+    .getByRole("cell")
+    .nth(0);
+
   // Should start on first page
   await expect(page.locator(PaginationSelector)).toContainText("Page 1 of ");
-  const SplitStartingPageText = TestThreePageText.split(" ");
-  const max_pages = parseInt(
-    SplitStartingPageText[SplitStartingPageText.length - 1]
-  );
-
+  const max_pages = 5;
   const FirstTableEntries = [];
 
   // Paginate forwards
-  const FirstTableEntrySelector = "_react=TableComponent >> td >> nth=0";
   for (let i = 2; i < max_pages + 1; i++) {
-    const OriginalFirstTableEntry = await page
-      .locator(FirstTableEntrySelector)
-      .innerText();
+    const OriginalFirstTableEntry = await firstElementTextLocator.innerText();
     // Click the next button
-    await page.locator(ForwardButtonSelector).click();
+    await page
+      .getByRole("button")
+      .filter({ has: page.getByTestId(ForwardButtonTestID) })
+      .click();
     // Expect the page count to have incremented
     await expect(page.locator(PaginationSelector)).toContainText(
-      `Page ${i} of ${max_pages}`
+      `Page ${i} of `
     );
     // Expect the back button to be enabled
-    await expect
-      .soft(page.locator(BackButtonSelector).locator(".."))
-      .toBeEnabled();
+    await expect(
+      page
+        .getByRole("button")
+        .filter({ has: page.getByTestId(BackButtonTestID) })
+    ).toBeEnabled();
     // Expect the forwards button to be enabled
     if (i != max_pages) {
       await expect(
-        page.locator(ForwardButtonSelector).locator("..")
+        page
+          .getByRole("button")
+          .filter({ has: page.getByTestId(ForwardButtonTestID) })
       ).toBeEnabled();
     }
     // Expect the first entry to have changed on the new page
-    await expect(page.locator(FirstTableEntrySelector)).not.toHaveText(
+    await expect(firstElementTextLocator).not.toHaveText(
       OriginalFirstTableEntry
     );
     // Remember the first entry
@@ -57,14 +62,15 @@ test("Check forward and backwards pagination causes values to change", async ({
   // Paginate backwards
   for (let i = 0; i < max_pages - 1; i++) {
     const OldFirstTableEntry = FirstTableEntries[max_pages - i - 2];
-    await page.locator(BackButtonSelector).click();
+    await page
+      .getByRole("button")
+      .filter({ has: page.getByTestId(BackButtonTestID) })
+      .click();
     // Expect page number to be correct
     await expect(page.locator(PaginationSelector)).toContainText(
-      `Page ${max_pages - i - 1} of ${max_pages}`
+      `Page ${max_pages - i - 1} of `
     );
     // Expect page entry to be consistent with forward pagination
-    await expect(page.locator(FirstTableEntrySelector)).toHaveText(
-      OldFirstTableEntry
-    );
+    await expect(firstElementTextLocator).toHaveText(OldFirstTableEntry);
   }
 });