siemens · spike-rabbit · Mar 31, 2026
@@ -57,6 +57,7 @@ describe('SiAutocompleteDirective', () => {
 
   afterEach(() => {
     vi.useRealTimers();
+    vi.restoreAllMocks();
   });
 
   it('should be navigable', async () => {

@@ -40,6 +40,10 @@ describe('SiCircleStatusComponent', () => {
     element = fixture.nativeElement;
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('should not set icon class, if no icon is configured', async () => {
     icon.set(undefined);
     await fixture.whenStable();

@@ -5,6 +5,7 @@
 import { inputBinding, signal, twoWayBinding, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ModalRef } from '@siemens/element-ng/modal';
+import { afterEach } from 'vitest';
 
 import { SiColumnSelectionDialogComponent } from './si-column-selection-dialog.component';
 import { Column } from './si-column-selection-dialog.types';
@@ -86,6 +87,8 @@ describe('ColumnDialogComponent', () => {
     element = fixture.nativeElement;
   });
 
+  afterEach(() => vi.useRealTimers());
+
   it('should create', async () => {
     columns.set(cloneData());
     await fixture.whenStable();
@@ -257,20 +260,21 @@ describe('ColumnDialogComponent', () => {
 
   it('should toggle edit mode with keyboard', async () => {
     const spy = vi.spyOn(modalRef.hidden, 'next');
+    vi.useFakeTimers();
     columns.set(cloneData());
-    fixture.autoDetectChanges();
+    await fixture.whenStable();
     document
       .querySelector<HTMLSpanElement>('si-column-selection-editor')!
       .dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    vi.advanceTimersToNextFrame();
     await fixture.whenStable();
     expect(spy).not.toHaveBeenCalled();
     const inputField = document.querySelector<HTMLInputElement>(
       'si-column-selection-editor input.form-control'
     )!;
     expect(inputField).toBeInTheDocument();
-    // Wait for setTimeout in startEdit() to complete
-    await new Promise(resolve => setTimeout(resolve, 100));
     inputField.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    vi.advanceTimersToNextFrame();
     await fixture.whenStable();
     expect(
       document.querySelector<HTMLInputElement>('si-column-selection-editor input.form-control')

@@ -95,7 +95,7 @@
    ]);
  });

  it('should activate links when the menu icon is clicked', async () => {
    component.viewType = 'collapsible';
    component.primaryActions = [
      {
@@ -116,9 +116,21 @@
     // cannot use jasmine.clock here
     await new Promise(resolve => setTimeout(resolve, 50));
     expect(await harness.isPrimaryExpanded()).toBe(false);
-    await harness.togglePrimary();
-    await fixture.whenStable();
-    expect(await harness.isPrimaryExpanded()).toBe(true);
+
+    // Click the primary toggle button directly instead of going through harness.togglePrimary()
+    // to avoid CDK harness stability checks that can hang due to ResizeObserver + auditTime(0) feedback loop.
+    const toggleButton = fixture.nativeElement.querySelector(
+      'button[si-content-action-bar-toggle]:not(.cdk-menu-trigger)'
+    ) as HTMLElement;
+    toggleButton.click();
+    fixture.detectChanges();
+    // Wait for the setTimeout in expand() and ResizeObserver cycle to settle
+    await new Promise(resolve => setTimeout(resolve, 100));
+    fixture.detectChanges();
+    const listItem = fixture.nativeElement.querySelector(
+      '[siAutoCollapsableListItem]'
+    ) as HTMLElement;
+    expect(getComputedStyle(listItem).visibility).toBe('visible');
   });
 
   it('should disable menu item by disabled attribute', async () => {

@@ -276,12 +276,14 @@ describe('SiDatatableInteractionDirective', () => {
 
       await refresh();
 
-      expect(wrapperComponent.selected).toContain({
-        id: 1,
-        firstname: 'First 1',
-        lastname: 'Last 1',
-        age: 50
-      });
+      expect(wrapperComponent.selected).toContainEqual(
+        expect.objectContaining({
+          id: 1,
+          firstname: 'First 1',
+          lastname: 'Last 1',
+          age: 50
+        })
+      );
     }
   });
 
@@ -317,12 +319,14 @@ describe('SiDatatableInteractionDirective', () => {
 
       await refresh();
 
-      expect(wrapperComponent.selected).toContain({
-        id: 1,
-        firstname: 'First 1',
-        lastname: 'Last 1',
-        age: 50
-      });
+      expect(wrapperComponent.selected).toContainEqual(
+        expect.objectContaining({
+          id: 1,
+          firstname: 'First 1',
+          lastname: 'Last 1',
+          age: 50
+        })
+      );
     }
   });
 });
@@ -18,12 +18,17 @@ describe('SiDateRangeCalculationService', () => {
     expect(formatDate(d1, 'dateShort', 'en')).toEqual(formatDate(d2, 'dateShort', 'en'));
 
   beforeEach(() => {
+    vi.useFakeTimers();
     TestBed.configureTestingModule({
       providers: [SiDateRangeCalculationService]
     });
     service = TestBed.inject(SiDateRangeCalculationService);
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('resolves with before', () => {
     const filter: DateRangeFilter = {
       point1: new Date('2023-07-15'),

@@ -25,6 +25,10 @@ describe('SiDaySelectionComponent', () => {
   let fixture: ComponentFixture<TestComponent>;
   let helper: CalendarTestHelper;
 
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   const selectDate = (date: number): void => {
     helper.clickEnabledCell(date.toString());
     fixture.detectChanges();

@@ -52,6 +52,10 @@ describe('SiCalendarButtonComponent', () => {
     fixture.detectChanges();
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('should show datepicker overlay', async () => {
     calendarToggleButton().click();
     fixture.detectChanges();
@@ -72,11 +76,12 @@ describe('SiCalendarButtonComponent', () => {
     expect(spy).toHaveBeenCalled();
   });
 
-  it('should mark as touched if button is blurred', () => {
+  it('should mark as touched if button is blurred', async () => {
     const touchSpy = vi.spyOn(SiDatepickerDirective.prototype, 'touch');
     const button = calendarToggleButton();
     button.focus();
     button.blur();
+    await fixture.whenStable();
     expect(touchSpy).toHaveBeenCalled();
   });
 

@@ -64,6 +64,10 @@ describe('SiDatepickerComponent', () => {
     picker = await loader.getHarness(SiDatepickerComponentHarness);
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('should includeTimeLabel matches enabledTimeText', async () => {
     const enabledTimeText = 'Consider Time';
     await updateConfig({ ...component.config(), enabledTimeText, showTime: true });

@@ -108,6 +108,10 @@ describe('SiFileUploaderComponent', () => {
     element = fixture.nativeElement;
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   const createFileList = (files: string[], type?: string[]): DataTransfer => {
     const dt = new DataTransfer();
     files.forEach((f, i) => dt.items.add(new File(['blub'], f, { type: type?.[i] })));

@@ -597,14 +597,13 @@ describe('SiFilteredSearchComponent', () => {
       await criterionValue?.sendKeys(TestKey.BACKSPACE);
 
       vi.useRealTimers();
-      // needed to avoid flaky test
       await new Promise(resolve => setTimeout(resolve, 0));
-      vi.useFakeTimers();
 
       await filteredSearch.freeTextSearch().then(async freeTextSearch => {
         await freeTextSearch.focus();
       });
-      await tick();
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await fixture.whenStable();
 
       expect(await criterionValue?.isEditable()).toBeFalsy();
     });
@@ -2484,12 +2483,11 @@ describe('SiFilteredSearchComponent - With translation', () => {
     await tick();
     await value!.sendKeys('broken-format');
     vi.useRealTimers();
-    // needed to avoid flaky test
     await new Promise(resolve => setTimeout(resolve, 0));
-    vi.useFakeTimers();
     await value!.blur();
     await filteredSearch.clickSearchButton();
-    await tick();
+    await new Promise(resolve => setTimeout(resolve, 100));
+    await fixture.whenStable();
     expect(await value!.text()).toBe('Invalid Date');
     expect(spy).toHaveBeenCalledWith({
       criteria: [

@@ -167,6 +167,7 @@ describe('SiFormContainerComponent', () => {
 
     afterEach(() => {
       vi.useRealTimers();
+      vi.restoreAllMocks();
     });
 
     it('should create', async () => {

@@ -57,6 +57,10 @@ describe('formly number type', () => {
     fixture = TestBed.createComponent(FormlyTestComponent);
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('should display the number input based on props provided', async () => {
     vi.useFakeTimers();
     const componentInstance = fixture.componentInstance;

@@ -21,23 +21,33 @@ describe('SiChangePasswordComponent', () => {
   let fixture: ComponentFixture<TestComponent>;
   let element: HTMLElement;
 
-  const passwordPolicyContent = signal<string>('Policy content');
-  const passwordStrength = signal<PasswordPolicy>(passwordStrengthValue);
-  const newPasswordLabel = signal('');
-  const confirmPasswordLabel = signal('');
-  const changeButtonLabel = signal('');
-  const backButtonLabel = signal('');
-  const disableChange = signal(false);
-  const passwordPolicyTitle = signal('');
-  const changePasswordRequested = vi.fn<(value: ChangePassword) => void>();
-  const back = vi.fn();
+  let passwordPolicyContent = signal<string>('Policy content');
+  let passwordStrength = signal<PasswordPolicy>(passwordStrengthValue);
+  let newPasswordLabel = signal('');
+  let confirmPasswordLabel = signal('');
+  let changeButtonLabel = signal('');
+  let backButtonLabel = signal('');
+  let disableChange = signal(false);
+  let passwordPolicyTitle = signal('');
+  let changePasswordRequested = vi.fn<(value: ChangePassword) => void>();
+  let back = vi.fn();
 
   const enterValue = (input: HTMLInputElement, value: string): void => {
     input.value = value;
     input.dispatchEvent(new Event('input'));
   };
 
   beforeEach(async () => {
+    passwordPolicyContent = signal<string>('Policy content');
+    passwordStrength = signal<PasswordPolicy>(passwordStrengthValue);
+    newPasswordLabel = signal('');
+    confirmPasswordLabel = signal('');
+    changeButtonLabel = signal('');
+    backButtonLabel = signal('');
+    disableChange = signal(false);
+    passwordPolicyTitle = signal('');
+    changePasswordRequested = vi.fn<(value: ChangePassword) => void>();
+    back = vi.fn();
     fixture = TestBed.createComponent(TestComponent, {
       bindings: [
         inputBinding('passwordPolicyContent', passwordPolicyContent),

@@ -10,11 +10,12 @@ import { SiLoginSingleSignOnComponent as TestComponent } from './si-login-single
 describe('SiLoginSingleSignOnComponent', () => {
   let fixture: ComponentFixture<TestComponent>;
   let element: HTMLElement;
-
-  const disableSso = signal(false);
-  const ssoEvent = vi.fn();
+  let disableSso = signal(false);
+  let ssoEvent = vi.fn();
 
   beforeEach(async () => {
+    disableSso = signal(false);
+    ssoEvent = vi.fn();
     fixture = TestBed.createComponent(TestComponent, {
       bindings: [inputBinding('disableSso', disableSso), outputBinding('ssoEvent', ssoEvent)]
     });

@@ -85,10 +85,10 @@ describe('ListDetailsComponent', () => {
       const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
       const bounding = elem.getBoundingClientRect();
       return (
-        bounding.top >= 0 &&
-        bounding.left >= 0 &&
-        bounding.bottom <= viewportHeight &&
-        bounding.right <= viewportWidth
+        Math.round(bounding.top) >= 0 &&
+        Math.round(bounding.left) >= 0 &&
+        Math.round(bounding.bottom) <= viewportHeight &&
+        Math.round(bounding.right) <= viewportWidth
       );
     };
     const drag = (
@@ -419,6 +419,10 @@ describe('ListDetailsComponent', () => {
       });
     });
 
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
     it('should navigate back and forward in mobile mode by clicking', async () => {
       vi.spyOn(ResizeObserverService.prototype, 'observe').mockReturnValue(
         of({ width: 100, height: 100 })

@@ -69,6 +69,7 @@ describe('SiLoadingSpinnerDirective', () => {
   });
 
   it('should show and hide spinner', async () => {
+    await fixture.whenStable();
     await vi.advanceTimersByTimeAsync(initialDelay);
     await vi.advanceTimersByTimeAsync(initialDelay);
     expect(isLoading()).toBe(true);

@@ -93,6 +93,10 @@ describe('SiNumberInputComponent', () => {
       element = fixture.nativeElement;
     });
 
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
     it('should support short press increments', async () => {
       value.set(50);
       await fixture.whenStable();