test: SCE-6 e2e tests tabilize snapshots

.github/workflows/e2e-tests.yml

@@ -0,0 +1,165 @@
+name: E2E Tests
+
+# (thuang): Chromatic recommends ONLY running on push instead of pull_request
+# https://www.chromatic.com/docs/github-actions/#recommended-configuration-for-build-events
+on: push
+
+env:
+  JEST_ENV: prod
+  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+jobs:
+  run-smoke-tests:
+    runs-on: ubuntu-22.04
+    # (thuang): We now run the smoke tests against 2 datasets sequentially, so need longer timeout
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5]
+        shardTotal: [5]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # Chromatic needs full Git history graph
+          fetch-depth: 0
+      - name: Set up Python 3.11
+        uses: actions/setup-python@v1
+        with:
+          python-version: 3.11
+      - name: Python cache
+        uses: actions/cache@v1
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements*.txt') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: "client/.nvmrc"
+          cache: "npm"
+          cache-dependency-path: "client/package-lock.json"
+      - name: Install dependencies
+        run: |
+          make dev-env-server build-for-server-dev
+          cd client
+          npx playwright install
+
+      - name: Smoke tests (without annotations feature)
+        run: |
+          cd client && CURRENT_SHARD=${{ matrix.shardIndex }} TOTAL_SHARDS=${{ matrix.shardTotal }} make smoke-test
+          ./node_modules/codecov/bin/codecov --yml=../.codecov.yml --root=../ --gcov-root=../ -C -F frontend,javascript,smokeTest
+
+      - name: Upload Chromatic artifacts
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: chromatic-report-${{ matrix.shardIndex }}
+          path: /home/runner/work/single-cell-explorer/single-cell-explorer/client/playwright-report/chromatic-archives
+          retention-days: 14
+
+      - name: Upload FE test results as an artifact
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-${{ matrix.shardIndex }}
+          path: /home/runner/work/single-cell-explorer/single-cell-explorer/client/playwright-report
+          retention-days: 14
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: /home/runner/work/single-cell-explorer/single-cell-explorer/client/blob-report
+          retention-days: 1
+
+  merge-reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: always()
+    needs: [run-smoke-tests]
+
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: client
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: "client/.nvmrc"
+          cache: "npm"
+          cache-dependency-path: "client/package-lock.json"
+      - name: Install dependencies
+        run: npm ci
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          pattern: blob-report-*
+          merge-multiple: true
+          path: /home/runner/work/single-cell-explorer/single-cell-explorer/client/blob-report
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./blob-report
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: /home/runner/work/single-cell-explorer/single-cell-explorer/client/playwright-report
+          retention-days: 14
+
+  # https://github.com/myieye/web-languageforge/blob/develop/.github/workflows/e2e-tests.yml
+  smoke-tests:
+    if: always()
+    name: smoke-tests
+    runs-on: ubuntu-latest
+    needs:
+      - run-smoke-tests
+    steps:
+      - name: Check result
+        run: |
+          passed="${{ needs.run-smoke-tests.result }}"
+          if [[ $passed == "success" ]]; then
+            echo "Shards passed"
+            exit 0
+          else
+            echo "Shards failed"
+            exit 1
+          fi
+
+  merge-chromatic:
+    name: Run Chromatic
+    needs: [run-smoke-tests]
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: client
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Download all workflow run artifacts
+        uses: actions/download-artifact@v4
+        with:
+          # (thuang): Matches the `name` and `path` specified in `Upload Chromatic artifacts` step
+          path: /home/runner/work/single-cell-explorer/single-cell-explorer/client/playwright-report/chromatic-archives
+          pattern: chromatic-report-*
+          merge-multiple: true
+
+      - name: Run Chromatic tests
+        uses: chromaui/action@latest
+        with:
+          workingDir: ./client
+          buildScriptName: "build-archive-storybook"
+          exitOnceUploaded: true
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+        env:
+          # 👇 Sets environment variables
+          CHROMATIC_ARCHIVE_LOCATION: playwright-report/

.github/workflows/push_tests.yml

@@ -80,65 +80,3 @@ jobs:
           make unit-test-server
           bash <(curl -s https://codecov.io/bash) -y .codecov.yml -k server -cF server,python,unitTest
           cd client && ./node_modules/codecov/bin/codecov --yml=../.codecov.yml --root=../ --gcov-root=../ -C -F frontend,javascript,unitTest
-
-  smoke-tests:
-    runs-on: ubuntu-22.04
-    # (thuang): We now run the smoke tests against 2 datasets sequentially, so need longer timeout
-    timeout-minutes: 60
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          # Chromatic needs full Git history graph
-          fetch-depth: 0
-      - name: Set up Python 3.11
-        uses: actions/setup-python@v1
-        with:
-          python-version: 3.11
-      - name: Python cache
-        uses: actions/cache@v1
-        with:
-          path: ~/.cache/pip
-          key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements*.txt') }}
-          restore-keys: |
-            ${{ runner.os }}-pip-
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: "client/.nvmrc"
-          cache: "npm"
-          cache-dependency-path: "client/package-lock.json"
-      - name: Install dependencies
-        run: |
-          make dev-env-server build-for-server-dev
-          cd client
-          npx playwright install
-
-      - name: Smoke tests (without annotations feature)
-        run: |
-          cd client && make smoke-test
-          ./node_modules/codecov/bin/codecov --yml=../.codecov.yml --root=../ --gcov-root=../ -C -F frontend,javascript,smokeTest
-
-      - name: Publish to Chromatic
-        uses: chromaui/action@latest
-        with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: ./client
-          # This is `npm run build-archive-storybook`
-          buildScriptName: "build-archive-storybook"
-          exitOnceUploaded: true
-
-      - name: Upload FE test results as an artifact
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: playwright-report
-          path: ~/**/playwright-report/*
-          retention-days: 14
-
-      - name: Upload blob report to GitHub Actions Artifacts
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: all-blob-reports
-          path: ~/**/blob-report/*
-          retention-days: 1

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-03aea9e9
+        tag: sha-e8ea8ee1
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/Makefile

@@ -33,13 +33,15 @@ start-frontend:
 	export CXG_SERVER_PORT=$${port:-$$CXG_SERVER_PORT}; \
 	node server/development.js
 
-# start an instance of the Explorer server and run the end-to-end tests
+# start an instance of the Explorer server and run the end-to-end tests in shard mode
 .PHONY: smoke-test
 smoke-test:
 	start_server_and_test \
 		'../launch_dev_server.sh --config-file $(CXG_CONFIG) --port $(CXG_SERVER_PORT)' \
 		$(CXG_SERVER_PORT) \
-		'CXG_URL_BASE="http://localhost:$(CXG_SERVER_PORT)" npm run e2e'
+		$(if $(and $(CURRENT_SHARD),$(TOTAL_SHARDS)), \
+			'CXG_URL_BASE="http://localhost:$(CXG_SERVER_PORT)" npm run e2e -- --shard=$(CURRENT_SHARD)/$(TOTAL_SHARDS)', \
+			'CXG_URL_BASE="http://localhost:$(CXG_SERVER_PORT)" npm run e2e')
 
 .PHONY: unit-test
 unit-test:

client/__tests__/e2e/cell-guide.test.ts

@@ -17,11 +17,12 @@ import {
   snapshotTestGraph,
   expandGeneset,
   expandMarkerGeneSetsHeader,
+  goToPage,
 } from "./cellxgeneActions";
 
 import { pageURLCellGuide } from "../common/constants";
 
-import { goToPage } from "../util/helpers";
+import { getSnapshotPrefix } from "../util/helpers";
 
 const { describe } = test;
 
@@ -32,7 +33,7 @@ describe("CellGuideCXG", () => {
   test("page launched", async ({ page }, testInfo) => {
     await goToPage(page, pageURLCellGuide);
 
-    await snapshotTestGraph(page, testInfo);
+    await snapshotTestGraph(page, getSnapshotPrefix(testInfo), testInfo);
   });
 
   test("assert absence of 'Standard Categories' and 'Author Categories'", async ({