tests: add visual tests framework

add a simple test that executes the notebook 1 and checks that it corresponds to the stored snapshot

.github/workflows/js-tests.yml

@@ -0,0 +1,34 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - uses: actions/setup-python@v4
+        with:
+          python-version: "3.11"
+      - name: Install dependencies
+        run: |
+          npm install
+          python -m pip install .
+          python -m pip install jupyterlab
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: |
+          npm run start-test-server & npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 10

.gitignore

@@ -16,10 +16,21 @@ ipyaladin/labextension/
 package-lock.json
 js/yarn.lock
 js/.yarn
+.yarn/
 
 # OS X
 .DS_Store
 
 # Conda builds
 conda-recipe/distrib
 conda-recipe/ipyaladin
+
+# Playwrigth tests
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Python tests
+.pytest_cache/
+.ruff_cache/

js/ui-tests/examples.spec.js

@@ -0,0 +1,33 @@
+/**
+ * Run the notebooks of the examples folder
+ */
+
+import { expect, test, galata } from "@jupyterlab/galata";
+import { setTimeout } from "timers/promises";
+import * as path from "path";
+
+// request and tmpPath are Playwright fixtures
+test("1-Getting-Started", async ({ page, request, tmpPath }) => {
+  // Import notebook 1
+  const content = galata.newContentsHelper(request);
+  const filename = "1_Getting_Started.ipynb";
+  await content.uploadFile(
+    path.resolve(__dirname, `../../examples/${filename}`),
+    `${tmpPath}/${filename}`,
+  );
+  // Activate notebook
+  await page.notebook.openByPath(`${tmpPath}/${filename}`);
+  await page.notebook.activate(filename);
+  // Wait until kernel is ready
+  await page.waitForSelector(
+    "#jp-main-statusbar >> text=Python 3 (ipykernel) | Idle",
+  );
+  // Execute all cells
+  await page.notebook.runCellByCell();
+  // Wait for Aladin to pop
+  await setTimeout(1000); // 1s
+  // Save
+  await page.notebook.save();
+  // And check snapshot
+  expect(await page.screenshot()).toMatchSnapshot();
+});

js/ui-tests/jupyter_server_test_config.py

@@ -0,0 +1,3 @@
+from jupyterlab.galata import configure_jupyter_server
+
+configure_jupyter_server(c)  # NOQA: F821

package.json

@@ -3,9 +3,15 @@
     "dev": "pip install -e '.[dev]' && npm run build -- --sourcemap=inline --watch",
     "build": "esbuild js/widget.js --minify --format=esm --bundle --outdir=src/ipyaladin/static",
     "prepare": "husky install",
-    "format": "npx prettier . --write && ruff format"
+    "format": "npx prettier . --write && ruff format",
+    "start-test-server": "python -m jupyter lab --config js/tests/jupyter_server_test_config.py",
+    "python-test": "python -m pytest",
+    "js-test": "npm run start-test-server & npx playwright test",
+    "update-snapshots": "npx playwright test --update-snapshots"
   },
   "devDependencies": {
+    "@jupyterlab/galata": "^5.1.8",
+    "@playwright/test": "^1.43.1",
     "esbuild": "^0.20.0",
     "husky": "^8.0.0",
     "lint-staged": "^15.2.2",

playwright.config.js

@@ -0,0 +1,18 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+const baseConfig = require("@jupyterlab/galata/lib/playwright-config");
+
+module.exports = {
+  ...baseConfig,
+  testDir: "./js/ui-tests",
+  webServer: {
+    command: "jlpm start",
+    url: "http://localhost:8888/lab",
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+  expect: {
+    toMatchSnapshot: { maxDiffPixelsRatio: 0.02 }, // allow 2% difference on snapshots
+  },
+};