Currently, I am testing a scenario where I need to verify if a value changes on the form when input is typed in.
This particular project utilizes Nrwl nx as well as jest for testing purposes.
The component code snippet is as follows:
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'));
}
}
The testing file content is as below:
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');
}));
});
I've encountered an issue - the input event fails to trigger the valueChanges. Even after attempting to dispatch a blur event, the handleBlur function gets executed. However, triggering the valueChanges is proving to be challenging, despite trying methods such as keydown, keypress.
On directly dispatching an input event onto the input itself, the _handleChange function does get called. It's puzzling why this didn't work as expected during testing.
Even utilizing the alternative approach of
fixture.nativeElement.querySelector('input')I'm truly unsure about what I might be missing here. Any insights or suggestions would be greatly appreciated.