Testing angular reactive form input value without setting formcontrol

Question

I have a form like this:

<form id="save_form" (ngSubmit)="save()">
    <input id="input_user" type="text" [formControl]="myForm" />
    <button type="submit">save</button>
</form>

I have a test like this:

const inputUser: HTMLInputElement = fixture.nativeElement.querySelector("#input_user");
const saveForm: DebugElement = fixture.debugElement.query(By.css("#save_form"));

inputUser.value = "Bob";
//component.myForm.setValue("Bob");

saveForm.triggerEventHandler("ngSubmit", null);

fixture.detectChanges();

In my component, the input value is not updating myForm. If I use the commented out syntax, the form is updated, but the input tag is not populated.

I am trying to simulate an input value from a user, is the formcontrol supposed to be updated through the input value in a test? I feel like if I just updated the formcontrol manually I am not simulating a user.

UPDATE:

    //component.searchUsers.setValue("Bob");
    const e: Event = document.createEvent("Event");
    e.initEvent("input", false, false);
    inputUser.value = "Bob";
    inputUser.dispatchEvent(e);
    fixture.detectChanges();

    myForm.triggerEventHandler("ngSubmit", null);
    fixture.detectChanges();
    fixture.whenStable().then(() => 
    expect(condition).toBe(true));

The Head Rush · Accepted Answer · 2018-05-08 17:25:04Z

5

You need to trigger change detection by dispatching a change event from the input, then detect changes. I do it as follows.

const e:Event = document.createEvent('Event');
e.initEvent('input', false, false);
inputUser.value = 'Bob';
inputUser.dispatchEvent(e);
fixture.detectChanges();
fixture.whenStable().then(() => expect(something).toEqual('something'));

edited May 8, 2018 at 17:25

answered May 8, 2018 at 16:12

The Head Rush

3,3763 gold badges30 silver badges47 bronze badges

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

8 Comments

Daniel Plainview Over a year ago

so after I set input.value to "Bob", and before I triggered ngSubmit, I added those lines, but no luck. It makes sense, but that didn't seem to work. Was that what you meant?

The Head Rush Over a year ago

Sorry, for being unclear. Set the value in the <input>, not the FormControl. See updated answer.

The Head Rush Over a year ago

Updated from a test that passes for me using @angular 5.0.2, karma ^1.7.1, & jasmine ~2.5.2.

Daniel Plainview Over a year ago

Sorry thats gross looking, then in my component after submit: this.myForm.value comes out as null right away, and untouched

The Head Rush Over a year ago

Put the expectation in a whenStable block. There's a couple rounds of change detection that have to happen.

|

Collectives™ on Stack Overflow

Testing angular reactive form input value without setting formcontrol

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related