Merge pull request #1455 from IgniteUI/nalipiev/update-wc-test-playwright

feat(wc): update tests to use Playwright

Author: Lipata

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "14.8.1",
+  "version": "14.8.2-beta.4",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -76,8 +76,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~21.0.1481",
-    "@igniteui/cli-core": "~14.8.1",
+    "@igniteui/angular-templates": "~21.0.1482-beta.4",
+    "@igniteui/cli-core": "~14.8.2-beta.4",
     "@inquirer/prompts": "^7.9.0",
     "@types/yargs": "^17.0.33",
     "chalk": "^5.3.0",

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__azure/azure-pipelines.yml

@@ -19,5 +19,9 @@ steps:
     continueOnError: true
   - script: npm run build
     displayName: 'Build the project'
+  - script: npx playwright install chromium-headless-shell
+    displayName: 'Install Playwright browsers'
   - script: npm run test
     displayName: 'Run tests'
+    env:
+      CI: 'true'

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/__dot__github/workflows/node.js.yml

@@ -29,5 +29,9 @@ jobs:
     - run: npm i # replace with 'npm ci' after committing lock file from first install
 #    - run: npm run lint
     - run: npm run build
+    - name: Install Playwright browsers
+      run: npx playwright install chromium-headless-shell
     - run: npm run test
+      env:
+        CI: 'true'
 

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json

@@ -26,23 +26,24 @@
     "igniteui-webcomponents": "~6.3.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^8.21.0",
+    "@babel/preset-env": "^7.28.3",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
     "@web/dev-server": "^0.4.6",
     "babel-plugin-template-html-minifier": "^4.1.0",
-    "concurrently": "^9.1.2",
-    "deepmerge": "^4.2.2",
+    "concurrently": "^9.2.1",
+    "deepmerge": "^4.3.1",
     "eslint": "^9.20.0",
-    "eslint-plugin-lit": "^1.8.2",
+    "eslint-plugin-lit": "^2.1.1",
     "igniteui-cli": "~14.8.0",
-    "jsdom": "^26.1.0",
-    "rimraf": "^5.0.10",
-    "source-map": "^0.7.4",
+    "playwright": "^1.55.1",
+    "rimraf": "^6.0.1",
+    "source-map": "^0.7.6",
     "tslib": "^2.8.1",
-    "vite": "^6.0.10",
-    "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-static-copy": "^2.2.0",
-    "vitest": "^3.1.3"
+    "vite": "^7.1.16",
+    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-static-copy": "^3.1.3",
+    "vitest": "^3.2.4",
+    "@vitest/browser": "^3.2.4"
   }
 }

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 import { VitePWA } from 'vite-plugin-pwa';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
@@ -21,8 +21,15 @@ export default defineConfig({
     chunkSizeWarningLimit: 10 * 1024 * 1024 // 10 MB
   },
   test: {
-    environment: 'jsdom',
-    include: ['test/src/app/**/*.test.js']
+    browser: {
+      enabled: true,
+      provider: 'playwright',
+      instances: [
+        {
+          browser: 'chromium'
+        },
+      ],
+    },
   },
   plugins: [
     /** Copy static assets */

packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json

@@ -34,23 +34,24 @@
     "typescript": "~5.7.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^8.21.0",
+    "@babel/preset-env": "^7.28.3",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
     "@web/dev-server": "^0.4.6",
     "babel-plugin-template-html-minifier": "^4.1.0",
-    "concurrently": "^9.1.2",
-    "deepmerge": "^4.2.2",
+    "concurrently": "^9.2.1",
+    "deepmerge": "^4.3.1",
     "eslint": "^9.20.0",
-    "eslint-plugin-lit": "^1.8.2",
-    "igniteui-cli": "^14.8.0",
-    "jsdom": "^26.1.0",
-    "rimraf": "^5.0.10",
-    "source-map": "^0.7.4",
+    "eslint-plugin-lit": "^2.1.1",
+    "igniteui-cli": "~14.8.0",
+    "playwright": "^1.55.1",
+    "rimraf": "^6.0.1",
+    "source-map": "^0.7.6",
     "tslib": "^2.8.1",
-    "vite": "^6.0.10",
-    "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-static-copy": "^2.2.0",
-    "vitest": "^3.1.3"
+    "vite": "^7.1.16",
+    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-static-copy": "^3.1.3",
+    "vitest": "^3.2.4",
+    "@vitest/browser": "^3.2.4"
   }
 }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/cli-core",
-  "version": "14.8.1",
+  "version": "14.8.2-beta.4",
   "description": "Base types and functionality for Ignite UI CLI",
   "repository": {
     "type": "git",

packages/igx-templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/angular-templates",
-  "version": "21.0.1481",
+  "version": "21.0.1482-beta.4",
   "description": "Templates for Ignite UI for Angular projects and components",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   "author": "Infragistics",
   "license": "MIT",
   "dependencies": {
-    "@igniteui/cli-core": "~14.8.1",
+    "@igniteui/cli-core": "~14.8.2-beta.4",
     "typescript": "~5.5.4"
   }
 }

packages/ng-schematics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/angular-schematics",
-  "version": "21.0.1481",
+  "version": "21.0.1482-beta.4",
   "description": "Ignite UI for Angular Schematics for ng new and ng generate",
   "repository": {
     "type": "git",
@@ -20,8 +20,8 @@
   "dependencies": {
     "@angular-devkit/core": "^19.0.0",
     "@angular-devkit/schematics": "^19.0.0",
-    "@igniteui/angular-templates": "~21.0.1481",
-    "@igniteui/cli-core": "~14.8.1",
+    "@igniteui/angular-templates": "~21.0.1482-beta.4",
+    "@igniteui/cli-core": "~14.8.2-beta.4",
     "@schematics/angular": "~19.0.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1"