tests: add visual tests framework

.github/workflows/js-tests.yml

@@ -0,0 +1,35 @@
+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
+          npx playwright install
+      - name: Install Playwright Browser
+        run: npx playwright install-deps chromium
+      - name: Run Playwright tests
+        run: |
+          npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 10

.github/workflows/refresh-snapshots.yml

@@ -0,0 +1,37 @@
+name: update-playwright-snapshots
+
+on:
+  workflow_dispatch:
+    inputs:
+      name:
+        description: "Who triggered this refresh (enter github username to tag yourself)?"
+        required: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: set up python 3.10
+        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
+          npx playwright install
+      - name: Install Playwright Browser
+        run: npx playwright install-deps chromium
+      - name: generate new snapshots and commit them
+        run: |
+          npx playwright test --update-snapshots
+          git config user.name github-actions
+          git config user.email [email protected]
+          git add --all
+          git commit -m "test: update tests snapshots"
+          git push

.gitignore

@@ -13,13 +13,23 @@ ipyaladin/nbextension/
 ipyaladin/labextension/
 
 # Yarn package json
-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/README.md

@@ -0,0 +1,53 @@
+# Testing ipyaladin interactively
+
+## Setup and run the tests
+
+At the root of the repo (not here):
+
+```sh
+npm install
+pip install .
+pip install jupyterlab
+npx playwright install chromium
+npx playwright test
+```
+
+There is also a GUI to see the tests execute steps by steps:
+
+```sh
+npx playwright test --ui
+```
+
+## How to extend the tests
+
+We have access to [Playwright](https://playwright.dev/docs/intro) and
+[Galata](https://github.com/jupyterlab/jupyterlab/tree/main/galata)' s APIs.
+
+The interactive tests generation of playwright can be useful:
+
+```sh
+npx playwright codegen playwright.dev
+```
+
+but it does not know about all the helpers methods that Galata introduces to help with
+notebooks testing.
+
+## Debug
+
+```sh
+npx playwright test my_test.spec.js --debug
+```
+
+## Update the snapshots
+
+Open the test server
+
+```sh
+npm run start-test-server
+```
+
+then update the snapshots
+
+```sh
+npx playwright test --update-snapshots
+```

js/ui-tests/examples.spec.js

@@ -0,0 +1,36 @@
+/**
+ * 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(3000); // 3s
+  // Scroll to the top of the notebook
+  page.notebook.getCellLocator(2);
+  page.mouse.wheel(0, -2000);
+  // Save
+  await page.notebook.save();
+  // And check snapshot (maybe we should clip to div jp-main-dock-panel)
+  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