Configure UI tests for Lite Deployment (#689)

* Configure UI tests for Lite Deployment

* add script to start lite server

* not needed

* Configure lite tests

* Change playwright report name

* Fix test command

* Fix test cmd

* Do jlpm install

* try correct path

* Try another path

* try without cd

* try corrected path

* try ls

* try ls ..

* Update .github/workflows/build.yml

Co-authored-by: martinRenou <[email protected]>

* Add a step to upload lite-artifacts

* prevent name conflict

* try ./lite/dist again

* debug path

* run lite tests on 8888 only

* try again on 8866

* try defining only port

* port 8888

* could this be it?

* use some options same as jupyterlite

* add option to Galata take control of the app object

* try this

* update lock file

* reduce timeout, comment not needed part

* increase timeout a little

* maybe not

* And maybe?

* temporarily try opening just filename

* Bump galata

* try a test from jupyterlite

* just leave one test to run for now

* just run extension activation test

* not required

* try another test

* let's see

* seems to work

* Separate file for lite tests?

* nope

* Uncomment tests

* test:lite

* ignore lite test for lab

* install jcad metapackage in update snapshots

* add updatelite script

* Update Playwright Snapshots

* add a test for notebook

* fix test

* try with existing file

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* skip

* increase timeout

* test works for notebook

* remove timeouts for now

* Update Playwright Snapshots

* uncomment lab ui tests

* use only viewport of jcad

* Update Playwright Snapshots

* a 10 second timeout before taking ss

* Update Playwright Snapshots

* Cleanup

Co-authored-by: martinRenou <[email protected]>

* minor fixes

* might have been pushed by mistake

* more cleanup

---------

Co-authored-by: martinRenou <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 4 people

.github/workflows/build.yml

@@ -244,7 +244,7 @@ jobs:
         working-directory: lite
         run: |
           set -eux
-          mkdir -p content && cp ../examples/*.jcad ../examples/*.STEP ../examples/*.stl ../examples/Notebook.ipynb ./content
+          mkdir -p content && cp ../examples/*.jcad ../examples/*.STEP ../examples/*.stl ../examples/Notebook.ipynb ../examples/jcad.ipynb ./content
           jupyter lite build --contents content --output-dir dist
 
       - name: Upload github-pages artifact
@@ -254,6 +254,13 @@ jobs:
           path: ./lite/dist
           retention-days: 30
 
+      - name: Upload lite artifact
+        id: upload-lite-artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: lite-artifacts
+          path: ./lite/dist
+
       - name: Save artifact data
         uses: trungleduc/appsharingspace-pr-comment/.github/actions/save-artifact-link@v2
         with:
@@ -275,3 +282,64 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
+
+  integration-tests-lite:
+    name: Integration tests Lite
+    needs: build-lite
+    runs-on: ubuntu-latest
+
+    env:
+      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Conda environment with Micromamba
+        uses: mamba-org/setup-micromamba@v1
+        with:
+          micromamba-version: '1.5.5-0'
+          environment-name: cad
+          create-args: >-
+            python=3.9
+            jupyterlab
+
+      - name: Download extension package
+        uses: actions/download-artifact@v4
+        with:
+          name: lite-artifacts
+          path: dist
+
+      - name: Install dependencies
+        shell: bash -l {0}
+        working-directory: ui-tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: jlpm install
+
+      - name: Set up browser cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ${{ github.workspace }}/pw-browsers
+          key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
+
+      - name: Install browser
+        shell: bash -l {0}
+        run: npx playwright install chromium
+        working-directory: ui-tests
+
+      - name: Execute integration tests
+        shell: bash -l {0}
+        working-directory: ui-tests
+        run: jlpm run test:lite
+
+      - name: Upload Playwright Test report
+        id: upload-galata-artifact
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: jupytercad-lite-playwright-tests
+          path: |
+            ui-tests/test-results
+            ui-tests/playwright-report

examples/jcad.ipynb

@@ -0,0 +1,26 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "plaintext"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "from jupytercad import CadDocument\n",
+    "doc = CadDocument()\n",
+    "doc.add_cone().add_sphere(radius=0.8).cut(color='#ff0000')"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

lite/jupyter-lite.json

@@ -1,4 +1,5 @@
 {
   "jupyter-lite-schema-version": 0,
-  "jupyter-config-data": {}
+  "jupyter-config-data": {},
+  "exposeAppInBrowser": true
 }

ui-tests/package.json

@@ -5,13 +5,15 @@
   "private": true,
   "scripts": {
     "start": "jupyter lab --config jupyter_server_test_config.py",
+    "start:lite": "cd ../dist && python -m http.server -b 127.0.0.1 8000",
     "test": "npx playwright test --workers 1",
+    "test:lite": "npx playwright test tests/lite.spec.ts --workers 1 --config playwright-lite.config.js",
     "test:update": "npx playwright test --update-snapshots",
     "test:updatelite": "jlpm run test:lite --update-snapshots",
     "test:debug": "PWDEBUG=1 npx playwright test --workers 1"
   },
   "devDependencies": {
-    "@jupyterlab/galata": "^5.2.5",
+    "@jupyterlab/galata": "^5.3.4",
     "@playwright/test": "^1.32.0",
     "@types/klaw-sync": "^6.0.1"
   },

ui-tests/playwright-lite.config.js

@@ -0,0 +1,29 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+module.exports = {
+  ...baseConfig,
+  webServer: {
+    command: 'jlpm start:lite',
+    url: 'http://localhost:8000/',
+    timeout: 10 * 1000,
+    reuseExistingServer: false
+  },
+  retries: 1,
+  use: {
+    ...baseConfig.use,
+    acceptDownloads: true,
+    appPath: '',
+    autoGoto: false,
+    baseURL: 'http://localhost:8000',
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+  },
+  expect: {
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.002,
+    },
+  },
+};

ui-tests/playwright.config.js

@@ -22,4 +22,5 @@ module.exports = {
       maxDiffPixelRatio: 0.002,
     },
   },
+  testIgnore: ["tests/lite.spec.ts"],
 };

ui-tests/tests/lite.spec.ts

@@ -0,0 +1,86 @@
+import { expect, test, galata } from '@jupyterlab/galata';
+
+test.use({ autoGoto: false });
+
+test.describe('UI Test', () => {
+  const fileList = ['test.jcad', '3M_CONNECTOR.STEP', 'fan.stl'];
+  let errors = 0;
+  test.beforeEach(async ({ page }) => {
+    page.setViewportSize({ width: 1920, height: 1080 });
+    page.on('console', message => {
+      if (message.type() === 'error') {
+        console.log('ERROR MSG', message.text());
+        errors += 1;
+      }
+    });
+  });
+
+  test.afterEach(async ({ page }) => {
+    errors = 0;
+  });
+
+  for (const file of fileList) {
+    test(`Should be able to render ${file} without error`, async ({
+      browser
+    }) => {
+      const context = await browser.newContext();
+      const page = await context.newPage();
+
+      await page.goto(`lab/index.html?path=${file}`, {
+        waitUntil: 'domcontentloaded'
+      });
+
+      await page.locator('div.jpcad-Spinner').waitFor({ state: 'hidden' });
+
+      if (await page.getByRole('button', { name: 'Ok' }).isVisible()) {
+        await page.getByRole('button', { name: 'Ok' }).click();
+      }
+
+      const main = await page.waitForSelector('.jp-MainAreaWidget', {
+        state: 'visible'
+      });
+
+      await page.waitForTimeout(10000);
+
+      expect(errors).toBe(0);
+      if (main) {
+        expect(await main.screenshot()).toMatchSnapshot({
+          name: `Render-${file}.png`,
+          maxDiffPixelRatio: 0.01
+        });
+      }
+    });
+  }
+
+  test('Should open jcad.ipynb and execute it', async ({ browser }) => {
+    const context = await browser.newContext();
+    const page = await context.newPage();
+    await page.goto('lab/index.html?path=jcad.ipynb', {
+      waitUntil: 'domcontentloaded'
+    });
+
+    const Notebook = await page.waitForSelector('.jp-Notebook', {
+      state: 'visible'
+    });
+    await Notebook.click();
+
+    await page.keyboard.press('Control+Enter');
+
+    await page.locator('.jp-InputArea-prompt >> text="[1]:"').first().waitFor();
+
+    const outputErrors = await page.$$('.jp-OutputArea-error');
+    expect(outputErrors.length).toBe(0);
+
+    const jcadWidget = await page.waitForSelector(
+      '.jupytercad-notebook-widget',
+      {
+        state: 'visible'
+      }
+    );
+
+    expect(await jcadWidget.screenshot()).toMatchSnapshot({
+      name: 'Render-notebook.png',
+      maxDiffPixelRatio: 0.01
+    });
+  });
+});