Merge pull request #540 from ckeditor/i/539-vitest

Replace Karma/Jasmine with Vitest

Author: pomek

.circleci/config.yml

@@ -101,7 +101,6 @@ jobs:
       - checkout
       - bootstrap_repository_command
       - browser-tools/install_chrome
-      - browser-tools/install_firefox
       - run:
           name: Execute ESLint
           command: pnpm run lint
@@ -111,19 +110,6 @@ jobs:
       - run:
           name: Run unit tests
           command: pnpm run coverage
-      - run:
-          name: Verify the code coverage
-          command: |
-            #!/bin/bash
-
-            # Create the `nyc` directory.
-            mkdir .nyc_output
-
-            # Copy results.
-            cp coverage/coverage-final.json .nyc_output
-
-            # Verify results.
-            npx nyc check-coverage --branches 100 --functions 100 --lines 100 --statements 100
       - run:
           name: Run e2e tests
           command: pnpm run test:e2e:ci

README.md

@@ -133,12 +133,20 @@ To test it in production, use:
 pnpm run start --configuration production
 ```
 
-To run unit tests, use:
+To run unit tests once (without watch, Vitest + Chrome), use:
 
 ```bash
 pnpm run test
 ```
 
+The unit test suite runs in a real browser (Chrome) using Vitest browser mode.
+
+To run unit tests in watch mode, use:
+
+```bash
+pnpm run test:dev
+```
+
 To run e2e tests, run:
 
 ```bash
@@ -154,6 +162,8 @@ To run coverage tests, run:
 pnpm run coverage
 ```
 
+The coverage report is generated in the `./coverage` directory.
+
 Play with the application and make sure the component works properly.
 
 ## Releasing package

angular.json

@@ -78,22 +78,10 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@analogjs/vitest-angular:test",
           "options": {
-            "main": "src/test.ts",
-            "codeCoverageExclude": ["src/editor/**"],
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "styles": [
-              "ckeditor5/ckeditor5.css",
-              "src/styles.css"
-            ],
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "configFile": "vitest.config.mjs",
+            "watch": true
           }
         }
       }

karma.conf.js

@@ -9,11 +9,12 @@
     "postinstall": "node ./scripts/postinstall.js",
     "start": "ng serve",
     "build": "ng build --configuration production",
-    "test": "ng test",
+    "test": "ng test --watch=false",
+    "test:dev": "ng test --watch",
     "test:e2e": "cypress run",
     "test:e2e:ci": "start-server-and-test 'pnpm run start' http://localhost:4200/ 'pnpm run test:e2e --quiet'",
     "test:scripts": "vitest --config ./scripts-tests/vitest.config.mjs --run",
-    "coverage": "ng test --watch=false --code-coverage",
+    "coverage": "ng test --watch=false --coverage",
     "lint": "eslint",
     "build-package": "ng-packagr -p src/ckeditor/ng-package.json",
     "release:prepare-changelog": "node scripts/preparechangelog.mjs",
@@ -36,6 +37,8 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.2.3",
+    "@analogjs/vitest-angular": "^2.2.3",
     "@angular-devkit/build-angular": "^19.2.19",
     "@angular/cli": "^19.2.19",
     "@angular/compiler-cli": "^19.2.18",
@@ -45,9 +48,9 @@
     "@ckeditor/ckeditor5-dev-ci": "^54.2.0",
     "@ckeditor/ckeditor5-dev-release-tools": "^54.2.0",
     "@ckeditor/ckeditor5-dev-utils": "^54.2.0",
-    "@types/jasminewd2": "^2.0.10",
     "@types/node": "^14.11.8",
-    "@vitest/coverage-v8": "^4.0.15",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "ckeditor5": "^47.0.0",
     "ckeditor5-premium-features": "^47.0.0",
     "css-loader": "^5.2.7",
@@ -58,17 +61,10 @@
     "fs-extra": "^10.0.1",
     "globals": "^16.1.0",
     "husky": "^8.0.2",
-    "jasmine-core": "~3.8.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "^6.3.17",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "^2.2.0",
-    "karma-firefox-launcher": "^1.1.0",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
     "lint-staged": "^10.4.0",
     "minimist": "^1.2.8",
     "ng-packagr": "^19.2.2",
+    "playwright": "^1.52.0",
     "postcss-loader": "^4.3.0",
     "raw-loader": "^4.0.1",
     "semver": "^7",
@@ -79,7 +75,7 @@
     "typescript": "~5.5.0",
     "typescript-eslint": "^8.32.0",
     "upath": "^2.0.1",
-    "vitest": "^4.0.15",
+    "vitest": "^4.0.18",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },