chore: main->staging (#721) (#739)

* chore(deps-dev): bump follow-redirects from 1.15.2 to 1.15.4 in /client (#702)

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](follow-redirects/follow-redirects@v1.15.2...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...




* chore(explorer): enable safari fix browser page (#704)

* Enable Safari
* Fix Supported Browser page

* fix image path (#706)

* fix(explorer): bundle images (#707)

* fix(explorer): bundle images

* fix(explorer): enable Safari and fix bundled image path (#708)

* fix(explorer): enable Safari and fix bundled image path

* test(playwright): Migrate jest + puppeteer to playwright (#714)

* Install and setup playwright, successfully run example test (#701)

* introduce playwright with running example test

* cleanup eslint

* feat(playwright): migrate tests and e2e utils (#709)

* feat(playwright): migrate tests and e2e utils

* remove allure

* install playwright in workflow

* tweak workflow

* fix install command

* fix mocked endpoints

* fix drag and update snapshots

* fix scroll related failures

* fixes to geneset tests

* delete unsued utils

* remove more unused

* address f/b and fix test

* lint

* fix tests failing on gha

* pass new test

* add waits before lasso

* all tests passing

* fix lint

* add new snapshots

* skip failing test

* always wait for no skeletons

* no undo/redo

* remove verbose server while running e2e

* use cache built into setup-node

* skip

* revert change to script

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Trent Smith <1429913+Bento007@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ronen <kaloster@users.noreply.github.com>
Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>

.github/workflows/push_tests.yml

@@ -67,13 +67,11 @@ jobs:
           key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements*.txt') }}
           restore-keys: |
             ${{ runner.os }}-pip-
-      - name: Node cache
-        uses: actions/cache@v1
+      - uses: actions/setup-node@v4
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          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
       - name: Unit tests
@@ -98,16 +96,32 @@ jobs:
           key: ${{ runner.os }}-pip-${{ hashFiles('**/requirements*.txt') }}
           restore-keys: |
             ${{ runner.os }}-pip-
-      - name: Node cache
-        uses: actions/cache@v1
+      - uses: actions/setup-node@v4
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          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
+        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: Upload FE test results as an artifact
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: /Users/runner/work/single-cell-explorer/single-cell-explorer/client/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: /Users/runner/work/single-cell-explorer/single-cell-explorer/client/blob-report
+          retention-days: 1

.gitignore

@@ -50,3 +50,8 @@ client/.eslintcache
 # E2E Testing
 ignoreE2E*
 .test_*
+test-results/
+html-reports/
+playwright-report/
+blob-report/
+playwright/.cache/

client/Makefile

@@ -39,7 +39,7 @@ 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 -- --verbose --no-cache false'
+		'CXG_URL_BASE="http://localhost:$(CXG_SERVER_PORT)" npm run e2e'
 
 .PHONY: unit-test
 unit-test:

client/__tests__/common/constants.ts

@@ -0,0 +1,22 @@
+import * as ENV_DEFAULT from "../../../environment.default.json";
+
+export const DATASET = "pbmc3k.cxg";
+export const DATASET_TRUNCATE = "truncation-test.cxg";
+
+export const APP_URL_BASE =
+  process.env.CXG_URL_BASE || `http://localhost:${ENV_DEFAULT.CXG_CLIENT_PORT}`;
+
+const DEFAULT_BASE_PATH = "d";
+export const testURL = APP_URL_BASE.includes("localhost")
+  ? [APP_URL_BASE, DEFAULT_BASE_PATH, DATASET].join("/")
+  : APP_URL_BASE;
+export const pageURLTruncate = [
+  APP_URL_BASE,
+  DEFAULT_BASE_PATH,
+  DATASET_TRUNCATE,
+].join("/");
+
+export const BLUEPRINT_SAFE_TYPE_OPTIONS = { delay: 50 };
+
+export const ERROR_NO_TEST_ID_OR_LOCATOR =
+  "Either testId or locator must be defined";

client/__tests__/common/playwrightContext.ts

@@ -0,0 +1,34 @@
+// This file is imported and used in the config file `playwright.config.ts`.
+import { Config } from "@playwright/test";
+
+const isHeadful =
+  process.env.HEADFUL === "true" || process.env.HEADLESS === "false";
+
+if (isHeadful) {
+  console.log("Running tests in headful mode");
+}
+
+/**
+ * (thuang): Keep the video size small to avoid test timing out from processing
+ * large video files.
+ */
+const VIEWPORT = {
+  height: 960,
+  width: 1280,
+};
+
+export const COMMON_PLAYWRIGHT_CONTEXT: Config["use"] = {
+  acceptDownloads: true,
+  /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+  actionTimeout: 0,
+  headless: !isHeadful,
+  ignoreHTTPSErrors: true,
+  screenshot: "only-on-failure",
+  /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+  trace: "retain-on-failure",
+  video: {
+    mode: "retain-on-failure",
+    size: VIEWPORT,
+  },
+  viewport: VIEWPORT,
+};