add test workflow for the widget

Author: Dou Du

.github/workflows/voila-test.yml

@@ -0,0 +1,56 @@
+name: Voila test
+
+on:
+  push:
+    branches:
+      - '*'
+  pull_request:
+    branches:
+      - '*'
+
+jobs:
+  voila:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: Install node
+      uses: actions/setup-node@v1
+      with:
+       node-version: '18.x'
+    - name: Install Python
+      uses: actions/setup-python@v2
+      with:
+        python-version: '3.9'
+        architecture: 'x64'
+    - name: Install dependencies
+      run: 
+        pip install --upgrade pip
+        pip install --upgrade jupyterlab
+        pip install --upgrade voila
+        pip install --upgrade voila-osscar-template
+        pip install -e .
+
+    - name: Run the voila server
+      run: |
+        voila --template=osscar --enable_nbextensions=True example/ --port 8383 --no-browser &
+        pip install --upgrade pytest
+        pip install --upgrade selenium
+        pip install --upgrade Pillow
+
+    - uses: nanasess/setup-chromedriver@master
+    - run: |
+        export DISPLAY=:99
+        chromedriver --url-base=/wd/hub &
+        sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional
+        python3 $GITHUB_WORKSPACE/test/test.py
+
+    - uses: actions/upload-artifact@v2
+      with:
+        name: quantum-screenshot
+        path: './*.png'
+
+    - name: Run the figures test
+      run: |
+        python3 $GITHUB_WORKSPACE/test/test_figures.py
+

example/example.ipynb

@@ -2,9 +2,17 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "env: ANYWIDGET_HMR=1\n"
+     ]
+    }
+   ],
    "source": [
     "# This cell (autoloading & hot module replacement) is only needed for development!\n",
     "%load_ext autoreload\n",
@@ -14,9 +22,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "941f07035d454d4f93aa142af33b0f1f",
+       "version_major": 2,
+       "version_minor": 1
+      },
+      "text/plain": [
+       "BZVisualizer(disable_interact_overlay=True, seekpath_data={'faces_data': {'triangles_vertices': [[-0.628318530…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "from widget_bzvisualizer import BZVisualizer\n",
     "\n",
@@ -43,7 +66,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -57,9 +80,24 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 4,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "a33b04116cee41cfabfec8fb33cc8af5",
+       "version_major": 2,
+       "version_minor": 1
+      },
+      "text/plain": [
+       "BZVisualizer(seekpath_data={'faces_data': {'triangles_vertices': [[-1.1089190599406602, -2.220446049250313e-16…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "# Load info with ASE\n",
     "# NOTE: (ASE is not included as a direct dependency, needs to be installed separately)\n",
@@ -99,7 +137,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.9"
+   "version": "3.11.7"
   }
  },
  "nbformat": 4,

test/test.py

@@ -0,0 +1,39 @@
+# Generated by Selenium IDE
+import pytest
+import time
+import json
+import os
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.common.by import By
+from selenium.webdriver.common.action_chains import ActionChains
+from selenium.webdriver.support import expected_conditions
+from selenium.webdriver.support.wait import WebDriverWait
+from selenium.webdriver.common.keys import Keys
+from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
+
+class test_widget():
+  def setup_method(self, method):
+    options = Options()
+    cwd = os.getcwd()
+    options.add_experimental_option("prefs", {"download.default_directory": cwd})
+    self.driver = webdriver.Chrome(options=options)
+    self.vars = {}
+
+  def teardown_method(self, method):
+    self.driver.quit()
+
+  def download_widget_image(self):
+    self.driver.get("http://localhost:8383/voila/render/example.ipynb")
+    self.driver.set_window_size(1280, 720)
+    time.sleep(3)
+    self.driver.save_screenshot("widget-01.png")
+    self.driver.execute_script("window.scrollTo(0, 1000)")
+    time.sleep(3)
+    self.driver.save_screenshot("widget-02.png")
+
+test = test_widget()
+test.setup_method('Chrome')
+test.download_widget_image()
+test.teardown_method('Chrome')
+

test/test_figures.py

@@ -0,0 +1,12 @@
+from PIL import Image, ImageChops, ImageStat
+
+image1 = Image.open('Figure 1.png')
+image2 = Image.open('test/widget-sample.png')
+
+diff = ImageChops.difference(image1, image2)
+stat = ImageStat.Stat(diff)
+
+if sum(stat.mean) == 0:
+  print('images are the same')
+else:
+  raise Exception("The result is NOT the same as expected. Please check matplotlib version.")