Phase 3: Convert spec files from Jasmine to Vitest syntax (automated conversion)

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

Author: Copilot

projects/bundle-test/src/app/app.component.spec.ts

@@ -1,6 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
+import { describe, it, expect, beforeEach } from 'vitest';
 describe('AppComponent', () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [AppComponent]

projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts

@@ -17,6 +17,7 @@ import {
 } from './components';
 import { defineComponents } from '../utils/register';
 
+import { describe, it, expect, beforeEach, afterEach, beforeAll } from 'vitest';
 describe('Elements: ', () => {
     let testContainer: HTMLDivElement;
 

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.spec.ts

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { AsyncDirective, directive } from 'lit/async-directive.js';
 import { TemplateWrapperComponent } from './wrapper.component';
 
+import { describe, it, expect, beforeEach } from 'vitest';
 const directiveLog = [];
 class ToLowerAsyncDirective extends AsyncDirective {
     public override render(text: string) {

projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts

@@ -4,6 +4,7 @@ import { Component, inject } from '@angular/core';
 import { IconMeta, IgxIconService } from 'igniteui-angular';
 import { wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
 
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 describe('Icon broadcast service', () => {
     let fixture: ComponentFixture<BroadcastServiceComponent>;
     let broadcastChannel: BroadcastChannel;

projects/igniteui-angular-performance/src/app/app.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 
+import { describe, it, expect, beforeEach } from 'vitest';
 describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;

projects/igniteui-angular/accordion/src/accordion/accordion.component.spec.ts

@@ -8,6 +8,7 @@ import { IAccordionCancelableEventArgs, IAccordionEventArgs, IgxAccordionCompone
 import { slideInLeft, slideOutRight } from 'igniteui-angular/animations';
 import { UIInteractions } from 'igniteui-angular/test-utils/ui-interactions.spec';
 
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 const ACCORDION_CLASS = 'igx-accordion';
 const PANEL_TAG = 'IGX-EXPANSION-PANEL';
 const ACCORDION_TAG = 'IGX-ACCORDION';
@@ -69,8 +70,8 @@ describe('Rendering Tests', () => {
 
         it(`Should be able to expand only one panel when singleBranchExpanded is set to true
         and expandAll/collapseAll should not update the current expansion state `, fakeAsync(() => {
-            spyOn(accordion.panelExpanded, 'emit').and.callThrough();
-            spyOn(accordion.panelCollapsed, 'emit').and.callThrough();
+            vi.spyOn(accordion.panelExpanded, 'emit');
+            vi.spyOn(accordion.panelCollapsed, 'emit');
             accordion.singleBranchExpand = true;
             fix.detectChanges();
 
@@ -138,8 +139,8 @@ describe('Rendering Tests', () => {
 
         it(`Should update the current expansion state when expandAll/collapseAll is invoked and
         singleBranchExpaned is set to false`, fakeAsync(() => {
-            spyOn(accordion.panelExpanded, 'emit').and.callThrough();
-            spyOn(accordion.panelCollapsed, 'emit').and.callThrough();
+            vi.spyOn(accordion.panelExpanded, 'emit');
+            vi.spyOn(accordion.panelCollapsed, 'emit');
             accordion.singleBranchExpand = false;
             accordion.panels[3].collapse();
             tick();
@@ -184,15 +185,15 @@ describe('Rendering Tests', () => {
         });
 
         it('Should emit ing and ed events when expand panel state is toggled', fakeAsync(() => {
-            spyOn(accordion.panelExpanded, 'emit').and.callThrough();
-            spyOn(accordion.panelExpanding, 'emit').and.callThrough();
-            spyOn(accordion.panelCollapsed, 'emit').and.callThrough();
-            spyOn(accordion.panelCollapsing, 'emit').and.callThrough();
-
-            spyOn(accordion.panels[0].contentCollapsing, 'emit').and.callThrough();
-            spyOn(accordion.panels[0].contentCollapsed, 'emit').and.callThrough();
-            spyOn(accordion.panels[0].contentExpanding, 'emit').and.callThrough();
-            spyOn(accordion.panels[0].contentExpanded, 'emit').and.callThrough();
+            vi.spyOn(accordion.panelExpanded, 'emit');
+            vi.spyOn(accordion.panelExpanding, 'emit');
+            vi.spyOn(accordion.panelCollapsed, 'emit');
+            vi.spyOn(accordion.panelCollapsing, 'emit');
+
+            vi.spyOn(accordion.panels[0].contentCollapsing, 'emit');
+            vi.spyOn(accordion.panels[0].contentCollapsed, 'emit');
+            vi.spyOn(accordion.panels[0].contentExpanding, 'emit');
+            vi.spyOn(accordion.panels[0].contentExpanded, 'emit');
 
             accordion.singleBranchExpand = false;
             fix.detectChanges();

projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts

@@ -6,6 +6,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { wait } from '../../../test-utils/ui-interactions.spec';
 
+import { describe, it, expect, beforeEach } from 'vitest';
 const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions';
 const DROP_DOWN_LIST = 'igx-drop-down__list';
 

projects/igniteui-angular/avatar/src/avatar/avatar.component.spec.ts

@@ -3,6 +3,7 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxAvatarComponent, IgxAvatarType, IgxAvatarSize } from './avatar.component';
 
+import { describe, it, expect, beforeEach } from 'vitest';
 describe('Avatar', () => {
     const baseClass = 'igx-avatar';
 

projects/igniteui-angular/badge/src/badge/badge.component.spec.ts

@@ -3,6 +3,7 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxBadgeComponent, IgxBadgeType } from './badge.component';
 
+import { describe, it, expect, beforeEach } from 'vitest';
 describe('Badge', () => {
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({

projects/igniteui-angular/banner/src/banner/banner.component.spec.ts

@@ -8,6 +8,7 @@ import { IgxBannerActionsDirective } from './banner.directives';
 import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card';
 import { IgxAvatarComponent } from 'igniteui-angular/avatar';
 
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 const CSS_CLASS_EXPANSION_PANEL = 'igx-expansion-panel';
 const CSS_CLASS_EXPANSION_PANEL_BODY = 'igx-expansion-panel__body';
 const CSS_CLASS_BANNER = 'igx-banner';
@@ -231,12 +232,12 @@ describe('igxBanner', () => {
             const banner = fixture.componentInstance.banner;
             expect(banner.collapsed).toBeTruthy();
 
-            spyOn(banner.opened, 'emit');
-            spyOn(banner.closed, 'emit');
-            spyOn(banner, 'onExpansionPanelClose').and.callThrough();
-            spyOn(banner, 'onExpansionPanelOpen').and.callThrough();
-            spyOn(banner, 'open').and.callThrough();
-            spyOn(banner, 'close').and.callThrough();
+            vi.spyOn(banner.opened, 'emit');
+            vi.spyOn(banner.closed, 'emit');
+            vi.spyOn(banner, 'onExpansionPanelClose');
+            vi.spyOn(banner, 'onExpansionPanelOpen');
+            vi.spyOn(banner, 'open');
+            vi.spyOn(banner, 'close');
 
             banner.open();
             tick();
@@ -337,10 +338,10 @@ describe('igxBanner', () => {
             const fixture = TestBed.createComponent(IgxBannerSampleComponent);
             fixture.detectChanges();
             const banner = fixture.componentInstance.banner;
-            spyOn(banner.closed, 'emit');
-            spyOn(banner.closing, 'emit');
-            spyOn(banner.opened, 'emit');
-            spyOn(banner.opening, 'emit');
+            vi.spyOn(banner.closed, 'emit');
+            vi.spyOn(banner.closing, 'emit');
+            vi.spyOn(banner.opened, 'emit');
+            vi.spyOn(banner.opening, 'emit');
             expect(banner.collapsed).toEqual(true);
             expect(banner.opening.emit).toHaveBeenCalledTimes(0);
             expect(banner.opened.emit).toHaveBeenCalledTimes(0);
@@ -364,10 +365,10 @@ describe('igxBanner', () => {
             const fixture = TestBed.createComponent(SimpleBannerEventsComponent);
             fixture.detectChanges();
             const banner = fixture.componentInstance.banner;
-            spyOn(banner.closing, 'emit').and.callThrough();
-            spyOn(banner.opening, 'emit').and.callThrough();
-            spyOn(banner.closed, 'emit').and.callThrough();
-            spyOn(banner.opened, 'emit').and.callThrough();
+            vi.spyOn(banner.closing, 'emit');
+            vi.spyOn(banner.opening, 'emit');
+            vi.spyOn(banner.closed, 'emit');
+            vi.spyOn(banner.opened, 'emit');
             expect(banner.collapsed).toEqual(true);
             fixture.componentInstance.cancelFlag = true;
             banner.toggle();