feat(igx-ts): update angular project to use vitest with playwright

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

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 import { IgxAccordionModule, IgxSwitchModule } from '<%=igxPackage%>';
@@ -10,7 +11,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [ NoopAnimationsModule, IgxAccordionModule, IgxSwitchModule ]
+      imports: [ NoopAnimationsModule, IgxAccordionModule, IgxSwitchModule, FormsModule ]
     })
       .compileComponents();
   });

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

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -10,7 +9,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxBulletGraphModule, NoopAnimationsModule]
+      imports: [IgxBulletGraphModule]
     })
       .compileComponents();
   });

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

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxChipsModule } from '<%=igxPackage%>';
+import { IgxChipsModule, IgxDropDownModule } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
 describe('<%=ClassName%>', () => {
@@ -10,7 +10,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [NoopAnimationsModule, IgxChipsModule]
+      imports: [NoopAnimationsModule, IgxChipsModule, IgxDropDownModule]
     })
       .compileComponents();
   });

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

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { <%=ClassName%> } from './<%=filePrefix%>';
-import { IgxGridModule, IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule, IgxDialogModule } from '<%=igxPackage%>';
+import { IgxGridModule, IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule, IgxDialogModule, IgxIconComponent, IgxButtonGroupComponent, IgxFocusModule } from '<%=igxPackage%>';
 import { IgxCategoryChartModule } from 'igniteui-angular-charts';
 
 describe('<%=ClassName%>', () => {
@@ -14,7 +14,9 @@ describe('<%=ClassName%>', () => {
       declarations: [ <%=ClassName%> ],
       imports: [ FormsModule, BrowserAnimationsModule,
         IgxGridModule, IgxDialogModule, IgxCategoryChartModule,
-        IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule ]
+        IgxButtonModule, IgxSwitchModule, IgxSliderModule, IgxCheckboxModule,
+        IgxButtonGroupComponent, IgxIconComponent, IgxFocusModule ],
+      teardown: { destroyAfterEach: false }
     })
     .compileComponents();
   });

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

@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 import { <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
-import { IgxTreeGridModule, IgxCheckboxModule, IgxButtonModule, IgxSliderModule, IgxSwitchModule } from '<%=igxPackage%>';
+import { IgxTreeGridModule, IgxCheckboxModule, IgxButtonModule, IgxSliderModule, IgxSwitchModule, IgxButtonGroupComponent, IgxIconComponent } from '<%=igxPackage%>';
 
 describe('<%=ClassName%>', () => {
   let component: <%=ClassName%>;
@@ -19,7 +19,9 @@ describe('<%=ClassName%>', () => {
         IgxCheckboxModule,
         IgxButtonModule,
         IgxSliderModule,
-        IgxSwitchModule]
+        IgxSwitchModule,
+        IgxButtonGroupComponent,
+        IgxIconComponent]
     })
       .compileComponents();
   });

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

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxGridModule } from '<%=igxPackage%>';
+import { IgxGridModule, IgxIconModule } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
 describe('<%=ClassName%>', () => {
@@ -10,7 +11,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [NoopAnimationsModule, IgxGridModule]
+      imports: [NoopAnimationsModule, IgxGridModule, FormsModule, IgxIconModule]
     }).compileComponents();
   });
 

packages/igx-templates/igx-ts-legacy/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/__filePrefix__.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
-  IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, IgxDialogModule, IgxHierarchicalGridModule
+  IgxGridModule, IgxDatePickerModule, IgxCheckboxModule, IgxDialogModule, IgxHierarchicalGridModule, IgxInputGroupModule
 } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -20,7 +20,8 @@ describe('<%=ClassName%>', () => {
         IgxHierarchicalGridModule,
         IgxDatePickerModule,
         IgxCheckboxModule,
-        IgxDialogModule
+        IgxDialogModule,
+        IgxInputGroupModule
       ]
     })
     .compileComponents();

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

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -10,7 +9,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxLinearGaugeModule, NoopAnimationsModule]
+      imports: [IgxLinearGaugeModule]
     })
       .compileComponents();
   });

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: npm run test -- --watch=false --browsers ChromeHeadless
+  - script: npx playwright install chromium-headless-shell
+    displayName: 'Install Playwright browsers'
+  - script: npm run test -- --watch=false
     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
-    - run: npm run test -- --watch=false --browsers ChromeHeadless
+    - name: Install Playwright browsers
+      run: npx playwright install chromium-headless-shell
+    - run: npm run test -- --watch=false
+      env:
+        CI: 'true'

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

@@ -38,10 +38,7 @@
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "src/styles.scss"<%=DefaultTheme%>
             ],
@@ -100,22 +97,9 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "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"]
-            }
+            "runnerConfig": true
           }
         },
         "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": "ng test --browsers=chromium",
     "lint": "ng lint"
   },
   "private": true,
@@ -31,18 +31,14 @@
     "@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/environments/environment.development.ts

@@ -1 +1,3 @@
-export const environment = {};
+export const environment = {
+  production: false
+};

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

@@ -1 +1,3 @@
-export const environment = {};
+export const environment = {
+  production: true
+};

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

@@ -6,11 +6,8 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "src/**/*.spec.ts"

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

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

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

@@ -0,0 +1,11 @@
+// Learn more about Vitest configuration options at https://vitest.dev/config/
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      { find: /^fflate$/, replacement: 'fflate/browser' }
+    ]
+  }
+});

packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/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": "ng test --browsers=chromium",
     "lint": "ng lint"
   },
   "private": true,
@@ -35,18 +35,14 @@
     "@eslint/js": "^10.0.1",
     "@types/facebook-js-sdk": "~3.3.6",
     "@types/hammerjs": "~2.0.46",
-    "@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/side-nav-auth/files/tsconfig.app.json

@@ -12,11 +12,8 @@
       "facebook-js-sdk"
     ]
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
   ],
   "exclude": [
     "src/**/*.spec.ts"

packages/igx-templates/igx-ts-legacy/projects/side-nav-auth/files/tsconfig.spec.json

@@ -5,14 +5,14 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine",
+      "vitest/globals",
       "node",
       "facebook-js-sdk"
     ],
-    "module": "commonjs"
+    "module": "esnext"
   },
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/**/*.ts"
   ]
 }

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

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -10,7 +9,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxRadialGaugeModule, NoopAnimationsModule]
+      imports: [IgxRadialGaugeModule]
     })
       .compileComponents();
   });

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

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxComboModule, IgxTooltipModule } from '<%=igxPackage%>';
+import { IgxComboModule, IgxIconComponent, IgxTooltipModule, IgxTreeComponent, IgxTreeNodeComponent } from '<%=igxPackage%>';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
 describe('<%=ClassName%>', () => {
@@ -10,7 +10,7 @@ describe('<%=ClassName%>', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [<%=ClassName%>],
-      imports: [IgxComboModule, NoopAnimationsModule, IgxTooltipModule]
+      imports: [IgxComboModule, NoopAnimationsModule, IgxTooltipModule, IgxIconComponent, IgxTreeComponent, IgxTreeNodeComponent]
     })
       .compileComponents();
   });

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

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
 import { <%=ClassName%> } from './<%=filePrefix%>';
 
@@ -9,7 +8,7 @@ describe('<%=ClassName%>', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [IgxBulletGraphModule, NoopAnimationsModule, <%=ClassName%>]
+      imports: [IgxBulletGraphModule, <%=ClassName%>]
     })
       .compileComponents();
   });

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

@@ -22,7 +22,8 @@ describe('<%=ClassName%>', () => {
 		  IgxSliderModule,
 		  IgxCheckboxModule,
 		  <%=ClassName%>,
-		]
+		],
+    teardown: { destroyAfterEach: false }
     })
     .compileComponents();
   });