Change jupyterlab version and add yarn dependency

.github/workflows/ui-tests.yml

@@ -19,13 +19,10 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup conda
-        uses: conda-incubator/setup-miniconda@v2
+      - name: Install Conda environment with Micromamba
+        uses: mamba-org/setup-micromamba@main
         with:
           environment-file: environment-dev.yml
-          activate-environment: ipyleaflet-dev
-          mamba-version: "*"
-          python-version: ${{ matrix.python-version }}
           channels: conda-forge
 
       - name: Install ipyleaflet
@@ -34,21 +31,11 @@ jobs:
       - name: Install browser
         run: |
           jlpm install
-          jlpm playwright install chromium
+          npx playwright install chromium
         working-directory: ui-tests
 
-      - name: Launch JupyterLab
-        run: jlpm start:detached > /tmp/jupyterlab_server.log 2>&1
-        working-directory: ui-tests
-
-      - name: Wait for JupyterLab
-        uses: ifaxity/wait-on-action@v1
-        with:
-          resource: http-get://localhost:8888/
-          timeout: 360000
-
       - name: Widget rendering tests
-        run: jlpm run test
+        run: npx playwright test
         working-directory: ui-tests
 
       - name: Upload Playwright Test assets

.gitignore

@@ -6,6 +6,7 @@ build/
 node_modules/
 *package-lock.json
 js/.yarn/
+ui-tests/.yarn/
 
 # Compiled javascript
 ipyleaflet/nbextension/

environment-dev.yml

@@ -5,10 +5,11 @@ dependencies:
   - pip
   - wheel
   - flake8
-  - jupyterlab~=3.6.0
+  - jupyterlab~=4.0
   - jupyter-packaging~=0.12
   - ipywidgets
   - xyzservices
   - branca
   - traittypes
   - pandas
+  - yarn~=3.0

ui-tests/.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+enableImmutableInstalls: false

ui-tests/jupyter_server_config.py

@@ -1,7 +1,3 @@
-c.ServerApp.port = 8888
-c.ServerApp.token = ""
-c.ServerApp.password = ""
-c.ServerApp.disable_check_xsrf = True
-c.ServerApp.open_browser = False
-c.LabApp.open_browser = False
-c.LabApp.expose_app_in_browser = True
+from jupyterlab.galata import configure_jupyter_server
+
+configure_jupyter_server(c)  # noqa F821

ui-tests/package.json

@@ -4,17 +4,17 @@
   "description": "ipyleaflet UI Tests",
   "private": true,
   "scripts": {
-    "start": "jupyter labextension disable '@jupyterlab/apputils-extension:announcements' && jupyter lab --config ./jupyter_server_config.py",
-    "start:detached": "yarn run start&",
+    "start": "jupyter lab --config jupyter_server_config.py",
     "clean": "rimraf tests/notebooks/.ipynb_checkpoints && rimraf test-output",
-    "test": "yarn run clean && playwright test",
-    "test:debug": "yarn run clean && PWDEBUG=1  playwright test",
-    "test:update": "playwright test --update-snapshots"
+    "test": "npx playwright test",
+    "test:debug": "yarn run clean && PWDEBUG=1 npx playwright test",
+    "test:update": "npx playwright test --update-snapshots"
   },
   "author": "ipyleaflet",
   "license": "MIT",
   "dependencies": {
-    "@jupyterlab/galata": "^4.3.5",
+    "@jupyterlab/galata": "^5.0.1",
+    "@playwright/test": "^1.32.0",
     "klaw-sync": "^6.0.0",
     "rimraf": "^3.0.2"
   }

ui-tests/playwright.config.js

@@ -5,6 +5,11 @@ module.exports = {
   expect: {
     toMatchSnapshot: { threshold: 0.33 },
   },
+  webServer: {
+    command: 'jlpm start',
+    url: 'http://localhost:8888/lab',
+    reuseExistingServer: !process.env.CI
+  },
   preserveOutput: 'failures-only',
   retries: 0,
   timeout: 600000,

ui-tests/tests/ipyleaflet.test.ts

@@ -1,19 +1,24 @@
-import { IJupyterLabPageFixture, test } from '@jupyterlab/galata';
-import { expect } from '@playwright/test';
-import * as path from 'path';
-const klaw = require('klaw-sync');
+import { expect, IJupyterLabPageFixture, test } from "@jupyterlab/galata";
+import * as path from "path";
+const klaw = require("klaw-sync");
 
-
-const filterUpdateNotebooks = item => {
+const filterUpdateNotebooks = (item) => {
   const basename = path.basename(item.path);
-  return basename.includes('_update');
-}
-
-const testCellOutputs = async (page: IJupyterLabPageFixture, tmpPath: string, theme: 'JupyterLab Light' | 'JupyterLab Dark') => {
-  const paths = klaw(path.resolve(__dirname, '../notebooks'), {filter: item => !filterUpdateNotebooks(item), nodir: true});
-  const notebooks = paths.map(item => path.basename(item.path));
+  return basename.includes("_update");
+};
+
+const testCellOutputs = async (
+  page: IJupyterLabPageFixture,
+  tmpPath: string,
+  theme: "JupyterLab Light" | "JupyterLab Dark"
+) => {
+  const paths = klaw(path.resolve(__dirname, "../notebooks"), {
+    filter: (item) => !filterUpdateNotebooks(item),
+    nodir: true,
+  });
+  const notebooks = paths.map((item) => path.basename(item.path));
 
-  const contextPrefix = theme == 'JupyterLab Light' ? 'light_' : 'dark_';
+  const contextPrefix = theme == "JupyterLab Light" ? "light_" : "dark_";
   page.theme.setTheme(theme);
 
   for (const notebook of notebooks) {
@@ -24,7 +29,11 @@ const testCellOutputs = async (page: IJupyterLabPageFixture, tmpPath: string, th
 
     let numCellImages = 0;
 
-    const getCaptureImageName = (contextPrefix: string, notebook: string, id: number): string => {
+    const getCaptureImageName = (
+      contextPrefix: string,
+      notebook: string,
+      id: number
+    ): string => {
       return `${contextPrefix}-${notebook}-cell-${id}.png`;
     };
 
@@ -47,39 +56,35 @@ const testCellOutputs = async (page: IJupyterLabPageFixture, tmpPath: string, th
           results.push(await cell.screenshot());
           numCellImages++;
         }
-      }
+      },
     });
 
     await page.notebook.save();
 
     for (let c = 0; c < numCellImages; ++c) {
-      expect(results[c]).toMatchSnapshot(getCaptureImageName(contextPrefix, notebook, c));
+      expect(results[c]).toMatchSnapshot(
+        getCaptureImageName(contextPrefix, notebook, c)
+      );
     }
 
     await page.notebook.close(true);
   }
-}
+};
 
-test.describe('ipyleaflet Visual Regression', () => {
+test.describe("ipyleaflet Visual Regression", () => {
   test.beforeEach(async ({ page, tmpPath }) => {
     await page.contents.uploadDirectory(
-      path.resolve(__dirname, '../notebooks'),
+      path.resolve(__dirname, "../notebooks"),
       tmpPath
     );
     await page.filebrowser.openDirectory(tmpPath);
   });
 
-  test('Light theme: Check ipyleaflet renders', async ({
-    page,
-    tmpPath,
-  }) => {
-    await testCellOutputs(page, tmpPath, 'JupyterLab Light');
+  test("Light theme: Check ipyleaflet renders", async ({ page, tmpPath }) => {
+    await testCellOutputs(page, tmpPath, "JupyterLab Light");
   });
 
-  test('Dark theme: Check ipyleaflet renders', async ({
-    page,
-    tmpPath,
-  }) => {
-    await testCellOutputs(page, tmpPath, 'JupyterLab Dark');
+  test("Dark theme: Check ipyleaflet renders", async ({ page, tmpPath }) => {
+    await testCellOutputs(page, tmpPath, "JupyterLab Dark");
   });
 });