I'm trying to test event which value entering by keyboard. my problem is after set value to the input field, when I print it prints, but when I print it inside the whenStable() it prints empty. I want to know why this value gets reset inside of the Whitstable() function. and how can I fix it?
I have referred: Updating input html field from within an Angular 2 test to write this test case.
it('Test input field value. ', async () => {
const divDescription = fixture.debugElement.query(By.css('#costDescription'));
divDescription.nativeElement.value = 'text';
divDescription.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
console.log('sendInput : ', divDescription.nativeElement.value); // prints 'text'
fixture.whenStable().then(() => {
console.log('sendInput : ', divDescription.nativeElement.value); // prints ''
expect(divDescription.nativeElement.value).toContain('text');
});
});
I'm trying to test event which value entering by keyboard. my problem is after set value to the input field, when I print it prints, but when I print it inside the whenStable() it prints empty. I want to know why this value gets reset inside of the Whitstable() function. and how can I fix it?
I have referred: Updating input html field from within an Angular 2 test to write this test case.
it('Test input field value. ', async () => {
const divDescription = fixture.debugElement.query(By.css('#costDescription'));
divDescription.nativeElement.value = 'text';
divDescription.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
console.log('sendInput : ', divDescription.nativeElement.value); // prints 'text'
fixture.whenStable().then(() => {
console.log('sendInput : ', divDescription.nativeElement.value); // prints ''
expect(divDescription.nativeElement.value).toContain('text');
});
});
Share
Improve this question
edited Sep 14, 2018 at 5:57
bugfreerammohan
1,4871 gold badge9 silver badges22 bronze badges
asked Sep 14, 2018 at 5:25
Sachithra WishwamalSachithra Wishwamal
1271 gold badge2 silver badges10 bronze badges
0
2 Answers
Reset to default 4Removing WhenStable() make this happens.
it('Test input field value. ', async () => {
const divDescription = fixture.debugElement.query(By.css('#costDescription'));
divDescription.nativeElement.value = 'text';
divDescription.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(divDescription.nativeElement.value).toContain('text');
});
you have to move Change detection call inside wheStable
it('Test input field value. ', async () => {
const divDescription = fixture.debugElement.query(By.css('#costDescription'));
divDescription.nativeElement.value = 'text';
divDescription.nativeElement.dispatchEvent(new Event('input'));
console.log('sendInput : ', divDescription.nativeElement.value); // prints 'text'
fixture.whenStable().then(() => {
fixture.detectChanges(); // moved inside
console.log('sendInput : ', divDescription.nativeElement.value);
expect(divDescription.nativeElement.value).toContain('text');
});
});