Injeta um valor ou Signal<T> em um @Input() de um componente standalone e dispara automaticamente a detecção de mudanças.
fixture = TestBed.createComponent(MyComponent, {
bindings: [
inputBinding('[inputName]', valorOuSignal)
]
});
fixture.detectChanges();<inputName>: nome exato do@Input()no seu componente.valorOuSignal:- literal (
string,number,boolean, objeto…) Signal<T>(passe o próprio sinal, nãosignal()).
- literal (
// user.component.ts
@Component({
selector: 'app-user',
standalone: true,
template: `<button>{{ active() ? 'ON' : 'OFF' }}</button>`
})
export class UserComponent {
readonly active = input<boolean>();
@HostBinding('class.active')
get isActive(): boolean {
return typeof this.active === 'function'
? (this.active as Signal<boolean>)()
: this.active;
}
}// user.component.spec.ts
describe('UserComponent (inputBinding)', () => {
let fixture: ComponentFixture<UserComponent>;
beforeEach(async () => {
await TestBed
.configureTestingModule({ imports: [UserComponent] })
.compileComponents();
});
it('deve iniciar ON quando active=true (Signal)', () => {
const isActive = signal(true);
fixture = TestBed.createComponent(UserComponent, {
bindings: [ inputBinding('active', isActive) ]
});
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button')!;
expect(btn.textContent).toBe('ON');
expect(fixture.nativeElement.classList).toContain('active');
});
it('deve reagir a mudança via Signal', () => {
const isActiveSignal = signal(false);
fixture = TestBed.createComponent(UserComponent, {
bindings: [ inputBinding('active', isActiveSignal) ]
});
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('button')!;
expect(button.textContent).toBe('OFF');
expect(fixture.nativeElement.classList).not.toContain('active');
isActiveSignal.set(true);
fixture.detectChanges();
expect(button.textContent).toBe('ON');
expect(fixture.nativeElement.classList).toContain('active');
});
});- Componentes standalone vão em
imports, não emdeclarations. - Remova classes estáticas do template; use só
@HostBinding. - Para múltiplos inputs, liste vários
inputBinding(...)no arraybindings.
bindings: [
inputBinding('foo', 'valor'),
inputBinding('bar', 123)
]