Changing a form input doesn't make the form touched or dirty

[jdhines]

I can't for the life of me figure out how to get this test to pass, even though it works from the running application.

I have a form which starts in pristine condition, and a save button which is disabled via:
<button type="submit" [disabled]="myForm.invalid || myForm.pristine" (click)="openSaveConfirmation()" title="Save changes">Save</button>

My test calls a setup function which just calls render and returns that whole object, and then does what it needs to to get mock data in the form. That's all working fine.

However, in my test, no matter how I've tried changing the input, it doesn't make the form not pristine, (i.e. doesn't set touched or dirty to true, and hence only in the test, the button is disabled.

I don't think I should have to call fixture.detectChanges() because I'm using fireEvent and the functions returned from render but please correct me if I'm misunderstanding.

The test (other things I've tried combinations of are commented out). The final 2 assertions fail.

test('Save button should be enabled after making a change', async () => {
  const {
    container,
    fixture,
    getByText,
    getByLabelText,
    getByDisplayValue,
  } = await setupWithDataLoaded();
  fixture.detectChanges(); //have to do this or else the test doesn't detect that data has loaded even though the setup function only uses destructured functions from render()
 
  // fixture.componentInstance.myForm.markAsTouched();

  const lastNameInput = <HTMLInputElement>getByLabelText(/last name/i);

  expect(lastNameInput).toHaveValue('Smith'); // ✓ passes
  // lastNameInput.focus();
  fireEvent.change(lastNameInput, { target: { value: 'Wilson' } });
  expect(<HTMLInputElement>getByLabelText(/last name/i)).toHaveValue('Wilson'); // ✓ passes

  // fireEvent.keyDown(document.activeElement || document.body);
  // fixture.detectChanges();
  expect(fixture.componentInstance.myEduForm.valid).toBeTruthy(); // ✓ passes
  expect(fixture.componentInstance.myEduForm.touched).toBeTruthy(); // 𝙭 fails
  expect(getByText('Save')).toBeEnabled(); // 𝙭 fails (because it can't tell the form is touched I guess) 
});

[timdeschryver]

Did you import fireEvent from @testing-library/angular?

Because this would just fire the event without calling detectChanges (because it doesn't know on which component it has to detect changes).

In this library to be able to call detectChanges, we re-export the fireEvent events with the render function. These functions will call detectChanges on the text compontent.

const { input, getByLabelText } = render(AppComponent)
const lastNameInput = <HTMLInputElement>getByLabelText(/last name/i);
input(lastNameInput, { target: { value: 'Wilson' } });

[jdhines]

I only saw examples on the site of using fireEvent (with an example specifically for input changes), so I didn't know to use input (or that it even existed).

I saw this:

in this library we also expose all of the events via the render function. This is done to trigger Angular's change detection after each interaction.

But the documentation didn't mention what those events are, so I just assumed that fireEvent, being built in to testing-library/angular would automatically trigger change detection. In general, I think the page for the angular library could certainly be built out a bit; it's been tough as a first timer having to jump between that, the main React-based pages, plus the guide, plus the code to get a complete picture.

The only other thing I can't understand is why, even when I did fireEvent and then fixture.detectChanges that it still didn't detect changes.

[timdeschryver]

Yes, unfortunately I didn't find the time to provide more info and examples in the docs.
Feel free to open a PR where you see fit, if you want. Help is more than welcome.

The only other thing I can't understand is why, even when I did fireEvent and then fixture.detectChanges that it still didn't detect changes.

That's strange, it should work. I can't provide a good answer to explain what's happening here... I'll see if I can find an explanation later.

[timdeschryver]

I've added more docs over at https://testing-library.com/docs/angular-testing-library/intro and examples in this repo at https://github.com/testing-library/angular-testing-library/tree/master/src/app/examples.

If there's anything missing feel free to create a new issue.