Estoy tratando de probar que un valor ha cambiado en el formulario cuando escribo en la entrada. El proyecto está usando Nrwl nx y la herramienta de prueba es una broma.

Componente :

export class InputNumericComponent implements OnInit, OnDestroy {

  @Input() form: FormGroup;

  @Input() controlName: string; 

  private _changeSubscription: Subscription;

 private get _control(): AbstractControl | null {
    return this.form?.get(this.controlName);
  }

  public ngOnInit(): void {
    if (!this._control) {
       return;
    }
    console.log('init called'); // ok
    this._changeSubscription = this._control.valueChanges
      .pipe(tap((newValue) => this._handleChange(newValue)))
      .subscribe();
  }

  public ngOnDestroy(): void {
    if (this._changeSubscription) {
      this._changeSubscription.unsubscribe();
    }
  }

  private _handleChange(value: string): void {
    console.log('_handleChange'); // never called
  }

  public handleBlur(): void {
    console.log('handleBlur'); // can be called by using dispatchEvent(new Event('blur'));
  }
}

Archivo de prueba:

describe('InputNumericComponent', () => {
  let component: InputNumericComponent;
  let fixture: ComponentFixture<InputNumericComponent>;

  configureTestSuite(() => {
    TestBed.configureTestingModule({
      declarations: [InputNumericComponent],
      schemas: [NO_ERRORS_SCHEMA],
    });
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(InputNumericComponent);
    component = fixture.componentInstance;
    component.controlName = 'numeric';
    component.form = new FormGroup({
      numeric: new FormControl(),
    });
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should update form', fakeAsync(() => {
    component.ngOnInit();
    const input = fixture.debugElement.query(By.css('input'));
    input.nativeElement.value = '222';
    // i tried both and others like keydown, keypress, etc..
    input.nativeElement.dispatchEvent(new Event('change'));
    input.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    tick();
    console.log('form', component.form.get('numeric')?.value); // null
    expect(input.form.get('numeric')).toEqual('222');
  }));
});

No sé por qué, pero el evento de entrada no activa el valueChanges, si despacho un evento blur, se llama a la función handleBlur pero no sé cómo activar el valueChanges, he probado keydown, keypress.

Intenté enviar un evento de entrada directamente en la entrada y funciona, se llama a _handleChange pero no sé por qué en la prueba no funciona.

Probé el otro método usando fixture.nativeElement.querySelector('input') pero tampoco funciona.

Qué estoy haciendo mal ?

0
Julien METRAL 22 ene. 2021 a las 14:29

1 respuesta

La mejor respuesta

Agregue ReactiveFormsModule a sus importaciones de TestBed.

1
BunyamiN 22 ene. 2021 a las 14:02