Add some playwright ui tests (#33)

* Add some playwright ui tests

* Linting

* Install jupyterlite-core in integration-tests

* Pin jupyterlite-core

* Use separate directory to deploy

* Install micromamba for ui-tests deployment

* Fix update-snapshots github action

* Manually update ui-test images

* Allow retries for ui-tests

* Fix deploy.yml

* Correct vercel settings

.github/workflows/build.yml

@@ -106,14 +106,19 @@ jobs:
     - name: Install the extension
       run: |
         set -eux
-        python -m pip install "jupyterlab>=4.0.0,<5" jupyterlite_terminal*.whl
+        python -m pip install --pre "jupyterlite-core>=0.4,<0.5" "jupyterlab>=4,<5" jupyterlite_terminal*.whl
+
+    - name: Micromamba needed for cockle_wasm_env
+      uses: mamba-org/setup-micromamba@main
 
     - name: Install dependencies
       working-directory: ui-tests
       env:
         YARN_ENABLE_IMMUTABLE_INSTALLS: 0
         PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
-      run: jlpm install
+      run: |
+        jlpm install
+        jlpm build
 
     - name: Set up browser cache
       uses: actions/cache@v4
@@ -129,7 +134,7 @@ jobs:
     - name: Execute integration tests
       working-directory: ui-tests
       run: |
-        jlpm playwright test
+        jlpm test
 
     - name: Upload Playwright Test report
       if: always()

.github/workflows/deploy.yml

@@ -22,8 +22,7 @@ jobs:
 
       - name: Install the dependencies
         run: |
-          # need the latest JupyterLite 0.4.0 pre-release
-          python -m pip install --pre jupyterlite-core jupyterlite-pyodide-kernel
+          python -m pip install --pre "jupyterlite-core>=0.4,<0.5" jupyterlite-pyodide-kernel
 
           # install a dev version of the terminal extension
           python -m pip install .
@@ -32,13 +31,14 @@ jobs:
         uses: mamba-org/setup-micromamba@main
 
       - name: Build the JupyterLite site
+        working-directory: deploy
         run: |
           jupyter lite build --output-dir dist
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./dist
+          path: ./deploy/dist
 
   deploy:
     needs: build

.github/workflows/update-integration-tests.yml

@@ -42,6 +42,15 @@ jobs:
           jlpm
           python -m pip install .
 
+      - name: Micromamba needed for cockle_wasm_env
+        uses: mamba-org/setup-micromamba@main
+
+      - name: Install dependencies
+        working-directory: ui-tests
+        run: |
+          jlpm install
+          jlpm build
+
       - uses: jupyterlab/maintainer-tools/.github/actions/update-snapshots@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -53,8 +53,8 @@ If you would like to deploy a JupyterLite site with the terminal extension, you
 As an example, this repository deploys the JupyterLite terminal to [Vercel](https://vercel.com), using the following files:
 
 - `vercel.json`: configure the COOP / COEP server headers
-- `requirements-deploy.txt`: dependencies for the JupyterLite deployment
-- `deploy.sh`: script to deploy to Vercel, using micromamba to have full control on the Python versions and isolate the build in a virtual environment
+- `deploy/requirements-deploy.txt`: dependencies for the JupyterLite deployment
+- `deploy/deploy.sh`: script to deploy to Vercel, using micromamba to have full control on the Python versions and isolate the build in a virtual environment
 
 For more information, have a look at the JupyterLite documentation: https://jupyterlite.readthedocs.io/
 
@@ -91,7 +91,8 @@ jupyter lab
 Then build a JupyterLite distribution with the extension installed:
 
 ```bash
-jupyter lite build --contents demo/contents
+cd deploy
+jupyter lite build --contents contents
 ```
 
 And serve it either using:

deploy.sh → deploy/deploy.sh

@@ -22,4 +22,4 @@ python -m pip install -r requirements-deploy.txt
 
 # build the JupyterLite site
 jupyter lite --version
-jupyter lite build --contents demo/contents --output-dir dist
+jupyter lite build --contents contents --output-dir dist

deploy/requirements-deploy.txt

@@ -0,0 +1,4 @@
+jupyterlab>=4,<5
+jupyterlite-core>=0.4,<0.5
+jupyterlite-pyodide-kernel
+..

src/index.ts

@@ -20,7 +20,7 @@ const terminalsPlugin: JupyterLiteServerPlugin<ITerminals> = {
   provides: ITerminals,
   activate: async (app: JupyterLiteServer) => {
     console.log(
-      'JupyterLab extension @jupyterlite/terminal:plugin is activated!'
+      'JupyterLite extension @jupyterlite/terminal:plugin is activated!'
     );
 
     const { serviceManager } = app;
@@ -46,7 +46,7 @@ const terminalsRoutesPlugin: JupyterLiteServerPlugin<void> = {
   requires: [ITerminals],
   activate: (app: JupyterLiteServer, terminals: ITerminals) => {
     console.log(
-      'JupyterLab extension @jupyterlite/terminal:routes-plugin is activated!',
+      'JupyterLite extension @jupyterlite/terminal:routes-plugin is activated!',
       terminals
     );
 

ui-tests/README.md

@@ -7,9 +7,6 @@ and [Galata](https://github.com/jupyterlab/jupyterlab/tree/main/galata) helper.
 
 The Playwright configuration is defined in [playwright.config.js](./playwright.config.js).
 
-The JupyterLab server configuration to use for the integration test is defined
-in [jupyter_server_test_config.py](./jupyter_server_test_config.py).
-
 The default configuration will produce video for failing tests and an HTML report.
 
 > There is a new experimental UI mode that you may fall in love with; see [that video](https://www.youtube.com/watch?v=jF0yA-JLQW0).
@@ -34,6 +31,7 @@ jlpm build:prod
 ```sh
 cd ./ui-tests
 jlpm install
+jlpm build
 jlpm playwright install
 cd ..
 ```
@@ -42,7 +40,7 @@ cd ..
 
 ```sh
 cd ./ui-tests
-jlpm playwright test
+jlpm test
 ```
 
 Test results will be shown in the terminal. In case of any test failures, the test report
@@ -71,6 +69,7 @@ jlpm build:prod
 ```sh
 cd ./ui-tests
 jlpm install
+jlpm build
 jlpm playwright install
 cd ..
 ```
@@ -79,7 +78,7 @@ cd ..
 
 ```sh
 cd ./ui-tests
-jlpm playwright test -u
+jlpm test -u
 ```
 
 > Some discrepancy may occurs between the snapshots generated on your computer and
@@ -107,6 +106,7 @@ jlpm build:prod
 ```sh
 cd ./ui-tests
 jlpm install
+jlpm build
 jlpm playwright install
 cd ..
 ```
@@ -145,6 +145,7 @@ jlpm build:prod
 ```sh
 cd ./ui-tests
 jlpm install
+jlpm build
 jlpm playwright install
 cd ..
 ```
@@ -153,7 +154,7 @@ cd ..
 
 ```sh
 cd ./ui-tests
-jlpm playwright test --debug
+jlpm test --debug
 ```
 
 ## Upgrade Playwright and the browsers

ui-tests/build.py

@@ -0,0 +1,17 @@
+# Build jupyterlite deployment containing terminal extension for playwright tests.
+
+from pathlib import Path
+from subprocess import run
+
+import jupyterlab
+
+extra_labextensions_path = str(Path(jupyterlab.__file__).parent / "galata")
+cmd = [
+    "jupyter",
+    "lite",
+    "build",
+    "--contents",
+    "contents",
+    f"--FederatedExtensionAddon.extra_labextensions_path={extra_labextensions_path}",
+]
+run(cmd, check=True)

ui-tests/contents/fact.lua

@@ -0,0 +1,8 @@
+function fact(n, acc)
+  acc = acc or 1
+  if n == 0 then
+    return acc
+  end
+  return fact(n-1, n*acc)
+end
+print(fact(tonumber(arg[1])))

ui-tests/contents/months.txt

@@ -0,0 +1,12 @@
+January
+February
+March
+April
+May
+June
+July
+August
+September
+October
+November
+December

ui-tests/jupyter-lite.json

@@ -0,0 +1,8 @@
+{
+  "jupyter-lite-schema-version": 0,
+  "jupyter-config-data": {
+    "appName": "JupyterLite terminal UI Tests",
+    "exposeAppInBrowser": true,
+    "terminalsAvailable": true
+  }
+}

ui-tests/jupyter_lite_config.json

@@ -0,0 +1,5 @@
+{
+  "LiteBuildConfig": {
+    "output_dir": "dist"
+  }
+}

ui-tests/package.json

@@ -4,12 +4,16 @@
   "description": "JupyterLab jupyterlite-terminal Integration Tests",
   "private": true,
   "scripts": {
-    "start": "jupyter lab --config jupyter_server_test_config.py",
+    "build": "jlpm clean && python build.py",
+    "clean": "rimraf dist",
+    "clean:all": "jlpm clean && rimraf cockle_wasm_env .cockle_temp",
+    "start": "npx static-handler -p 8000 --cors --coop --coep --corp ./dist",
     "test": "jlpm playwright test",
     "test:update": "jlpm playwright test --update-snapshots"
   },
   "devDependencies": {
     "@jupyterlab/galata": "^5.0.5",
-    "@playwright/test": "^1.37.0"
+    "@playwright/test": "^1.37.0",
+    "rimraf": "^6.0.1"
   }
 }

ui-tests/playwright.config.js

@@ -5,10 +5,16 @@ const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
 
 module.exports = {
   ...baseConfig,
+  use: {
+    acceptDownloads: true,
+    autoGoto: false,
+    baseURL: 'http://localhost:8000'
+  },
+  retries: 2,
   webServer: {
     command: 'jlpm start',
-    url: 'http://localhost:8888/lab',
+    port: 8000,
     timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI
+    reuseExistingServer: true
   }
 };