test: migrate from Karma to Vitest Browser

.github/workflows/ci.yml

@@ -65,8 +65,39 @@ jobs:
         run: pnpm lint
 
   tests_local_browsers:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.playwright-version == '1.37.1' && 'ubuntu-22.04' || 'ubuntu-latest' }} # Ubuntu 24.04 fails when trying to install the libasound2 package, a Playwright system dependency
     needs: build
+    strategy:
+      fail-fast: false
+      matrix:
+        browser:
+          - chromium
+          - firefox
+          - webkit
+        browser-version:
+          - latest
+        playwright-version:
+          - 1.51.0 # Latest/same as in `package.json`
+        include:
+          # Match Angular browser support when Angular 19 was released
+          - browser: chromium
+            browser-version: 130 # Previous major Chrome version when Angular 19 was released
+            playwright-version: 1.48.2
+          - browser: firefox
+            browser-version: 130 # Firefox 131 was the previous major version when Angular 19 was released but this is not supported by any Playwright version
+            playwright-version: 1.48.2
+          - browser: firefox
+            browser-version: esr-115 # Old ESR when Firefox 131 was released
+            playwright-version: 1.37.1
+          - browser: firefox
+            browser-version: esr-128 # New ESR when Firefox 131 was released
+            playwright-version: 1.46.1
+          - browser: webkit
+            browser-version: 16 # Previous major Safari version when Angular 19 was released
+            playwright-version: 1.45.3
+    container:
+      image: mcr.microsoft.com/playwright:v${{ matrix.playwright-version }}
+      options: --user 1001
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -80,25 +111,31 @@ jobs:
         with:
           node-version: 20
           cache: pnpm
+      - name: Cache Vitest cache
+        uses: actions/cache@v4
+        with:
+          path: .vite
+          key: vitest-browser-${{ runner.os }}-${{ matrix.browser }}-${{ matrix.browser-version }}-configuration-${{ hashFiles('vitest.workspace.ts', '**/vite.config.mts', '**/test-setup.ts') }}-tests-${{ hashFiles('**/**.spec.ts') }}-${{ github.run_id }}
+          restore-keys: |
+            vitest-browser-${{ runner.os }}-${{ matrix.browser }}-${{ matrix.browser-version }}-configuration-${{ hashFiles('vitest.workspace.ts', '**/vite.config.mts', '**/test-setup.ts') }}-tests-${{ hashFiles('**/**.spec.ts') }}
+            vitest-browser-${{ runner.os }}-${{ matrix.browser }}-${{ matrix.browser-version }}-configuration-${{ hashFiles('vitest.workspace.ts', '**/vite.config.mts', '**/test-setup.ts') }}
+            vitest-browser-${{ runner.os }}-${{ matrix.browser }}-${{ matrix.browser-version }}
+            vitest-browser-${{ runner.os }}-${{ matrix.browser }}
       - name: Download package
         uses: actions/download-artifact@v4
         with:
           name: package
           path: dist/releases
-      - name: Install Chrome
-        uses: browser-actions/setup-chrome@v1
-      - name: Install Firefox
-        uses: browser-actions/setup-firefox@v1
       - name: Install dependencies
         run: pnpm install
+      - name: Install Playwright (${{ matrix.playwright-version }})
+        run: pnpm add --save-dev playwright@${{ matrix.playwright-version }}
+      # - name: Install Playwright system dependencies
+      #   run: pnpm exec playwright install-deps ${{ matrix.browser }}
+      # - name: Install Playwright browser (${{ matrix.browser }} ${{ matrix.browser-version }})
+      #   run: pnpm exec playwright install ${{ matrix.browser }}
       - name: Run local browser tests
-        env:
-          TEST_PLATFORM: local
-          CIRCLECI: true
-          CIRCLE_NODE_INDEX: 0
-          CIRCLE_NODE_TOTAL: 1
-          KARMA_PARALLEL_BROWSERS: 1
-        run: pnpm run test
+        run: pnpm exec nx run-many --targets=test --parallel=1 --browser=${{ matrix.browser }}
 
   tests_ssr:
     runs-on: ubuntu-latest
@@ -116,6 +153,15 @@ jobs:
         with:
           node-version: 20
           cache: pnpm
+      - name: Cache Vitest cache
+        uses: actions/cache@v4
+        with:
+          path: .vite
+          key: vitest-ssr-${{ runner.os }}-configuration-${{ hashFiles('vitest.workspace.ts', '**/vite.config.ssr.mts', '**/test-setup.ssr.ts') }}-tests-${{ hashFiles('**/**.spec.ts') }}-${{ github.run_id }}
+          restore-keys: |
+            vitest-ssr-${{ runner.os }}-configuration-${{ hashFiles('vitest.workspace.ts', '**/vite.config.ssr.mts', '**/test-setup.ssr.ts') }}-tests-${{ hashFiles('**/**.spec.ts') }}
+            vitest-ssr-${{ runner.os }}-configuration-${{ hashFiles('vitest.workspace.ts', '**/vite.config.ssr.mts', '**/test-setup.ssr.ts') }}
+            vitest-ssr-${{ runner.os }}
       - name: Download package
         uses: actions/download-artifact@v4
         with:
@@ -124,7 +170,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Run SSR tests
-        run: pnpm test:ssr
+        run: pnpm exec nx run-many --projects="@ngbracket/ngx-layout" --projects=universal-demo-app --targets=test --parallel=1 --configuration=ssr
 
   integration_tests:
     runs-on: ubuntu-latest

.gitignore

@@ -43,3 +43,7 @@ out-tsc
 .nx/cache
 .nx/workspace-data
 .angular
+
+vite.config.*.timestamp*
+vitest.config.*.timestamp*
+.vite

.prettierignore

@@ -8,4 +8,5 @@
 *.yml
 *.md
 *.js
-*.json
+*.json
+.vite

nx.json

@@ -31,10 +31,11 @@
     "production": [
       "default",
       "!{projectRoot}/tsconfig.spec.json",
-      "!{projectRoot}/**/*.spec.[jt]s",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/karma.conf.js",
       "!{projectRoot}/src/test.[jt]s",
-      "!{projectRoot}/test.[jt]s"
+      "!{projectRoot}/test.[jt]s",
+      "!{projectRoot}/(src/)?test-setup.[jt]s"
     ]
   },
   "generators": {

package.json

@@ -24,7 +24,8 @@
     "build:universal-demo-app": "nx run universal-demo-app:build:production",
     "serve:universal-demo-app": "nx run universal-demo-app:serve-ssr",
     "test": "nx test @ngbracket/ngx-layout",
-    "test:ssr": "webpack --config test/webpack-spec-ssr-bundle.js && jasmine --config=test/jasmine-ssr.json",
+    "test:ssr": "nx test @ngbracket/ngx-layout --configuration=ssr",
+    "test:watch": "vitest --watch --ui --project \"@ngbracket/ngx-layout\"",
     "lint": "stylelint projects/libs/**/*.scss --config=stylelint-config.json && tslint --project ./tsconfig.json --config tslint.json",
     "release": "pnpm build && pnpm stamp",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
@@ -35,7 +36,8 @@
     "update": "nx migrate latest",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "nx": "nx"
+    "nx": "nx",
+    "playwright:install": "playwright install --with-deps"
   },
   "private": true,
   "requiredAngularVersion": ">=19.0.0",
@@ -57,6 +59,9 @@
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
+    "@analogjs/vite-plugin-angular": "~1.10.0",
+    "@analogjs/vitest-angular": "~1.10.0",
+    "@angular-devkit/architect": "~0.1900.0",
     "@angular-devkit/build-angular": "19.1.7",
     "@angular-devkit/core": "19.1.7",
     "@angular-devkit/schematics": "19.1.7",
@@ -65,68 +70,51 @@
     "@angular/compiler-cli": "19.1.6",
     "@eslint/js": "^9.20.0",
     "@angular/language-service": "19.1.6",
-    "@ngtools/webpack": "^19.1.7",
     "@nx/angular": "20.4.4",
     "@nx/eslint": "20.4.4",
     "@nx/eslint-plugin": "20.4.4",
     "@nx/js": "20.4.4",
+    "@nx/vite": "20.4.4",
     "@nx/web": "20.4.4",
     "@nx/workspace": "20.4.4",
     "@schematics/angular": "19.1.7",
     "@swc-node/register": "~1.9.2",
     "@swc/core": "~1.5.29",
     "@swc/helpers": "~0.5.15",
+    "@testing-library/jest-dom": "6.6.3",
     "@types/express": "^4.17.21",
-    "@types/jasmine": "^5.1.6",
     "@types/minimatch": "^5.1.2",
     "@types/node": "^20.17.19",
     "@typescript-eslint/utils": "^8.24.0",
+    "@vitest/browser": "^2.1.9",
+    "@vitest/coverage-v8": "^2.1.9",
+    "@vitest/ui": "^2.1.9",
     "angular-eslint": "^19.1.0",
     "autoprefixer": "^10.4.0",
     "conventional-changelog-cli": "^4.1.0",
     "eslint": "^9.20.1",
     "eslint-config-prettier": "^9.1.0",
-    "jasmine": "^5.6.0",
-    "jasmine-core": "^5.6.0",
-    "karma": "^6.4.4",
-    "karma-browserstack-launcher": "^1.6.0",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-coverage": "^2.2.1",
-    "karma-firefox-launcher": "^2.1.3",
-    "karma-jasmine": "^5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
-    "karma-parallel": "^0.3.1",
-    "karma-sauce-launcher": "^4.3.6",
+    "jsdom": "~22.1.0",
     "minimatch": "^9.0.5",
     "ng-packagr": "19.1.2",
     "nx": "20.4.4",
+    "playwright": "1.51.0",
     "postcss": "^8.5.2",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.4.2",
     "postcss-url": "~10.1.3",
-    "protractor": "^7.0.0",
+    "prettier": "^3.4.2",
     "stylelint": "^15.11.0",
     "ts-node": "^10.9.2",
     "tslint": "^6.1.3",
     "tsutils": "^3.21.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.0",
-    "webpack": "^5.98.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "core-js",
-      "esbuild",
-      "lmdb",
-      "msgpackr-extract",
-      "nx",
-      "puppeteer"
-    ]
+    "vite": "^5.4.15",
+    "vitest": "^2.1.9"
   },
   "resolutions": {
-    "browser-sync-client": "2.29.3"
+    "browser-sync-client": "2.29.3",
+    "less": "^4.2.0"
   },
   "volta": {
     "node": "20.18.1"