test(element-ng): migrate r to vitest

Author: spike-rabbit

angular.json

@@ -170,7 +170,7 @@
             "buildTarget": "element-ng:test-target",
             "browsers": ["chromium"],
             "browserViewport": "1280x720",
-            "exclude": ["[n-r]*/**", "schematics/**"],
+            "exclude": ["[n-q]*/**", "schematics/**"],
             "runnerConfig": true
           }
         },
@@ -179,7 +179,7 @@
           "options": {
             "tsConfig": "projects/element-ng/tsconfig.spec.json",
             "karmaConfig": "projects/element-ng/karma.conf.cjs",
-            "exclude": ["**/[a-ms-z]*/**", "schematics/**", "**/*.vitest.spec.ts"],
+            "exclude": ["**/[a-mr-z]*/**", "schematics/**", "**/*.vitest.spec.ts"],
             "assets": [
               {
                 "glob": "**/*",

projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.spec.ts

@@ -9,7 +9,7 @@ import {
   MockResizeObserver,
   mockResizeObserver,
   restoreResizeObserver
-} from '../resize-observer/mock-resize-observer.vitest.spec';
+} from '../resize-observer/testing/resize-observer.mock';
 import { SiAutoCollapsableListItemDirective } from './si-auto-collapsable-list-item.directive';
 import { SiAutoCollapsableListModule } from './si-auto-collapsable-list.module';
 

projects/element-ng/breadcrumb/si-breadcrumb.component.spec.ts

@@ -18,7 +18,7 @@ import {
   mockResizeObserver,
   MockResizeObserver,
   restoreResizeObserver
-} from '../resize-observer/mock-resize-observer.vitest.spec';
+} from '../resize-observer/testing/resize-observer.mock';
 import { BreadcrumbItem } from './breadcrumb-item.model';
 
 const TEST_ITEMS = [

projects/element-ng/resize-observer/mock-resize-observer.spec.ts

@@ -5,13 +5,14 @@
 import { Component, ElementRef, signal, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Subscription } from 'rxjs';
+import { Mock } from 'vitest';
 
+import { ElementDimensions, ResizeObserverService } from './resize-observer.service';
 import {
   MockResizeObserver,
   mockResizeObserver,
   restoreResizeObserver
-} from './mock-resize-observer.spec';
-import { ElementDimensions, ResizeObserverService } from './resize-observer.service';
+} from './testing/resize-observer.mock';
 
 @Component({
   template: `<div #theDiv [style.width.px]="width()" [style.height.px]="height()">Testli</div>`
@@ -33,7 +34,7 @@ describe('ResizeObserverService', () => {
   let component: TestHostComponent;
   let service: ResizeObserverService;
   let subscription: Subscription;
-  let spy: jasmine.Spy<(dim: ElementDimensions) => void>;
+  let spy: Mock<(dim: ElementDimensions) => void>;
 
   const subscribe = (initial: boolean): void => {
     subscription = service
@@ -56,7 +57,7 @@ describe('ResizeObserverService', () => {
     component = fixture.componentInstance;
     fixture.detectChanges();
 
-    spy = jasmine.createSpy();
+    spy = vi.fn();
   });
 
   afterEach(() => {
@@ -67,7 +68,7 @@ describe('ResizeObserverService', () => {
   it('emits initial size event when asked', async () => {
     subscribe(true);
     await timeout(10);
-    expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({ width: 100, height: 100 }));
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({ width: 100, height: 100 }));
   });
 
   it('emits no initial size event when not asked', async () => {
@@ -87,7 +88,7 @@ describe('ResizeObserverService', () => {
       expect(spy).not.toHaveBeenCalled();
 
       await timeout(150);
-      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({ width: 200, height: 100 }));
+      expect(spy).toHaveBeenCalledWith(expect.objectContaining({ width: 200, height: 100 }));
     }
   });
 
@@ -102,7 +103,7 @@ describe('ResizeObserverService', () => {
       expect(spy).not.toHaveBeenCalled();
 
       await timeout(150);
-      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({ width: 100, height: 200 }));
+      expect(spy).toHaveBeenCalledWith(expect.objectContaining({ width: 100, height: 200 }));
     }
   });
 
@@ -111,20 +112,20 @@ describe('ResizeObserverService', () => {
 
     // Skip test when browser is not focussed to prevent failures.
     if (document.hasFocus()) {
-      const spy2: jasmine.Spy<(dim: ElementDimensions) => void> = jasmine.createSpy();
+      const spy2: Mock<(dim: ElementDimensions) => void> = vi.fn();
       const subs2 = service
         .observe(component.theDiv().nativeElement, 50, true)
         .subscribe(dim => spy2(dim));
 
       await timeout(20);
-      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({ width: 100, height: 100 }));
-      expect(spy2).toHaveBeenCalledWith(jasmine.objectContaining({ width: 100, height: 100 }));
+      expect(spy).toHaveBeenCalledWith(expect.objectContaining({ width: 100, height: 100 }));
+      expect(spy2).toHaveBeenCalledWith(expect.objectContaining({ width: 100, height: 100 }));
 
       detectSizeChange(200, 100);
 
       await timeout(150);
-      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({ width: 200, height: 100 }));
-      expect(spy2).toHaveBeenCalledWith(jasmine.objectContaining({ width: 200, height: 100 }));
+      expect(spy).toHaveBeenCalledWith(expect.objectContaining({ width: 200, height: 100 }));
+      expect(spy2).toHaveBeenCalledWith(expect.objectContaining({ width: 200, height: 100 }));
 
       subs2.unsubscribe();
     }

projects/element-ng/resize-observer/resize-observer.service.spec.ts

@@ -4,14 +4,15 @@
  */
 import { Component, ElementRef, signal, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockInstance } from 'vitest';
 
 import { ElementDimensions } from './index';
+import { SiResizeObserverDirective } from './si-resize-observer.directive';
 import {
   MockResizeObserver,
   mockResizeObserver,
   restoreResizeObserver
-} from './mock-resize-observer.spec';
-import { SiResizeObserverDirective } from './si-resize-observer.directive';
+} from './testing/resize-observer.mock';
 
 @Component({
   imports: [SiResizeObserverDirective],
@@ -39,7 +40,7 @@ class TestHostComponent {
 describe('SiResizeObserverDirective', () => {
   let fixture: ComponentFixture<TestHostComponent>;
   let component: TestHostComponent;
-  let spy: jasmine.Spy<(dim: ElementDimensions) => void>;
+  let spy: MockInstance;
 
   const detectSizeChange = (inlineSize: number = 100, blockSize: number = 100): void => {
     component.width.set(inlineSize);
@@ -50,49 +51,44 @@ describe('SiResizeObserverDirective', () => {
   };
 
   beforeEach(() => {
+    vi.useFakeTimers();
     mockResizeObserver();
     fixture = TestBed.createComponent(TestHostComponent);
     component = fixture.componentInstance;
-    spy = spyOn(component, 'resizeHandler');
+    spy = vi.spyOn(component, 'resizeHandler');
   });
 
-  beforeEach(() => jasmine.clock().install());
-
   afterEach(() => {
+    spy.mockClear();
     restoreResizeObserver();
-    jasmine.clock().uninstall();
+    vi.useRealTimers();
   });
 
   it('emits initial size event', async () => {
     fixture.detectChanges();
-    jasmine.clock().tick(100);
+    vi.advanceTimersByTime(100);
     await fixture.whenStable();
     expect(component.resizeHandler).toHaveBeenCalledWith({ width: 100, height: 100 });
   });
 
   it('emits on width change', async () => {
-    // not interested in the initial event
-    spy.calls.reset();
     detectSizeChange(200, 100);
 
     expect(component.resizeHandler).not.toHaveBeenCalled();
 
-    jasmine.clock().tick(100);
+    vi.advanceTimersByTime(100);
     fixture.detectChanges();
     await fixture.whenStable();
 
     expect(component.resizeHandler).toHaveBeenCalledWith({ width: 200, height: 100 });
   });
 
   it('emits on height change', async () => {
-    // not interested in the initial event
-    spy.calls.reset();
-
     detectSizeChange(100, 200);
 
     expect(component.resizeHandler).not.toHaveBeenCalled();
 
-    jasmine.clock().tick(100);
+    vi.advanceTimersByTime(100);
     fixture.detectChanges();
     await fixture.whenStable();
 
@@ -103,16 +99,20 @@ describe('SiResizeObserverDirective', () => {
 describe('SiResizeObserverDirective with emitInitial=false', () => {
   let fixture: ComponentFixture<TestHostComponent>;
   let component: TestHostComponent;
-  let spy: jasmine.Spy<(dim: ElementDimensions) => void>;
+  let spy: MockInstance;
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestHostComponent);
     component = fixture.componentInstance;
     component.emitInitial = false;
-    spy = spyOn(component, 'resizeHandler');
+    spy = vi.spyOn(component, 'resizeHandler');
     fixture.detectChanges();
   });
 
+  afterEach(() => {
+    spy.mockClear();
+  });
+
   it('does not emit initial size event', () => {
     expect(spy).not.toHaveBeenCalled();
   });

projects/element-ng/resize-observer/si-resize-observer.directive.spec.ts

@@ -10,7 +10,7 @@ import {
   MockResizeObserver,
   mockResizeObserver,
   restoreResizeObserver
-} from './mock-resize-observer.spec';
+} from './testing/resize-observer.mock';
 
 @Component({
   imports: [SiResponsiveContainerDirective],
@@ -44,17 +44,17 @@ describe('SiResponsiveContainerDirective', () => {
   afterEach(() => restoreResizeObserver());
 
   const testSize = async (size: number, clazz: string): Promise<void> => {
-    jasmine.clock().install();
+    vi.useFakeTimers();
     component.width.set(size);
     fixture.detectChanges();
     MockResizeObserver.triggerResize({});
 
-    jasmine.clock().tick(100);
+    vi.advanceTimersByTime(100);
     fixture.detectChanges();
     await fixture.whenStable();
 
-    expect(element.querySelector<HTMLElement>('div')!.className).toBe(clazz);
-    jasmine.clock().uninstall();
+    expect(element.querySelector<HTMLElement>('div')!).toHaveClass(clazz);
+    vi.useRealTimers();
   };
 
   it('sets correct si-container-* class', async () => {

projects/element-ng/resize-observer/si-responsive-container.directive.spec.ts

@@ -26,19 +26,42 @@ export const restoreResizeObserver = (): void => {
 export class MockResizeObserver {
   static instance: MockResizeObserver;
   private callback: ResizeObserverCallback;
+  /** @defaultValue [] */
   observed: [Element, ResizeObserverOptions | undefined][] = [];
 
   constructor(callback: ResizeObserverCallback) {
     this.callback = callback;
     MockResizeObserver.instance = this;
   }
 
+  /**
+   * @defaultValue
+   * ```
+   * vi.fn(() => (this.observed = []))
+   * ```
+   */
   disconnect = vi.fn(() => (this.observed = []));
 
+  /**
+   * @defaultValue
+   * ```
+   * vi.fn((target: Element, options?: ResizeObserverOptions) =>
+  this.observed.push([target, options])
+  )
+   * ```
+   */
   observe = vi.fn((target: Element, options?: ResizeObserverOptions) =>
     this.observed.push([target, options])
   );
 
+  /**
+   * @defaultValue
+   * ```
+   * vi.fn(
+  (target: Element) => (this.observed = this.observed.filter(x => x[0] !== target))
+  )
+   * ```
+   */
   unobserve = vi.fn(
     (target: Element) => (this.observed = this.observed.filter(x => x[0] !== target))
   );

…rver/mock-resize-observer.vitest.spec.ts …observer/testing/resize-observer.mock.tsprojects/element-ng/resize-observer/mock-resize-observer.vitest.spec.ts renamed to projects/element-ng/resize-observer/testing/resize-observer.mock.ts projects/element-ng/resize-observer/mock-resize-observer.vitest.spec.ts renamed to projects/element-ng/resize-observer/testing/resize-observer.mock.ts

@@ -9,7 +9,7 @@ import {
   MockResizeObserver,
   mockResizeObserver,
   restoreResizeObserver
-} from '../resize-observer/mock-resize-observer.vitest.spec';
+} from '../resize-observer/testing/resize-observer.mock';
 import { runOnPushChangeDetection } from '../test-helpers';
 import { SiStatusBarComponent, StatusBarItem } from './index';
 

projects/element-ng/status-bar/si-status-bar.component.spec.ts

@@ -12,7 +12,7 @@ import {
   MockResizeObserver,
   mockResizeObserver,
   restoreResizeObserver
-} from '../resize-observer/mock-resize-observer.vitest.spec';
+} from '../resize-observer/testing/resize-observer.mock';
 import { SiTabLinkComponent } from './si-tab-link.component';
 import { SiTabPortalComponent } from './si-tab-portal.component';
 import { SiTabComponent } from './si-tab.component';