diff --git a/projects/element-ng/wizard/si-wizard.component.spec.ts b/projects/element-ng/wizard/si-wizard.component.spec.ts
index 22ad440b7..a2a9480bb 100644
--- a/projects/element-ng/wizard/si-wizard.component.spec.ts
+++ b/projects/element-ng/wizard/si-wizard.component.spec.ts
@@ -2,12 +2,11 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
-import { Component, input, viewChild } from '@angular/core';
+import { Component, signal, viewChild } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';
-import { runOnPushChangeDetection } from '../test-helpers/change-detection.helper';
import { SiWizardStepComponent, SiWizardComponent as TestComponent } from './index';
@Component({
@@ -15,15 +14,15 @@ import { SiWizardStepComponent, SiWizardComponent as TestComponent } from './ind
template: `
- @for (step of steps; track step) {
+ @for (step of steps(); track step) {
}
@@ -36,14 +35,14 @@ import { SiWizardStepComponent, SiWizardComponent as TestComponent } from './ind
`
})
class TestHostComponent {
- steps!: string[];
- hasCancel = false;
- hasNavigation = true;
- inlineNavigation = true;
- readonly showVerticalDivider = input(false);
- readonly verticalLayout = input(false);
- readonly verticalMinSize = input();
- readonly verticalMaxSize = input();
+ readonly steps = signal([]);
+ readonly hasCancel = signal(false);
+ readonly hideNavigation = signal(false);
+ readonly inlineNavigation = signal(true);
+ readonly showVerticalDivider = signal(false);
+ readonly verticalLayout = signal(false);
+ readonly verticalMinSize = signal(undefined);
+ readonly verticalMaxSize = signal(undefined);
readonly wizard = viewChild.required(TestComponent);
constructor() {
@@ -51,7 +50,7 @@ class TestHostComponent {
}
generateSteps(amount: number): void {
- this.steps = new Array(amount).fill(1).map((value, index) => `Step ${index + 1}`);
+ this.steps.set(new Array(amount).fill(1).map((value, index) => `Step ${index + 1}`));
}
}
@@ -76,11 +75,11 @@ describe('SiWizardComponent', () => {
});
it('stepCount should match number of steps', () => {
- expect(component.stepCount).toBe(hostComponent.steps.length);
+ expect(component.stepCount).toBe(hostComponent.steps().length);
});
it('should center activated step', () => {
- fixture.componentInstance.generateSteps(10);
+ hostComponent.generateSteps(10);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
// Activate last step
@@ -104,9 +103,7 @@ describe('SiWizardComponent', () => {
const steps = element.querySelectorAll('.step');
expect(steps.length).toBe(3);
for (let i = 0; i < steps.length; i++) {
- expect(steps[i].querySelector('.title')!.textContent).toEqual(
- fixture.componentInstance.steps[i]
- );
+ expect(steps[i].querySelector('.title')!.textContent).toEqual(hostComponent.steps()[i]);
}
});
@@ -181,7 +178,7 @@ describe('SiWizardComponent', () => {
});
it('should reset index if current item is removed', () => {
- fixture.componentInstance.steps = ['Other Step'];
+ hostComponent.steps.set(['Other Step']);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(element.querySelector('.back.invisible')).toBeTruthy();
@@ -189,7 +186,7 @@ describe('SiWizardComponent', () => {
});
it('should update the index if an item was moved', () => {
- fixture.componentInstance.steps = ['other step', 'and another', 'Step 2'];
+ hostComponent.steps.set(['other step', 'and another', 'Step 2']);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(element.querySelector('a.active .title')?.textContent).toBe('Step 2');
@@ -237,7 +234,7 @@ describe('SiWizardComponent', () => {
});
it('should contain cancel button', () => {
- fixture.componentInstance.hasCancel = true;
+ hostComponent.hasCancel.set(true);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(element.querySelectorAll('[aria-label="Cancel"]')).toHaveSize(1);
@@ -245,7 +242,7 @@ describe('SiWizardComponent', () => {
});
it('should calculate visible items', () => {
- fixture.componentInstance.generateSteps(10);
+ hostComponent.generateSteps(10);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
expect(element.querySelectorAll('.container-steps .step').length).toBe(7);
@@ -253,9 +250,9 @@ describe('SiWizardComponent', () => {
});
describe('without navigation button', () => {
- beforeEach(async () => {
- hostComponent.hasNavigation = false;
- await runOnPushChangeDetection(fixture);
+ beforeEach(() => {
+ hostComponent.hideNavigation.set(true);
+ fixture.detectChanges();
});
it('should not show navigation buttons', () => {
@@ -285,13 +282,13 @@ describe('SiWizardComponent', () => {
expect(element.querySelector('.wizard-btn-container .next')).toBeFalsy();
});
- it('should align save button to end on last step when navigation is hidden', async () => {
- hostComponent.inlineNavigation = false;
- await runOnPushChangeDetection(fixture);
+ it('should align save button to end on last step when navigation is hidden', () => {
+ hostComponent.inlineNavigation.set(false);
+ fixture.detectChanges();
// Navigate to the last step
- component.next(hostComponent.steps.length - 1);
- await runOnPushChangeDetection(fixture);
+ component.next(hostComponent.steps().length - 1);
+ fixture.detectChanges();
const saveButton = element.querySelector('.btn.save');
expect(saveButton).toBeTruthy();
@@ -300,29 +297,29 @@ describe('SiWizardComponent', () => {
});
describe('navigation buttons in footer', () => {
- it('should not show navigation buttons inline if inlineNavigation is false', async () => {
- hostComponent.inlineNavigation = false;
- await runOnPushChangeDetection(fixture);
+ it('should not show navigation buttons inline if inlineNavigation is false', () => {
+ hostComponent.inlineNavigation.set(false);
+ fixture.detectChanges();
expect(element.querySelector('.container-wizard .wizard-btn-container .next')).toBeFalsy();
});
- it('should show navigation buttons inline if inlineNavigation is true', async () => {
- hostComponent.inlineNavigation = true;
- await runOnPushChangeDetection(fixture);
+ it('should show navigation buttons inline if inlineNavigation is true', () => {
+ hostComponent.inlineNavigation.set(true);
+ fixture.detectChanges();
expect(element.querySelector('.container-wizard .wizard-btn-container .next')).toBeTruthy();
});
});
describe('steps with lazy loading', () => {
it('should render steps if they are loaded lazily', async () => {
- fixture.componentInstance.steps = [];
+ hostComponent.steps.set([]);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
const steps = element.querySelectorAll('.step');
expect(steps.length).toBe(0);
jasmine.clock().install();
setTimeout(() => {
- fixture.componentInstance.generateSteps(3);
+ hostComponent.generateSteps(3);
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();
}, 100);
@@ -337,11 +334,11 @@ describe('SiWizardComponent', () => {
describe('use vertical layout', () => {
beforeEach(() => {
- fixture.componentRef.setInput('verticalLayout', true);
+ hostComponent.verticalLayout.set(true);
});
it('should use verticalMinSize for step container min-inline-size', () => {
- fixture.componentRef.setInput('verticalMinSize', '100px');
+ hostComponent.verticalMinSize.set('100px');
fixture.detectChanges();
const container = fixture.debugElement.query(By.css('.container-steps.vertical'));
const styles = getComputedStyle(container.nativeElement);
@@ -349,7 +346,7 @@ describe('SiWizardComponent', () => {
});
it('should use verticalMaxSize for step container max-inline-size', () => {
- fixture.componentRef.setInput('verticalMaxSize', '100px');
+ hostComponent.verticalMaxSize.set('100px');
fixture.detectChanges();
const container = fixture.debugElement.query(By.css('.container-steps.vertical'));
const styles = getComputedStyle(container.nativeElement);
@@ -357,7 +354,7 @@ describe('SiWizardComponent', () => {
});
it('should have divider to visually separate content and steps when showVerticalDivider is set to true', () => {
- fixture.componentRef.setInput('showVerticalDivider', true);
+ hostComponent.showVerticalDivider.set(true);
fixture.detectChanges();
const container = fixture.debugElement.query(By.css('.vertical-divider'));
expect(container).toBeTruthy();
@@ -366,7 +363,7 @@ describe('SiWizardComponent', () => {
});
it('should not have divider when showVerticalDivider is set to false', () => {
- fixture.componentRef.setInput('showVerticalDivider', false);
+ hostComponent.showVerticalDivider.set(false);
fixture.detectChanges();
const container = fixture.debugElement.query(By.css('.vertical-divider'));
expect(container).toBeFalsy();