Switch from karma to web-test-runner (#704)

* Switch from karma to web-test-runner * Fix installing playwright browser * Update doc and fix installing chromium * Align browser name with playwright naming * Fix inconsistency in commands package * Add note on playwright cache Co-authored-by: gabalafou <gabriel@fouasnon.com> * Add note to install pw browsers * Lint contributing.md * Recommend npx rather than yarn to install web browsers * [skip ci] Apply suggestions from code review Co-authored-by: gabalafou <gabriel@fouasnon.com> * Add playwright as root dev dependency * More robust tests Co-authored-by: gabalafou <gabriel@fouasnon.com> --------- Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com> Co-authored-by: gabalafou <gabriel@fouasnon.com>
jupyterlab · May 29, 2024 · 6b92c7e · 6b92c7e
1 parent 63a0e8d
commit 6b92c7e
Show file tree

Hide file tree

Showing 41 changed files with 2,099 additions and 1,402 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -5,23 +5,38 @@ on:
     branches: [main]
   pull_request:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+env:
+  # Use environment variable to tell Playwright where to install browser binaries so they can be cached for future workflow runs
+  PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
+
 jobs:
   test:
     name: JS
     strategy:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        browser: [chrome-headless, firefox-headless, webkit-headless]
+        browser: [chromium, firefox, webkit]
         exclude:
           # Playwright webkit binary is not compatible with ubuntu
           - os: ubuntu-latest
-            browser: webkit-headless
+            browser: webkit
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
       - uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
 
+      - name: Set up browser cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ${{ github.workspace }}/pw-browsers
+          key: ${{ matrix.os }}-${{ matrix.browser }}-${{ hashFiles('./yarn.lock') }}
+
       - name: Install dependencies
         shell: bash
         run: |
@@ -34,7 +49,7 @@ jobs:
         run: |
             set -eux
             yarn build
-            yarn build:test
+            yarn playwright install ${{ matrix.browser }}
 
       - name: Run Tests
         run: |
@@ -43,9 +58,6 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    env:
-      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
-
     steps:
       - uses: actions/checkout@v4
       - uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
@@ -55,7 +67,7 @@ jobs:
         with:
           path: |
             ${{ github.workspace }}/pw-browsers
-          key: ubuntu-latest-${{ hashFiles('./yarn.lock') }}
+          key: ubuntu-latest-chromium-${{ hashFiles('./yarn.lock') }}
 
       - name: Install dependencies
         shell: bash

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -18,15 +18,35 @@ yarn build:src
 
 ## Tests
 
-The tests are written using karma to simulate a browser environment.
+The tests are written using [web-test-runner](https://modern-web.dev/docs/test-runner/overview/)
+to test in browser environment (provided by [playwright](https://playwright.dev/)).
+
+If you have never installed playwright before or updated it, you need to install the browsers
+by executing:
+
+```bash
+yarn playwright install
+```
 
 To run the tests, run:
 
 ```bash
 yarn build:test
-yarn test  # optionally test:chrome, test:firefox, or test:webkit
+yarn test  # optionally test:chromium, test:firefox, or test:webkit
 ```
 
+You can run the tests manually to debug them by going inside one package (e.g. `packages/application`)
+and then executing `yarn test:debug`. This should open your browser
+in which you will be able to select the test file to execute.
+The outcome of the tests are displayed in the web browser console and you
+can use the web browser debug capability to debug the tests.
+
+> [!NOTE]
+> The test files are transpiled and bundled before execution. Therefore
+> when debugging in the browser, you must use the file `tests/lib/bundle.test.js`.
+> Then you will need to apply the fix to the Typescript test file and re-run
+> the test command (to trigger the bundling) to check the test is fixed.
+
 ## Examples
 
 Lumino examples are in the `examples/` folder. To build and run an example:

diff --git a/examples/example-dockpanel-amd/package.json b/examples/example-dockpanel-amd/package.json
@@ -6,6 +6,6 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@playwright/test": "^1.29.0"
+    "@playwright/test": "^1.44.0"
   }
 }
diff --git a/examples/example-dockpanel-iife/package.json b/examples/example-dockpanel-iife/package.json
@@ -6,6 +6,6 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@playwright/test": "^1.29.0"
+    "@playwright/test": "^1.44.0"
   }
 }
diff --git a/examples/example-nested-dockpanel-amd/package.json b/examples/example-nested-dockpanel-amd/package.json
@@ -6,6 +6,6 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@playwright/test": "^1.29.0"
+    "@playwright/test": "^1.44.0"
   }
 }
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "clean": "lerna run clean",
     "clean:examples": "lerna run clean --scope \"@lumino/example-*\"",
     "clean:src": "lerna run clean --scope \"@lumino/!(test-|example-)*\"",
-    "clean:tests": "lerna run clean:tests",
+    "clean:test": "lerna run clean:test",
     "predocs": "lerna run build:src",
     "docs": "typedoc",
     "eslint": "eslint --ext .js,.jsx,.ts,.tsx --cache --fix .",
@@ -31,20 +31,18 @@
     "prettier:check": "prettier --check \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
     "publish": "npm run clean && npm run build:dist && node scripts/tag-versions.js && lerna publish --yes -m \"Publish\" from-package",
     "remove:dependency": "remove-dependency",
-    "test": "lerna run test --scope \"@lumino/!(example-)*\"",
-    "test:chrome": "lerna run test:chrome",
-    "test:chrome-headless": "lerna run test:chrome-headless",
+    "test": "lerna run test --concurrency 1 --scope \"@lumino/!(example-)*\"",
+    "test:chromium": "lerna run test:chromium --concurrency 1",
     "test:examples": "lerna run test --scope \"@lumino/example-*\"",
-    "test:firefox": "lerna run test:firefox",
-    "test:firefox-headless": "lerna run test:firefox-headless",
+    "test:firefox": "lerna run test:firefox --concurrency 1",
     "test:webkit": "lerna run test:webkit --concurrency 1",
-    "test:webkit-headless": "lerna run test:webkit-headless --concurrency 1",
     "update:dependency": "update-dependency --lerna",
     "update:versions": "lerna version --no-push --no-git-tag-version",
     "prepare": "husky install"
   },
   "devDependencies": {
     "@jupyterlab/buildutils": "^4.0.0",
+    "@playwright/test": "^1.44.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.45.0",

diff --git a/packages/algorithm/package.json b/packages/algorithm/package.json
@@ -27,16 +27,14 @@
     "build": "npm run build:src && rollup -c",
     "build:src": "tsc --build",
     "build:test": "npm run clean:test && tsc --build tests && cd tests && rollup -c",
-    "clean": "rimraf ./lib && rimraf *.tsbuildinfo && rimraf ./types && rimraf ./dist",
+    "clean": "rimraf ./lib *.tsbuildinfo ./types ./dist",
     "clean:test": "rimraf tests/lib tests/tsconfig.tsbuildinfo",
     "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-    "test": "npm run test:firefox-headless",
-    "test:chrome": "cd tests && karma start --browsers=Chrome",
-    "test:chrome-headless": "cd tests && karma start --browsers=ChromeHeadless",
-    "test:firefox": "cd tests && karma start --browsers=Firefox",
-    "test:firefox-headless": "cd tests && yarn karma start --browsers=FirefoxHeadless",
-    "test:webkit": "cd tests && karma start --browsers=Webkit",
-    "test:webkit-headless": "cd tests && karma start --browsers=WebkitHeadless",
+    "test": "npm run build:test && web-test-runner tests/lib/bundle.test.js --node-resolve --playwright",
+    "test:debug": "npm run test -- --manual --open",
+    "test:chromium": "npm run test -- --browsers chromium",
+    "test:firefox": "npm run test -- --browsers firefox",
+    "test:webkit": "npm run test -- --browsers webkit",
     "watch": "tsc --build --watch"
   },
   "devDependencies": {
@@ -46,15 +44,10 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/chai": "^4.3.4",
     "@types/mocha": "^2.2.39",
+    "@web/test-runner": "^0.18.2",
+    "@web/test-runner-playwright": "^0.11.0",
     "chai": "^4.3.4",
-    "karma": "^6.3.4",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^2.1.1",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-webkit-launcher": "^1.0.2",
     "mocha": "^9.0.3",
-    "playwright": "^1.35.0",
     "postcss": "^8.4.24",
     "rimraf": "^5.0.1",
     "rollup": "^3.25.1",

diff --git a/packages/algorithm/tests/karma.conf.js b/packages/algorithm/tests/karma.conf.js
diff --git a/packages/application/package.json b/packages/application/package.json
@@ -27,16 +27,14 @@
     "build": "npm run build:src && rollup -c",
     "build:src": "tsc --build",
     "build:test": "npm run clean:test && tsc --build tests && cd tests && rollup -c",
-    "clean": "rimraf ./lib && rimraf *.tsbuildinfo && rimraf ./types && rimraf ./dist",
+    "clean": "rimraf ./lib *.tsbuildinfo ./types ./dist",
     "clean:test": "rimraf tests/lib tests/tsconfig.tsbuildinfo",
     "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-    "test": "npm run test:firefox-headless",
-    "test:chrome": "cd tests && karma start --browsers=Chrome",
-    "test:chrome-headless": "cd tests && karma start --browsers=ChromeHeadless",
-    "test:firefox": "cd tests && karma start --browsers=Firefox",
-    "test:firefox-headless": "cd tests && karma start --browsers=FirefoxHeadless",
-    "test:webkit": "cd tests && karma start --browsers=Webkit",
-    "test:webkit-headless": "cd tests && karma start --browsers=WebkitHeadless",
+    "test": "npm run build:test && web-test-runner tests/lib/bundle.test.js --node-resolve --playwright",
+    "test:debug": "npm run test -- --manual --open",
+    "test:chromium": "npm run test -- --browsers chromium",
+    "test:firefox": "npm run test -- --browsers firefox",
+    "test:webkit": "npm run test -- --browsers webkit",
     "watch": "tsc --build --watch"
   },
   "dependencies": {
@@ -51,15 +49,10 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/chai": "^3.4.35",
     "@types/mocha": "^2.2.39",
+    "@web/test-runner": "^0.18.2",
+    "@web/test-runner-playwright": "^0.11.0",
     "chai": "^4.3.4",
-    "karma": "^6.3.4",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^2.1.1",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-webkit-launcher": "^1.0.2",
     "mocha": "^9.0.3",
-    "playwright": "^1.35.0",
     "postcss": "^8.4.24",
     "rimraf": "^5.0.1",
     "rollup": "^3.25.1",

diff --git a/packages/application/tests/karma.conf.js b/packages/application/tests/karma.conf.js
diff --git a/packages/collections/package.json b/packages/collections/package.json
@@ -27,16 +27,14 @@
     "build": "npm run build:src && rollup -c",
     "build:src": "tsc --build",
     "build:test": "npm run clean:test && tsc --build tests && cd tests && rollup -c",
-    "clean": "rimraf ./lib && rimraf *.tsbuildinfo && rimraf ./types && rimraf ./dist",
+    "clean": "rimraf ./lib *.tsbuildinfo ./types ./dist",
     "clean:test": "rimraf tests/lib tests/tsconfig.tsbuildinfo",
     "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-    "test": "npm run test:firefox-headless",
-    "test:chrome": "cd tests && karma start --browsers=Chrome",
-    "test:chrome-headless": "cd tests && karma start --browsers=ChromeHeadless",
-    "test:firefox": "cd tests && karma start --browsers=Firefox",
-    "test:firefox-headless": "cd tests && karma start --browsers=FirefoxHeadless",
-    "test:webkit": "cd tests && karma start --browsers=Webkit",
-    "test:webkit-headless": "cd tests && karma start --browsers=WebkitHeadless",
+    "test": "npm run build:test && web-test-runner tests/lib/bundle.test.js --node-resolve --playwright",
+    "test:debug": "npm run test -- --manual --open",
+    "test:chromium": "npm run test -- --browsers chromium",
+    "test:firefox": "npm run test -- --browsers firefox",
+    "test:webkit": "npm run test -- --browsers webkit",
     "watch": "tsc --build --watch"
   },
   "dependencies": {
@@ -49,15 +47,10 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/chai": "^3.4.35",
     "@types/mocha": "^2.2.39",
+    "@web/test-runner": "^0.18.2",
+    "@web/test-runner-playwright": "^0.11.0",
     "chai": "^4.3.4",
-    "karma": "^6.3.4",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^2.1.1",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-webkit-launcher": "^1.0.2",
     "mocha": "^9.0.3",
-    "playwright": "^1.35.0",
     "postcss": "^8.4.24",
     "rimraf": "^5.0.1",
     "rollup": "^3.25.1",

diff --git a/packages/collections/tests/karma.conf.js b/packages/collections/tests/karma.conf.js