Skip to content

Matheuscara/angular-20_1-testeUnitario-inputBinding

Repository files navigation

O que faz

Injeta um valor ou Signal<T> em um @Input() de um componente standalone e dispara automaticamente a detecção de mudanças.


Sintaxe

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ão signal()).

Exemplo prático

// 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');  
});
});

Dicas rápidas

  • Componentes standalone vão em imports, não em declarations.
  • Remova classes estáticas do template; use só @HostBinding.
  • Para múltiplos inputs, liste vários inputBinding(...) no array bindings.
bindings: [
  inputBinding('foo', 'valor'),
  inputBinding('bar', 123)
]

About

Explica o uso do novo parametro `inputBinding` para criar componentes dinamicos no angular 20.1

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published