test(element): migrate n to vitest

Author: spliffone

angular.json

@@ -170,7 +170,7 @@
             "buildTarget": "element-ng:test-target",
             "browsers": ["chromium"],
             "browserViewport": "1280x720",
-            "exclude": ["[n-q]*/**", "schematics/**"],
+            "exclude": ["[o-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-mr-z]*/**", "schematics/**", "**/*.vitest.spec.ts"],
+            "exclude": ["**/[a-nr-z]*/**", "schematics/**", "**/*.vitest.spec.ts"],
             "assets": [
               {
                 "glob": "**/*",

projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts

@@ -40,16 +40,14 @@ describe('SiNavbarVerticalItemComponent', () => {
   const mockNavbar = {
     collapsed: signal(false),
     textOnly: signal(false),
-    itemTriggered: jasmine.createSpy('itemTriggered')
+    itemTriggered: vi.fn()
   };
 
   beforeEach(async () => {
     mockNavbar.collapsed.set(false);
     mockNavbar.textOnly.set(false);
-    mockNavbar.itemTriggered.calls.reset();
 
     await TestBed.configureTestingModule({
-      imports: [TestHostComponent],
       providers: [{ provide: SI_NAVBAR_VERTICAL, useValue: mockNavbar }]
     }).compileComponents();
 
@@ -58,6 +56,8 @@ describe('SiNavbarVerticalItemComponent', () => {
     fixture.detectChanges();
   });
 
+  afterEach(() => vi.clearAllMocks());
+
   describe('formattedBadge() behavior through template', () => {
     it('should not display badge for undefined badge', () => {
       component.item.set({

projects/element-ng/navbar-vertical/si-navbar-vertical.spec.ts

@@ -179,9 +179,8 @@ describe('SiNavbarVertical', () => {
 
       await harness.toggleCollapse();
 
-      const spySearch = spyOn(component, 'searchEvent');
+      const spySearch = vi.spyOn(component, 'searchEvent');
       await harness.search('test');
-      await fixture.whenStable();
       expect(spySearch).toHaveBeenCalledWith('test');
     });
 

projects/element-ng/notification-item/si-notification-item.component.spec.ts

@@ -2,9 +2,10 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { Component } from '@angular/core';
+import { inputBinding, signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute, Router } from '@angular/router';
+import { provideRouter, Router } from '@angular/router';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 import {
   SiNotificationItemComponent,
@@ -14,49 +15,43 @@ import {
   type NotificationItemRouterLink
 } from './si-notification-item.component';
 
-@Component({
-  imports: [SiNotificationItemComponent],
-  template: `
-    <si-notification-item
-      [timeStamp]="timeStamp"
-      [heading]="heading"
-      [description]="description"
-      [unread]="unread"
-      [itemLink]="itemLink"
-      [quickActions]="quickActions"
-      [primaryAction]="primaryAction"
-    />
-  `,
-  providers: [
-    {
-      provide: ActivatedRoute,
-      useValue: {
-        snapshot: {
-          queryParams: {}
-        }
-      }
-    }
-  ]
-})
-class TestHostComponent {
-  timeStamp = 'Today 12:00';
-  heading = 'Heading';
-
-  description?: string;
-  unread?: boolean;
-  itemLink?: NotificationItemRouterLink | NotificationItemLink;
-  quickActions?: NotificationItemQuickAction[];
-  primaryAction?: NotificationItemPrimaryAction;
-}
-
 describe('SiNotificationItemComponent', () => {
-  let fixture: ComponentFixture<TestHostComponent>;
-  let component: TestHostComponent;
+  let fixture: ComponentFixture<SiNotificationItemComponent>;
   let element: HTMLElement;
+  let timeStamp: WritableSignal<TranslatableString>;
+  let heading: WritableSignal<TranslatableString>;
+  let description: WritableSignal<TranslatableString | undefined>;
+  let unread: WritableSignal<boolean>;
+  let itemLink: WritableSignal<NotificationItemRouterLink | NotificationItemLink | undefined>;
+  let quickActions: WritableSignal<NotificationItemQuickAction[] | undefined>;
+  let primaryAction: WritableSignal<NotificationItemPrimaryAction | undefined>;
+
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      providers: [provideRouter([])]
+    })
+  );
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TestHostComponent);
-    component = fixture.componentInstance;
+    timeStamp = signal<TranslatableString>('Today 12:00');
+    heading = signal<TranslatableString>('Heading');
+    description = signal<TranslatableString | undefined>(undefined);
+    unread = signal(false);
+    itemLink = signal<NotificationItemRouterLink | NotificationItemLink | undefined>(undefined);
+    quickActions = signal<NotificationItemQuickAction[] | undefined>(undefined);
+    primaryAction = signal<NotificationItemPrimaryAction | undefined>(undefined);
+
+    fixture = TestBed.createComponent(SiNotificationItemComponent, {
+      bindings: [
+        inputBinding('timeStamp', timeStamp),
+        inputBinding('heading', heading),
+        inputBinding('description', description),
+        inputBinding('unread', unread),
+        inputBinding('itemLink', itemLink),
+        inputBinding('quickActions', quickActions),
+        inputBinding('primaryAction', primaryAction)
+      ]
+    });
     element = fixture.nativeElement;
     fixture.detectChanges();
   });
@@ -69,42 +64,38 @@ describe('SiNotificationItemComponent', () => {
     expect(element.querySelector('span.si-h5')!.innerHTML).toContain('Heading');
   });
 
-  it('should display the description', () => {
-    component.description = 'Description';
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
+  it('should display the description', async () => {
+    description.set('Description');
+    await fixture.whenStable();
     expect(element.querySelectorAll('span.si-body')[1].innerHTML).toContain('Description');
   });
 
-  it('should display the unread state', () => {
-    component.unread = true;
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
+  it('should display the unread state', async () => {
+    unread.set(true);
+    await fixture.whenStable();
     expect(element.querySelector('span.si-h5')).not.toBeTruthy();
     expect(element.querySelector('span.si-h5-bold')).toBeTruthy();
     expect(element.querySelector('span.dot')).toBeTruthy();
   });
 
-  it('should link with the item link', () => {
-    component.itemLink = { type: 'link', href: '/test' };
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
+  it('should link with the item link', async () => {
+    itemLink.set({ type: 'link', href: '/test' });
+    await fixture.whenStable();
     expect(element.querySelector('a')?.getAttribute('href')).toBe('/test');
   });
 
-  it('should link with the router link', () => {
+  it('should link with the router link', async () => {
     const router = TestBed.inject(Router);
-    spyOn(router, 'navigateByUrl');
-    component.itemLink = { type: 'router-link', routerLink: '/test' };
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
+    vi.spyOn(router, 'navigateByUrl').mockResolvedValue(true);
+    itemLink.set({ type: 'router-link', routerLink: '/test' });
+    await fixture.whenStable();
 
     element.querySelector<HTMLElement>('a')?.click();
     expect(router.navigateByUrl).toHaveBeenCalled();
   });
 
-  it('should display the quick actions', () => {
-    component.quickActions = [
+  it('should display the quick actions', async () => {
+    quickActions.set([
       {
         type: 'action-icon-button',
         action: () => {},
@@ -113,34 +104,31 @@ describe('SiNotificationItemComponent', () => {
       },
       { type: 'link', href: '/test', ariaLabel: 'Link', icon: 'element-plant' },
       { type: 'router-link', routerLink: '/test', ariaLabel: 'Router Link', icon: 'element-plant' }
-    ];
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
+    ]);
+    await fixture.whenStable();
     expect(element.querySelectorAll('button').length).toBe(1);
     expect(element.querySelectorAll('a').length).toBe(2);
   });
 
-  it('should display the primary action menu', () => {
-    component.primaryAction = {
+  it('should display the primary action menu', async () => {
+    primaryAction.set({
       type: 'menu',
       menuItems: [
         { type: 'action', label: 'Action 1', action: () => {} },
         { type: 'action', label: 'Action 2', action: () => {} }
       ]
-    };
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
+    });
+    await fixture.whenStable();
     expect(element.querySelector('button si-icon')).toBeTruthy();
   });
 
-  it('should display the primary action action-button', () => {
-    component.primaryAction = {
+  it('should display the primary action action-button', async () => {
+    primaryAction.set({
       type: 'action-button',
       label: 'Action',
       action: () => {}
-    };
-    fixture.changeDetectorRef.markForCheck();
-    fixture.detectChanges();
+    });
+    await fixture.whenStable();
     expect(element.querySelector('button')?.textContent).toContain('Action');
   });
 });