Add galata test

.github/workflows/ui-tests.yml

@@ -0,0 +1,78 @@
+name: UI Tests
+
+on: [push, pull_request]
+
+jobs:
+  ui-tests:
+    name: Visual Regression
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python: [3.8]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Base Setup
+        uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+
+      - name: Install xarray-leaflet
+        run: |
+          python -m pip install --upgrade jupyterlab~=3.0
+          python -m pip install .
+          cd ui-tests
+          jlpm install
+
+      - name: Install browser
+        run: |
+          cd ui-tests
+          jlpm playwright install chromium
+
+      - name: Launch JupyterLab 
+        run: |
+          cd ui-tests
+          jlpm start-jlab:detached 2>&1 > /tmp/jupyterlab_server.log &          
+
+      - name: Wait for JupyterLab
+        uses: ifaxity/wait-on-action@v1
+        with:
+          resource: http-get://localhost:8888/
+          timeout: 360000
+
+      - uses: iterative/setup-cml@v1
+      - name: Rendering tests
+        shell: bash
+        run: |
+          cd ui-tests
+          jlpm run test
+
+      - name: Upload Playwright Test assets
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: xarray-leaflet-test-assets
+          path: |
+            ui-tests/test-results
+
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: xarray-leaflet-test-report
+          path: |
+            ui-tests/playwright-report
+
+      - name: Update snapshots
+        if: failure()
+        run: |
+          cd ui-tests
+          # remove previous snapshots from other browser
+          jlpm rimraf "tests/**/*-snapshots/*.png"
+          # generate new snapshots
+          jlpm run test:update
+
+      - name: Print JupyterLab logs
+        if: always()
+        run: |
+          cat /tmp/jupyterlab_server.log

.gitignore

@@ -0,0 +1,3 @@
+# Galata 
+ui-test/playwright-report
+ui-test/test-results

README.md

@@ -1,4 +1,5 @@
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/davidbrochart/xarray_leaflet/master?urlpath=lab%2Ftree%2Fexamples%2Fintroduction.ipynb)
+[![Build Status](https://github.com/davidbrochart/xarray_leaflet/workflows/UI%20Tests/badge.svg)](https://github.com/davidbrochart/xarray_leaflet/actions)
 
 # xarray-leaflet: an xarray extension for tiled map plotting
 

ui-tests/jupyter_server_config.py

@@ -0,0 +1,8 @@
+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
+c.ServerApp.notebook_dir = './notebooks' 

ui-tests/notebooks/test0.ipynb

@@ -0,0 +1,72 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import xarray as xr\n",
+    "import rioxarray\n",
+    "from ipyleaflet import Map\n",
+    "import xarray_leaflet"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "n = 10\n",
+    "a = np.arange(n * n, dtype='float32').reshape(n, n)\n",
+    "x = np.arange(n)\n",
+    "y = np.arange(0, -n, -1)\n",
+    "da = xr.DataArray(a, dims=['y', 'x'], coords=[y, x])\n",
+    "da = da.rio.write_crs(4326)\n",
+    "da = da.rio.write_nodata(np.nan)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = Map(center=(-4.8282597468669755, 3.859859704971314), zoom=5, interpolation='nearest')\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "l = da.leaflet.plot(m, fit_bounds=False)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.1"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

ui-tests/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "xarray-leaflet-ui-tests",
+  "version": "1.0.0",
+  "description": "xarray-leaflet UI Tests",
+  "private": true,
+  "scripts": {
+    "start-jlab": "jupyter lab --config ./jupyter_server_config.py",
+    "start-jlab:detached": "yarn run start-jlab&",
+    "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"
+  },
+  "author": "xarray-leaflet",
+  "license": "MIT",
+  "dependencies": {
+    "@jupyterlab/galata": "^4.0.2",
+    "rimraf": "^3.0.2"
+  }
+}

ui-tests/playwright.config.js

@@ -0,0 +1,10 @@
+var baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+module.exports = {
+  ...baseConfig,
+  expect: {
+    toMatchSnapshot: { threshold: 0.33 },
+  },
+  preserveOutput: 'failures-only', 
+  retries: 0
+};

ui-tests/tests/xarray-leaflet.test.ts

@@ -0,0 +1,30 @@
+import { galata, IJupyterLabPageFixture, test } from "@jupyterlab/galata";
+import { expect } from "@playwright/test";
+
+async function renderMap(fileName: string, page: IJupyterLabPageFixture) {
+  const fullName = `./${fileName}.ipynb`;
+  await page.notebook.openByPath(fullName);
+  await page.notebook.activate(fullName);
+  await page.notebook.run();
+  await page.notebook.waitForRun();
+  const maps = await page.$("div.leaflet-container");
+  await new Promise((_) => setTimeout(_, 1000));
+  expect(await maps.screenshot()).toMatchSnapshot({
+    name: `${fileName}.png`,
+  });
+}
+
+const notebookList = [
+  "test0",
+];
+
+test.describe("xarray-leaflet Visual Regression", () => {
+  test.beforeEach(async ({ page }) => {
+    page.setViewportSize({ width: 1920, height: 1080 });
+  });
+  for (const name of notebookList) {
+    test(`Render ${name}`, async ({ page }) => {
+      await renderMap(name, page);
+    });
+  }
+});