fix: correct issues with anvil tests (#3637)

Author: mrtopsyt

.github/workflows/run-playwright-tests-anvil-catalog.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests anvil-cmg
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16.15.1"
+      - name: Install dependencies
+        run: |
+            cd explorer
+            npm ci
+      - name: Install Playwright Browsers
+        run: |
+            cd explorer
+            npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: |
+          cd explorer
+          npm run test:anvil-catalog
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

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

@@ -5,21 +5,21 @@ import { anvilcatalogTabs } from "./anvilcatalog-tabs";
 test.describe.configure({ mode: "parallel" });
 
 test.setTimeout(120000);
-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 ({
+test("On the Consortia tab, expect clicking the column header (the sort button) to keep the first element of the column visible", async ({
   page,
 }) => {
   await testSortCatalog(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 ({
+test("On the Studies tab, expect clicking the column header (the sort button) to keep the first element of the column visible", async ({
   page,
 }) => {
   await testSortCatalog(page, anvilcatalogTabs.studies);
 });
 
 test.setTimeout(120000);
-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 ({
+test("On the Workspaces tab, expect clicking the column header (the sort button) to keep the first element of the column visible", async ({
   page,
 }) => {
   await testSortCatalog(page, anvilcatalogTabs.workspaces);

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

@@ -50,7 +50,7 @@ export const anvilcatalogTabs: AnvilCatalogTabCollection = {
       { name: "Consent Code", sortable: true },
       { name: "Disease (indication)", sortable: true },
       { name: "Data Type", sortable: true },
-      { name: "Study Design", sortable: true },
+      { name: "Study Design", sortable: false },
       { name: "Participants", sortable: true },
       { name: "Size (TB)", sortable: true },
     ],

explorer/e2e/testFunctions.ts

@@ -94,16 +94,6 @@ export async function testSortAzure(
       await expect(lastElementTextLocator).toBeVisible();
       await expect(firstElementTextLocator).not.toHaveText("");
       await expect(lastElementTextLocator).not.toHaveText("");
-      // 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();
       // Expect the first and last cell to still have text after clicking sort
@@ -114,8 +104,6 @@ export async function testSortAzure(
       // Expect the first and last cell to still have text after clicking sort
       await expect(firstElementTextLocator).not.toHaveText("");
       await expect(lastElementTextLocator).not.toHaveText("");
-
-      //const newFirstElementText = await getFirstElementText(workColumnPosition);
     }
   }
 }
@@ -145,13 +133,6 @@ export async function testSortCatalog(
         .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", {
@@ -164,36 +145,13 @@ export async function testSortCatalog(
 
       // Click to sort
       await columnSortLocator.click();
-      // Expect the first and last cells to be visible
+      // Expect the first and cells to still be visible
       await expect(firstElementTextLocator).toBeVisible();
-      await expect(lastElementTextLocator).toBeVisible();
-      // Get the first cell text
-      const firstElementTextFirstClick =
-        await firstElementTextLocator.innerText();
-      const lastElementTextFirstClick =
-        await lastElementTextLocator.innerText();
-      // Sort may do nothing if the first and last element are equal, so skip testing here
-      if (lastElementTextFirstClick == firstElementTextFirstClick) {
-        continue;
-      }
-
       // 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(lastElementTextLocator).toBeVisible();
-      await expect(lastElementTextLocator).not.toHaveText(
-        lastElementTextFirstClick
-      );
-      /*await expect(firstElementTextLocator).toHaveText(
-        lastElementTextFirstClick
-      );
-      await expect(lastElementTextLocator).toHaveText(
-        firstElementTextFirstClick
-      );*/
+      await expect(firstElementTextLocator).not.toHaveText("");
     }
   }
 }
@@ -209,14 +167,12 @@ export async function testSelectableColumns(
     const checkboxLocator = page
       .getByRole("menu")
       .locator("*")
-      //.getByText(column.name, {exact: true});
       .filter({
         has: page
           .locator("*")
           .filter({ has: page.getByText(column.name, { exact: true }) }),
       })
       .getByRole("checkbox");
-    //await checkboxLocator.click();
     await expect(checkboxLocator).toBeEnabled();
     await expect(checkboxLocator).not.toBeChecked();
     await checkboxLocator.click();
@@ -240,7 +196,6 @@ export async function testPreSelectedColumns(
     const checkboxLocator = page
       .getByRole("menu")
       .locator("*")
-      //.getByText(column.name, {exact: true});
       .filter({
         has: page
           .locator("*")

explorer/package.json

@@ -31,9 +31,9 @@
     "build-storybook": "storybook build",
     "test": "jest --watch",
     "test:e2e": "playwright test",
-    "get-cellxgene-projects-hca": "esrun ./site-config/hca-dcp/dev/scripts/get-cellxgene-projects.ts"
+    "get-cellxgene-projects-hca": "esrun ./site-config/hca-dcp/dev/scripts/get-cellxgene-projects.ts ",
     "test:anvil-cmg": "playwright test -c playwright_anvil.config.ts --trace retain-on-failure",
-    "test:anvil-catalog": "playwright test -c playwright_anvil-catalog.config.ts"
+    "test:anvil-catalog": "playwright test -c playwright_anvil-catalog.config.ts --trace retain-on-failure"
   },
   "dependencies": {
     "@clevercanary/data-explorer-ui": "71.0.0",

explorer/playwright-report/.gitkeep

@@ -1,8 +1,24 @@
 import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
 const config: PlaywrightTestConfig = {
   expect: {
     timeout: 10 * 1000,
   },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
   testDir: "e2e",
   testMatch: /.*\/(anvil-catalog)\/.*\.spec\.ts/,
   use: {

explorer/playwright_anvil-catalog.config.ts

@@ -31,7 +31,7 @@ const config: PlaywrightTestConfig = {
     command: "npm run build-cc-dev:anvil-cmg && npm start",
     reuseExistingServer: !process.env.CI,
     timeout: 240 * 1000,
-    url: "http://localhost:3000/explore",
+    url: "http://localhost:3000/",
   },
   workers: "75%",
 };