fix(igx-ts): update the angular templates to use vite with playwright

Author: Hristo313

packages/igx-templates/igx-ts-legacy/bullet-graph/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -2,11 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
+import * as igGauges from 'igniteui-angular-gauges';
 
 describe('<%=ClassName%>', () => {
   let component: <%=ClassName%>;
   let fixture: ComponentFixture<<%=ClassName%>>;
 
+  // mock method specific to BulletGraph
+  vi.spyOn(igGauges.XamBulletGraph.prototype, 'fb').mockImplementation(() => { /* mock */ });
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],

packages/igx-templates/igx-ts-legacy/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.spec.ts

@@ -14,7 +14,8 @@ describe('<%=ClassName%>', () => {
       declarations: [ <%=ClassName%> ],
       imports: [ FormsModule, BrowserAnimationsModule,
         IgxGridModule, IgxDialogModule, IgxCategoryChartModule,
-        IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule ]
+        IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule ],
+      teardown: { destroyAfterEach: false }
     })
     .compileComponents();
   });

packages/igx-templates/igx-ts-legacy/linear-gauge/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -2,11 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
+import * as gauges from 'igniteui-angular-gauges';
 
 describe('<%=ClassName%>', () => {
   let component: <%=ClassName%>;
   let fixture: ComponentFixture<<%=ClassName%>>;
 
+  // mock method specific to LinearGauge
+  vi.spyOn(gauges.XamLinearGaugeView.prototype, 'ar').mockImplementation(() => { /* mock */ });
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],

packages/igx-templates/igx-ts-legacy/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 -- --watch=false --browsers ChromeHeadless
     displayName: 'Run tests'
+    env:
+      CI: 'true'

packages/igx-templates/igx-ts-legacy/projects/_base/files/__dot__github/workflows/node.js.yml

@@ -32,4 +32,8 @@ 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 -- --watch=false --browsers ChromeHeadless
+      env:
+        CI: 'true'

packages/igx-templates/igx-ts-legacy/projects/_base/files/angular.json

@@ -100,23 +100,7 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": ["src/styles.scss"],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
-            }
-          }
+          "builder": "@angular/build:unit-test"
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

packages/igx-templates/igx-ts-legacy/projects/_base/files/package.json

@@ -6,7 +6,7 @@
     "start": "ng serve -o",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng test",
+    "test": "vitest --browser",
     "lint": "ng lint"
   },
   "private": true,
@@ -27,22 +27,19 @@
     "zone.js": "~0.16.0"
   },
   "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^2.3.1",
     "@angular/build": "~21.2.1",
     "@angular/cli": "~21.2.1",
     "@angular/compiler-cli": "~21.2.0",
     "@eslint/js": "^10.0.1",
-    "@types/jasmine": "~5.1.4",
+    "@vitest/browser-playwright": "^4.1.0",
     "angular-eslint": "~21.3.0",
     "eslint": "^10.0.2",
     "igniteui-cli": "~<%=cliVersion%>",
-    "jasmine-core": "~5.12.1",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "8.56.1"
+    "typescript-eslint": "8.56.1",
+    "vitest": "^4.1.0"
   }
 }

packages/igx-templates/igx-ts-legacy/projects/_base/files/src/test.ts

@@ -0,0 +1,21 @@
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+import 'zone.js';
+import 'zone.js/testing';
+
+// guard against multiple initialization
+if (!(globalThis as any).__angular_testbed_initialized__) {
+  getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+  );
+
+  (globalThis as any).__angular_testbed_initialized__ = true;
+}
+
+afterEach(() => {
+  getTestBed().resetTestingModule();
+});

packages/igx-templates/igx-ts-legacy/projects/_base/files/tsconfig.spec.json

@@ -5,9 +5,12 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
+  "files": [
+    "src/test.ts"
+  ],
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"

packages/igx-templates/igx-ts-legacy/projects/_base/files/vite.config.ts

@@ -0,0 +1,34 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright'
+import angular from '@analogjs/vite-plugin-angular';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [angular()],
+  test: {
+    globals: true,
+    setupFiles: ['./src/test.ts'],
+    include: ['src/**/*.spec.ts'],
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      instances: [
+        {
+          browser: 'chromium'
+        },
+      ],
+    }
+  },
+  resolve: {
+    mainFields: ['module'],
+    alias: {
+      'igniteui-theming': path.resolve(__dirname, 'node_modules/igniteui-theming')
+    }
+  },
+  server: {
+    open: true,
+    port: 3003
+  }
+})