最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angular 4 (karma) Test input value to input filed - Stack Overflow

programmeradmin2浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 4

Removing 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');
 });
});
发布评论

评论列表(0)

  1. 暂无评论