Merge pull request #2 from jupytercad/ui-test

Add UI tests

.github/workflows/build.yml

@@ -87,6 +87,78 @@ jobs:
           jupyter labextension list 2>&1 | grep -ie "@jupytercad/jupytercad-openvsp.*OK"
           python -m jupyterlab.browser_check --no-browser-test
 
+  integration-tests:
+    name: Integration tests
+    needs: build
+    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.10
+            jupyterlab=4.1.6
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: extension-artifacts
+
+      - name: Install the extension
+        shell: bash -l {0}
+        run: |
+          set -eux
+          pip install "jupyterlab>=4.0.0,<5" "jupytercad>=2.0.0a7" jupytercad_openvsp*.whl
+
+      - name: Install OpenVSP
+        shell: bash -l {0}
+        run: |
+          set -eux
+          wget https://openvsp.org/download.php?file=zips/current/linux/OpenVSP-3.38.0-Ubuntu-22.04_amd64.deb -O ovsp.deb
+          ar x ovsp.deb && tar -xf data.tar.gz
+          python -m pip install ./opt/OpenVSP/python/utilities ./opt/OpenVSP/python/degen_geom ./opt/OpenVSP/python/openvsp_config ./opt/OpenVSP/python/openvsp
+
+      - 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@v3
+        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: |
+          yarn test
+
+      - name: Upload Playwright Test report
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: jupytercad-playwright-tests
+          path: |
+            ui-tests/test-results
+            ui-tests/playwright-report
   check_links:
     name: Check Links
     runs-on: ubuntu-latest

.gitignore

@@ -120,3 +120,6 @@ dmypy.json
 # Yarn cache
 .yarn/
 .jupyter_ystore.db
+
+**/ui-tests/test-results/
+**/ui-tests/playwright-report/

package.json

@@ -128,7 +128,8 @@
         "node_modules",
         "dist",
         "coverage",
-        "**/*.d.ts"
+        "**/*.d.ts",
+        "ui-tests"
     ],
     "eslintConfig": {
         "extends": [

src/index.ts

@@ -87,6 +87,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
       tracker.add(widget);
       app.shell.activateById('jupytercad::leftControlPanel');
     });
+    console.log('jupytercad_openvsp:plugin is activated!');
   }
 };
 

ui-tests/jupyter_server_test_config.py

@@ -0,0 +1,4 @@
+from jupyterlab.galata import configure_jupyter_server
+
+configure_jupyter_server(c)  # noqa F821
+c.LabApp.collaborative = True  # noqa F821

ui-tests/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "jupytercad-openvsp-ui-tests",
+  "version": "1.0.0",
+  "description": "jupytercad-openvsp Integration Tests",
+  "private": true,
+  "scripts": {
+    "start": "jupyter lab --config jupyter_server_test_config.py",
+    "test": "npx playwright test",
+    "test:update": "npx playwright test --update-snapshots",
+    "test:debug": "PWDEBUG=1 npx playwright test"
+  },
+  "devDependencies": {
+    "@jupyterlab/galata": "^5.1.0",
+    "@playwright/test": "^1.32.0",
+    "@types/klaw-sync": "^6.0.1"
+  },
+  "dependencies": {
+    "klaw-sync": "^6.0.0"
+  }
+}

ui-tests/playwright.config.js

@@ -0,0 +1,24 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+module.exports = {
+  ...baseConfig,
+  webServer: {
+    command: 'jlpm start',
+    url: 'http://localhost:8888/lab',
+    timeout: 120 * 1000,
+    reuseExistingServer: false
+  },
+  retries: 0,
+  use: {
+    ...baseConfig.use,
+    trace: 'off'
+  },
+  expect: {
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.02
+    }
+  }
+};

ui-tests/tests/ui.spec.ts

@@ -0,0 +1,81 @@
+import { expect, test, galata } from '@jupyterlab/galata';
+import path from 'path';
+
+test.use({ autoGoto: false });
+
+test.describe('UI Test', () => {
+  const fileList = ['A320.vsp3'];
+
+  test.describe('Extension activation test', () => {
+    test('should emit an activation console message', async ({
+      page,
+      request
+    }) => {
+      const logs: string[] = [];
+
+      page.on('console', message => {
+        logs.push(message.text());
+      });
+
+      await page.goto();
+
+      expect(
+        logs.filter(s => s === 'jupytercad_openvsp:plugin is activated!')
+      ).toHaveLength(1);
+    });
+  });
+
+  test.describe('File rendering test', () => {
+    test.beforeAll(async ({ request }) => {
+      const content = galata.newContentsHelper(request);
+      await content.deleteDirectory('/examples');
+      await content.uploadDirectory(
+        path.resolve(__dirname, '../../examples'),
+        '/examples'
+      );
+    });
+    let errors = 0;
+    test.beforeEach(async ({ page }) => {
+      page.setViewportSize({ width: 1920, height: 1080 });
+      page.on('console', message => {
+        if (message.type() === 'error') {
+          errors += 1;
+        }
+      });
+    });
+
+    test.afterEach(async ({ page }) => {
+      errors = 0;
+    });
+
+    for (const file of fileList) {
+      test(`Should be able to render ${file} without error`, async ({
+        page
+      }) => {
+        await page.goto();
+        const fullPath = `examples/${file}`;
+        await page.notebook.openByPath(fullPath);
+        await page.notebook.activate(fullPath);
+        await page.locator('div.jpcad-Spinner').waitFor({ state: 'hidden' });
+
+        await page
+          .getByRole('tablist', { name: 'main sidebar' })
+          .getByRole('tab', { name: 'JupyterCad Control Panel' })
+          .click();
+        await page
+          .getByRole('tablist', { name: 'alternate sidebar' })
+          .getByRole('tab', { name: 'JupyterCad Control Panel' })
+          .click();
+        await page.waitForTimeout(1000);
+        const main = await page.$('#jp-main-split-panel');
+        expect(errors).toBe(0);
+        if (main) {
+          expect(await main.screenshot()).toMatchSnapshot({
+            name: `Render-${file}.png`,
+            maxDiffPixelRatio: 0.01
+          });
+        }
+      });
+    }
+  });
+});