Run the UI tests with the COOP/COEP headers (#103)

* Add Playwright webserver with COOP/COEP headers

* Test on cross origin isolated

* try -U with --pre

* use project on the CI matrix

* fix typo

* add exclude

* only exclude

* Add file system test

* lint

* update tests

* fix tests

.github/workflows/build.yml

@@ -207,7 +207,12 @@ jobs:
       fail-fast: false
       matrix:
         # try the latest stable and potential pre-releases
-        jupyterlite_version: ["jupyterlite-core -U", "jupyterlite-core --pre"]
+        jupyterlite_version: ["jupyterlite-core -U", "jupyterlite-core -U --pre"]
+        project: ["default", "crossoriginisolated"]
+        # the latest stable release is not compatible for now
+        exclude:
+          - jupyterlite_version: "jupyterlite-core -U"
+            project: "crossoriginisolated"
 
     steps:
     - name: Checkout
@@ -250,7 +255,7 @@ jobs:
     - name: Execute integration tests
       working-directory: ui-tests
       run: |
-        jlpm playwright test
+        jlpm playwright test --project ${{ matrix.project }}
 
     - name: Upload Playwright Test report
       if: always()

ui-tests/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "build": "yarn run clean && python build.py",
     "clean": "rimraf dist",
-    "start": "cd dist && python -m http.server -b 127.0.0.1 8000",
+    "start": "python -m http.server -b 127.0.0.1 8000 --directory dist",
+    "start:crossoriginisolated": "npx static-handler --cors --coop --coep --corp ./dist",
     "start:detached": "yarn run start&",
     "test": "playwright test",
     "test:debug": "PWDEBUG=1 playwright test",

ui-tests/playwright.config.js

@@ -11,13 +11,33 @@ module.exports = {
     trace: 'on-first-retry',
     video: 'retain-on-failure'
   },
+  projects: [
+    {
+      name: 'default',
+      use: {
+        baseURL: 'http://localhost:8000'
+      }
+    },
+    {
+      name: 'crossoriginisolated',
+      use: {
+        baseURL: 'http://localhost:8080'
+      }
+    }
+  ],
   retries: 1,
   webServer: [
     {
       command: 'yarn start',
       port: 8000,
       timeout: 120 * 1000,
       reuseExistingServer: true
+    },
+    {
+      command: 'yarn start:crossoriginisolated',
+      port: 8080,
+      timeout: 120 * 1000,
+      reuseExistingServer: true
     }
   ]
 };

ui-tests/tests/jupyterlite_xeus.spec.ts

@@ -25,7 +25,6 @@ test.describe('General Tests', () => {
   test('xeus-python should execute some code', async ({ page }) => {
     await page.goto('lab/index.html');
 
-    // Launch a Python notebook
     const xpython = page.locator('[title="Python 3.11 (XPython)"]').first();
     await xpython.click();
 
@@ -44,4 +43,22 @@ test.describe('General Tests', () => {
       'jupyter-xeus-execute.png'
     );
   });
+
+  test('the kernel should have access to the file system', async ({ page }) => {
+    await page.goto('lab/index.html');
+
+    // Create a Python notebook
+    const xpython = page.locator('[title="Python 3.11 (XPython)"]').first();
+    await xpython.click();
+
+    await page.notebook.save();
+
+    await page.notebook.setCell(0, 'code', 'import os; os.listdir()');
+    await page.notebook.runCell(0);
+
+    const cell = await page.notebook.getCellOutput(0);
+    const cellContent = await cell?.textContent();
+    const name = 'Untitled.ipynb';
+    expect(cellContent).toContain(name);
+  });
 });