Merge pull request #905 from trungleduc/add-galata

Test `ipyleaflet` widgets with `galata`
jupyter-widgets · Dec 16, 2021 · cfb3669 · cfb3669
2 parents d72ce50 + 7511b82
commit cfb3669
Show file tree

Hide file tree

Showing 37 changed files with 5,050 additions and 0 deletions.
diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
@@ -0,0 +1,79 @@
+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 ipyleaflet
+        run: |
+          python -m pip install --upgrade jupyterlab~=3.0 ipywidgets~=7.6
+          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: Widget 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: ipyleaflet-test-assets
+          path: |
+            ui-tests/test-results
+
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: ipyleaflet-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
+
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,7 @@ docs/*.nc
 
 # Untitled Notebooks
 *Untitled*.ipynb
+
+#Galata 
+ui-test/playwright-report
+ui-test/test-results
diff --git a/ui-tests/jupyter_server_config.py b/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' 
diff --git a/ui-tests/notebooks/DivIcon.ipynb b/ui-tests/notebooks/DivIcon.ipynb
@@ -0,0 +1,60 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "127cb16f-da76-4e86-98d5-47478b7b2709",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipyleaflet import Marker, DivIcon, Map\n",
+    "\n",
+    "center = (52.204793, 360.121558)\n",
+    "\n",
+    "m = Map(center=center, zoom=10)\n",
+    "icon = DivIcon(html='foo bar', bg_pos=[0, 0], icon_size=[150, 150])\n",
+    "mark = Marker(location=center, icon=icon)\n",
+    "m.add_layer(mark);\n",
+    "\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e314f6c7-b36c-4021-ba13-caf49ade7111",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "03c1de8d-b1bb-456d-aea6-0b2d22638909",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "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.9.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/ui-tests/notebooks/DrawControl.ipynb b/ui-tests/notebooks/DrawControl.ipynb
@@ -0,0 +1,86 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c20a6cec-25df-44f8-b92d-80a5b2053d3c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipyleaflet import Map, basemaps, DrawControl\n",
+    "\n",
+    "center = (52.204793, 360.121558)\n",
+    "\n",
+    "m = Map(center=center, zoom=15)\n",
+    "\n",
+    "draw_control = DrawControl()\n",
+    "draw_control.polyline =  {\n",
+    "    \"shapeOptions\": {\n",
+    "        \"color\": \"#6bc2e5\",\n",
+    "        \"weight\": 8,\n",
+    "        \"opacity\": 1.0\n",
+    "    }\n",
+    "}\n",
+    "draw_control.polygon = {\n",
+    "    \"shapeOptions\": {\n",
+    "        \"fillColor\": \"#6be5c3\",\n",
+    "        \"color\": \"#6be5c3\",\n",
+    "        \"fillOpacity\": 1.0\n",
+    "    },\n",
+    "    \"drawError\": {\n",
+    "        \"color\": \"#dd253b\",\n",
+    "        \"message\": \"Oups!\"\n",
+    "    },\n",
+    "    \"allowIntersection\": False\n",
+    "}\n",
+    "draw_control.circle = {\n",
+    "    \"shapeOptions\": {\n",
+    "        \"fillColor\": \"#efed69\",\n",
+    "        \"color\": \"#efed69\",\n",
+    "        \"fillOpacity\": 1.0\n",
+    "    }\n",
+    "}\n",
+    "draw_control.rectangle = {\n",
+    "    \"shapeOptions\": {\n",
+    "        \"fillColor\": \"#fca45d\",\n",
+    "        \"color\": \"#fca45d\",\n",
+    "        \"fillOpacity\": 1.0\n",
+    "    }\n",
+    "}\n",
+    "\n",
+    "m.add_control(draw_control)\n",
+    "\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "6961a753-ba4f-45e2-92c4-b184fa384f27",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "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.9.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/ui-tests/notebooks/FullScreenControl.ipynb b/ui-tests/notebooks/FullScreenControl.ipynb
@@ -0,0 +1,48 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a025fcc0-52a0-46cd-b987-9d9f0df48f2d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipyleaflet import Map, FullScreenControl\n",
+    "\n",
+    "m = Map(zoom=5, center=[51.64, -76.52])\n",
+    "m.add_control(FullScreenControl())\n",
+    "\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9df299bf-0646-482d-abb0-6dcca8edbf0e",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "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.9.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/ui-tests/notebooks/Icon.ipynb b/ui-tests/notebooks/Icon.ipynb
@@ -0,0 +1,52 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "029a1de7-9342-4cea-b490-2532256b7364",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipyleaflet import Marker, Icon, Map\n",
+    "\n",
+    "center = (52.204793, 360.121558)\n",
+    "\n",
+    "m = Map(center=center, zoom=10)\n",
+    "icon = Icon(icon_url='https://leafletjs.com/examples/custom-icons/leaf-green.png', icon_size=[38, 95], icon_anchor=[22,94])\n",
+    "mark = Marker(location=center, icon=icon, rotation_angle=90, rotation_origin='22px 94px')\n",
+    "m.add_layer(mark);\n",
+    "\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "e977a7cf-4836-4c03-84fb-756bd090a4e3",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "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.9.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}