Add ui tests (#12)

* Add ui tests

* Add build cache

* Run docker in background

.github/workflows/build.yml

@@ -83,6 +83,91 @@ jobs:
           jupyter labextension list 2>&1 | grep -ie "jupytercad-salome.*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: >-
+            jupyterlab=4
+
+      - name: Download extension package
+        uses: actions/download-artifact@v3
+        with:
+          name: extension-artifacts
+          path: ./ui-tests
+
+      - uses: docker/setup-buildx-action@v3
+
+      - name: Build docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./ui-tests
+          file: ./ui-tests/Dockerfile
+          tags: jupytercad_salome
+          load: true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - 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: Start Jupyterlab
+        shell: bash -l {0}
+        working-directory: ui-tests
+        run: |
+          docker image ls
+          docker run -d -p 8888:8888 jupytercad_salome:latest
+
+      - name: Wait for Jupyterlab
+        uses: ifaxity/wait-on-action@v1
+        with:
+          resource: http-get://localhost:8888/lab
+          timeout: 360000
+
+      - name: Execute integration tests
+        shell: bash -l {0}
+        working-directory: ui-tests
+        run: |
+          npx playwright 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

@@ -123,3 +123,7 @@ dmypy.json
 .ruff_cache
 .jupyter_ystore.db
 _client/
+
+**/ui-tests/test-results/
+**/ui-tests/playwright-report/
+**/ui-tests/*.whl

package.json

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

ui-tests/Dockerfile

@@ -0,0 +1,12 @@
+FROM trungleduc/salome-docker:9.10.0
+
+ARG MAMBA_DOCKERFILE_ACTIVATE=1
+
+WORKDIR /home/$MAMBA_USER/cad
+
+COPY --chown=$MAMBA_USER:$MAMBA_USER ./jupyter_server_test_config.py ./jupytercad_salome*.whl ./
+
+RUN python -m pip install jupyterlab "jupytercad>=1.0.0a4" jupytercad_salome*.whl
+
+EXPOSE 8888
+CMD source /home/user/salome_src/default_env_launch.sh && jupyter lab --config jupyter_server_test_config.py

ui-tests/jupyter_server_test_config.py

@@ -0,0 +1,14 @@
+"""Server configuration for integration tests.
+
+!! Never use this configuration in production because it
+opens the server to the world and provide access to JupyterLab
+JavaScript objects through the global window variable.
+"""
+
+from jupyterlab.galata import configure_jupyter_server
+
+configure_jupyter_server(c)  # noqa F821
+c.LabApp.collaborative = True  # noqa F821
+c.ServerApp.ip = "0.0.0.0"  # noqa F821
+# Uncomment to set server log level to debug level
+# c.ServerApp.log_level = "DEBUG"

ui-tests/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "jupytercad-salome-ui-tests",
+  "version": "1.0.0",
+  "description": "JupyterCad Integration Tests",
+  "private": true,
+  "scripts": {
+    "test": "npx playwright test --workers 1",
+    "test:update": "npx playwright test --update-snapshots",
+    "test:debug": "PWDEBUG=1 npx playwright test --workers 1"
+  },
+  "devDependencies": {
+    "@jupyterlab/galata": "^5.0.8",
+    "@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,23 @@
+/**
+ * Configuration for Playwright using default from @jupyterlab/galata
+ */
+const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
+
+module.exports = {
+  ...baseConfig,
+  webServer: {
+    url: 'http://localhost:8888/lab',
+    timeout: 120 * 1000,
+    reuseExistingServer: true
+  },
+  retries: 1,
+  use: {
+    ...baseConfig.use,
+    trace: 'off'
+  },
+  expect: {
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.02
+    }
+  }
+};

ui-tests/tests/ui.spec.ts

@@ -0,0 +1,70 @@
+import { expect, test, galata } from '@jupyterlab/galata';
+import path from 'path';
+
+test.use({ autoGoto: false });
+
+test.describe('UI Test', () => {
+  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:salome is activated!')
+      ).toHaveLength(1);
+    });
+  });
+
+  test.describe('Mesh generation test', () => {
+    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;
+    });
+
+    test(`Should be able to create mesh without error`, async ({ page }) => {
+      await page.goto();
+      await page.locator('div.jpcad-Spinner').waitFor({ state: 'hidden' });
+
+      await page
+        .getByLabel('notebook content')
+        .getByText('New JCAD File')
+        .click();
+      await page.getByRole('button', { name: 'New Box' }).click();
+      await page.getByRole('button', { name: 'Submit' }).click();
+      await page.getByRole('button', { name: 'Mesh creation' }).click();
+      await page.getByRole('button', { name: 'Submit' }).click();
+      await page.waitForTimeout(1000);
+      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(500);
+      const main = await page.$('#jp-main-split-panel');
+      expect(errors).toBe(0);
+      if (main) {
+        expect(await main.screenshot()).toMatchSnapshot();
+      }
+    });
+  });
+});