How to set text content of html input element in unit test

Question

I am running unit test for angular app, I want to set the text content of this input element via unit test.I am using jasmine

<input type="text" id="accountid" class="form-control col-sm-3" [(ngModel)]="record.accountid" name="accountid" required>

I tried this but it is not working

let formData = fixture.debugElement.query(By.css('#accountid'));
formData.nativeElement.value = 22;
fixture.detectChanges();
console.log(formData.nativeElement.textContent);//expected to print 22
expect(formData.nativeElement.textContent).toBe(22);//fails

Chrillewoodz · Accepted Answer · 2019-09-26 09:11:00Z

6

You must dispatch an input event after setting the value of it:

let formData = fixture.debugElement.query(By.css('#accountid'));
    formData.nativeElement.value = 22;
    formData.nativeElement.dispatchEvent(new Event('input'));

expect(formData.nativeElement.value).toBe(22);

edited Sep 26, 2019 at 9:11

answered Sep 26, 2019 at 9:01

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

karansys Over a year ago

Thanks Chrillewoodz, but this didn't set the text content of input element, tried fixture.detectchanges after every statement, didn't work

Chrillewoodz Over a year ago

@karansys I don't think you should be testing for textContent, but rather the value.

karansys Over a year ago

Thanks :) that works , can you edit your answer, so I will mark it as correct

Collectives™ on Stack Overflow

How to set text content of html input element in unit test

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related