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

Author: Hristo313

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'