fix(tests): Complete Vitest migration fixes for CI compilation errors

projects/igniteui-angular/test-utils/calendar-helper-utils.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { expect } from 'vitest';
 
 export class HelperTestFunctions {
     public static DAYS_VIEW = 'igx-days-view';

projects/igniteui-angular/test-utils/grid-base-components.spec.ts

@@ -4,6 +4,7 @@ import { ColumnDefinitions, GridTemplateStrings } from './template-strings.spec'
 import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxCellTemplateDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnPinningDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core';
+import { GridPagingMode } from 'igniteui-angular/grids/core';
 
 @Component({
     template: `
@@ -111,7 +112,7 @@ export class PagingComponent extends GridWithSizeComponent {
     imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent]
 })
 export class RemotePagingComponent extends GridWithSizeComponent {
-    public pagingMode = 'remote';
+    public pagingMode: GridPagingMode = GridPagingMode.Remote;
     public perPage = 3;
     public totalRecords = 10;
     public override data = SampleTestData.personJobDataFull();
@@ -126,15 +127,13 @@ export class SelectionComponent extends BasicGridComponent {
 }
 
 @Component({
-    template: GridTemplateStrings.declareGrid(` [autoGenerate]="true" [exportExcel]="exportExcel" [exportCsv]="exportCsv"`, '', ''),
+    template: GridTemplateStrings.declareGrid(` [autoGenerate]="true"`, '', ''),
     imports: [IgxGridComponent]
 })
 export class GridWithToolbarComponent extends GridWithSizeComponent {
     public showToolbar = true;
     public columnHiding = true;
     public columnPinning = true;
-    public exportExcel = true;
-    public exportCsv = true;
 
     public override data = SampleTestData.contactInfoData();
 }

projects/igniteui-angular/test-utils/grid-functions.spec.ts

@@ -307,29 +307,29 @@ export class GridFunctions {
     }
 
     public static verifyColumnIsHidden(column, isHidden: boolean, visibleColumnsCount: number) {
-        expect(column.hidden).toBe(isHidden, 'Hidden is not ' + isHidden);
+        expect(column.hidden, 'Hidden is not ' + isHidden).toBe(isHidden);
 
         const visibleColumns = column.grid.visibleColumns;
-        expect(visibleColumns.length).toBe(visibleColumnsCount, 'Unexpected visible columns count!');
-        expect(visibleColumns.findIndex((col) => col === column) > -1).toBe(!isHidden, 'Unexpected result for visibleColumns collection!');
+        expect(visibleColumns.length, 'Unexpected visible columns count!').toBe(visibleColumnsCount);
+        expect(visibleColumns.findIndex((col) => col === column) > -1, 'Unexpected result for visibleColumns collection!').toBe(!isHidden);
     }
 
     public static verifyColumnsAreHidden(columns, isHidden: boolean, visibleColumnsCount: number) {
         const visibleColumns = columns[0].grid.visibleColumns;
         columns.forEach(column => {
-            expect(column.hidden).toBe(isHidden, 'Hidden is not ' + isHidden);
-            expect(visibleColumns.findIndex((col) => col === column) > -1)
-                .toBe(!isHidden, 'Unexpected result for visibleColumns collection!');
+            expect(column.hidden, 'Hidden is not ' + isHidden).toBe(isHidden);
+            expect(visibleColumns.findIndex((col) => col === column) > -1, 'Unexpected result for visibleColumns collection!')
+                .toBe(!isHidden);
         });
-        expect(visibleColumns.length).toBe(visibleColumnsCount, 'Unexpected visible columns count!');
+        expect(visibleColumns.length, 'Unexpected visible columns count!').toBe(visibleColumnsCount);
     }
 
     public static verifyColumnIsPinned(column, isPinned: boolean, pinnedColumnsCount: number) {
-        expect(column.pinned).toBe(isPinned, 'Pinned is not ' + isPinned);
+        expect(column.pinned, 'Pinned is not ' + isPinned).toBe(isPinned);
 
         const pinnedColumns = column.grid.pinnedColumns;
-        expect(pinnedColumns.length).toBe(pinnedColumnsCount, 'Unexpected pinned columns count!');
-        expect(pinnedColumns.findIndex((col) => col === column) > -1).toBe(isPinned, 'Unexpected result for pinnedColumns collection!');
+        expect(pinnedColumns.length, 'Unexpected pinned columns count!').toBe(pinnedColumnsCount);
+        expect(pinnedColumns.findIndex((col) => col === column) > -1, 'Unexpected result for pinnedColumns collection!').toBe(isPinned);
     }
 
     public static verifyUnpinnedAreaWidth(grid: GridType, expectedWidth: number, includeScrollWidth = true) {

projects/igniteui-angular/test-utils/grid-samples.spec.ts

@@ -6,6 +6,7 @@ import { SampleTestData, DataParent } from './sample-test-data.spec';
 import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions, ExternalTemplateDefinitions } from './template-strings.spec';
 
 import { ColumnPinningPosition, ColumnType, FilteringExpressionsTree, FilteringLogic, FilteringStrategy, FormattedValuesSortingStrategy, IDataCloneStrategy, IFilteringExpressionsTree, IgxFilteringOperand, IgxFilterItem, IgxNumberFilteringOperand, IgxSummaryResult, ISortingOptions, ISortingStrategy, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
+import { GridColumnDataType } from 'igniteui-angular/core';
 import { IgxActionStripComponent } from 'igniteui-angular/action-strip';
 import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -14,6 +15,7 @@ import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 import { IgxButtonDirective, IgxFocusDirective } from 'igniteui-angular/directives';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { CellType, IGridCellEventArgs, IgxAdvancedFilteringDialogComponent, IgxCellEditorTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxDateSummaryOperand, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderIconDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxFilterCellTemplateDirective, IgxGridEditingActionsComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGroupByRowSelectorDirective, IgxHeadSelectorDirective, IgxNumberSummaryOperand, IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowSelectorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from 'igniteui-angular/grids/core';
+import { GridSelectionMode } from 'igniteui-angular/grids/core';
 
 @Component({
     template: GridTemplateStrings.declareGrid('', '', `<igx-column field="ID" [hidden]="true"></igx-column>`),
@@ -389,7 +391,7 @@ export class GridHireDateComponent extends BasicGridComponent {
 export class MovableColumnsComponent extends BasicGridComponent {
     public override data = SampleTestData.personIDNameRegionData();
     public autoGenerate = false;
-    public rowSelection = 'none';
+    public rowSelection: GridSelectionMode = GridSelectionMode.none;
     public isFilterable = false;
     public isSortable = false;
     public isResizable = false;
@@ -439,6 +441,9 @@ export class MovableTemplatedColumnsComponent extends BasicGridComponent {
     public isFilterable = false;
     public isSortable = false;
     public isResizable = false;
+    public isEditable = false;
+    public isHidden = false;
+    public isGroupable = false;
 }
 
 @Component({
@@ -451,6 +456,7 @@ export class MovableColumnsLargeComponent extends GridAutoGenerateComponent {
 
     public width = '500px';
     public height = '400px';
+    public paging = false;
 
     public columnInit(column: IgxColumnComponent) {
         column.sortable = true;
@@ -1138,16 +1144,16 @@ export class IgxGridAdvancedFilteringWithToolbarComponent extends BasicGridCompo
 })
 export class IgxGridAdvancedFilteringDynamicColumnsComponent extends BasicGridComponent implements OnInit {
     public override data = [];
-    public columns = [];
+    public columns: Array<{ field: string; header: string; width: string; type: GridColumnDataType }> = [];
 
     public ngOnInit(): void {
         this.columns = [
-            { field: 'ID', header: 'HeaderID', width: '100px', type: 'number' },
-            { field: 'ProductName', header: 'Product Name', width: '200px', type: 'string' },
-            { field: 'Downloads', header: 'Downloads', width: '100px', type: 'number' },
-            { field: 'Released', header: 'Released', width: '100px', type: 'boolean' },
-            { field: 'ReleaseDate', header: 'Release Date', width: '200px', type: 'date' },
-            { field: 'AnotherField', header: 'Another Field', width: '200px', type: 'string' },
+            { field: 'ID', header: 'HeaderID', width: '100px', type: GridColumnDataType.Number },
+            { field: 'ProductName', header: 'Product Name', width: '200px', type: GridColumnDataType.String },
+            { field: 'Downloads', header: 'Downloads', width: '100px', type: GridColumnDataType.Number },
+            { field: 'Released', header: 'Released', width: '100px', type: GridColumnDataType.Boolean },
+            { field: 'ReleaseDate', header: 'Release Date', width: '200px', type: GridColumnDataType.Date },
+            { field: 'AnotherField', header: 'Another Field', width: '200px', type: GridColumnDataType.String },
         ];
         this.data = SampleTestData.excelFilteringData();
     }

projects/igniteui-angular/test-utils/helper-utils.spec.ts

@@ -7,16 +7,14 @@ import { expect, beforeEach, afterEach, vi } from 'vitest';
 
 /**
  * Global beforeEach and afterEach checks to ensure test fails on specific warnings
- * Use direct env because karma-parallel's wrap ignores these in secondary shards
- * https://github.com/joeljeske/karma-parallel/issues/64
+ * Note: Vitest doesn't support global hooks like Jasmine's getEnv().
+ * These checks should be implemented in individual test suites as needed.
  */
-// TODO: vitest-migration: Unsupported jasmine property "getEnv" found. Please migrate this manually.
-(jasmine.getEnv() as any).beforeEach(() => {
+beforeEach(() => {
     vi.spyOn(console, 'warn');
 });
 
-// TODO: vitest-migration: Unsupported jasmine property "getEnv" found. Please migrate this manually.
-(jasmine.getEnv() as any).afterEach(() => {
+afterEach(() => {
     expect(console.warn, 'Components & tests should be free of @for track duplicated keys warnings').not.toHaveBeenCalledWith(expect.stringContaining('NG0955'));
     expect(console.warn, 'Components & tests should be free of @for track DOM re-creation warnings').not.toHaveBeenCalledWith(expect.stringContaining('NG0956'));
 });
@@ -104,26 +102,9 @@ export class TestNgZone extends NgZone {
 /* eslint-disable no-console */
 // TODO: enable on re-run by selecting enable debug logging
 // https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/troubleshooting-workflows/enabling-debug-logging
+// Note: Vitest uses a different reporter system. Custom reporters should be configured in vitest.config.ts
 const shardLogging = false;
 if (shardLogging) {
-    const myReporter = {
-        suiteStarted: function (result) {
-            const id = new URLSearchParams(window.parent.location.search).get('id');
-            console.log(`[${id}] Suite started: ${result.fullName}`);
-        },
-        suiteDone: function (result) {
-            const id = new URLSearchParams(window.parent.location.search).get('id');
-            console.log(`[${id}] Suite: ${result.fullName} has ${result.status}`);
-            for (const expectation of result.failedExpectations) {
-                console.log('Suite ' + expectation.message);
-                console.log(expectation.stack);
-            }
-            var memory = (performance as any).memory;
-            console.log(`[${id}] totalJSHeapSize: ${memory['totalJSHeapSize']} usedJSHeapSize: ${memory['usedJSHeapSize']} jsHeapSizeLimit: ${memory['jsHeapSizeLimit']}`);
-            if (memory['totalJSHeapSize'] >= memory['jsHeapSizeLimit'])
-                console.log('--------------------Heap Size limit reached!!!-------------------');
-        },
-    };
-    // TODO: vitest-migration: Unsupported jasmine property "getEnv" found. Please migrate this manually.
-    jasmine.getEnv().addReporter(myReporter);
+    // Vitest reporter configuration should be done in vitest.config.ts, not at runtime
+    console.log('Shard logging is enabled. Configure custom reporters in vitest.config.ts');
 }

projects/igniteui-angular/test-utils/template-strings.spec.ts

@@ -368,9 +368,9 @@ export class ColumnDefinitions {
         <igx-column [field]="'ProductName'" dataType="string" [filterable]="true" [sortable]="true"
                     [resizable]="true" [hasSummary]="true" [editable]="true"></igx-column>
         <igx-column [field]="'Downloads'" dataType="number" [filterable]="true" [sortable]="true"
-                    [resizable]="true" [moveable]="true"></igx-column>
+                    [resizable]="true"></igx-column>
         <igx-column [field]="'Released'" dataType="boolean" [filterable]="true" [resizable]="true"
-                    [moveable]="true" [editable]="true"></igx-column>
+                    [editable]="true"></igx-column>
         <igx-column [field]="'ReleaseDate'" dataType="date" [header]="'ReleaseDate'" [filterable]="true"
                     [sortable]="true" [resizable]="true" [editable]="true">
         </igx-column>

projects/igniteui-angular/tree/src/tree/tree-functions.spec.ts

@@ -70,17 +70,24 @@ export class TreeTestFunctions {
     public static createNodeSpy(properties: {
         [key: string]: any;
     } = null, methodNames: (keyof IgxTreeNode<any>)[] = ['selected']): MockedObject<IgxTreeNode<any>> {
-        if (!properties) {
-            // TODO: vitest-migration: Cannot transform jasmine.createSpyObj with a dynamic variable. Please migrate this manually. See: https://vitest.dev/api/vi.html#vi-fn
-            return jasmine.createSpyObj<IgxTreeNodeComponent<any>>(methodNames);
+        const spy: any = {};
+
+        // Create mock functions for each method name
+        methodNames.forEach(methodName => {
+            spy[methodName] = vi.fn().mockName(String(methodName));
+        });
+
+        // Add properties if provided
+        if (properties) {
+            Object.assign(spy, properties);
         }
-        // TODO: vitest-migration: Cannot transform jasmine.createSpyObj with a dynamic variable. Please migrate this manually. See: https://vitest.dev/api/vi.html#vi-fn
-        return jasmine.createSpyObj<IgxTreeNodeComponent<any>>(methodNames, properties);
+
+        return spy as MockedObject<IgxTreeNode<any>>;
     }
 
     public static createNodeSpies(level: number, count: number, parentNode?: IgxTreeNodeComponent<any>, children?: any[], allChildren?: any[]): IgxTreeNodeComponent<any>[] {
         const nodesArr = [];
-        const mockEmitter: EventEmitter<boolean> = {
+        const mockEmitter: any = {
             emit: vi.fn().mockName("emitter.emit")
         };
         for (let i = 0; i < count; i++) {

projects/igniteui-angular/tree/src/tree/tree.spec.ts

@@ -690,8 +690,8 @@ describe('IgxTree #treeView', () => {
                 unsub$.complete();
             }));
 
-            it('Should collapse all sibling nodes when `singleBranchExpand` is set and node is toggled', fakeAsync(() => {
-                pending('Causes jasmine to hang');
+            it.skip('Should collapse all sibling nodes when `singleBranchExpand` is set and node is toggled', fakeAsync(() => {
+                // Skipped: Causes the test runner to hang
                 tree.rootNodes.forEach((n, index) => index > 0 ? n.expanded = true : n.expanded = false);
                 fix.detectChanges();
                 expect(tree.nodes.filter(n => n.expanded).length).toBe(4);