test: enhance example to verify pre-set form values on a Material sel…

[mleimer]

This PR enhances the example test for Angular Material Forms.
It shows how to read and verify any pre-set form and display values on a select box.

Based on #275

[timdeschryver]

Thanks for enhancing this example.
I would like to change a few things, the most important one to not overwrite the form.
Because this also overwrites the validators, which can be problematic if requirements change.

It's also sufficient to invoke a change detection cycle (we don't need to click on the trigger).

Thoughts?

  const { fixture, detectChanges } = await render(MaterialFormsComponent, {
    imports: [MaterialModule],
  });

  fixture.componentInstance.form.setValue({
    name: 'Max',
    score: 4,
    color: 'B'
  })
  detectChanges();
  
  const nameControl = screen.getByLabelText(/name/i);
  const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
  const colorControl = screen.getByRole('combobox', { name: /color/i });

  expect(nameControl).toHaveValue('Max');
  expect(scoreControl).toHaveValue(4);
  expect(colorControl).toHaveTextContent('Blue');

[mleimer]

@timdeschryver yes, that is indeed a very good point. I adapted it.

[timdeschryver]

While this works, I'm thinking if we can do something about this to provide a better experience.
Not sure if this is better though 😅
If you have an idea, feel free to drop it here.

const { fixture } = render(Component);
// this would be new and invokes a CD cycle 
invoke(() => {
  fixture.componentInstance.form.setValue();
})

[mleimer]

@timdeschryver If we had to update the form values from within the test, this might be an option.

However, in a scenario where one uses custom written Angular components for different form fields, there is most likely a formControl being passed into it through its input properties. If we now follow the example from https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app/src/app/examples/02-input-output.spec.ts#L10 how to pass input properties, one would not think of having to call detectChanges() to validate any pre-set value within the formControl.

Maybe we should consider adding a test scenario where one passes a formControl into the test component?

[timdeschryver]

Those examples are based on "real-world" scenarios.
I didn't had the need (yet) to pass form controls to child components - and editing the code just for the tests doesn't feel right. The same problem also applies when validators are added to the control.

For now, I think this example shows a user how to do it the best way.
We can revisit and modify this later if we can think of a better solution.

[github-actions]

🎉 This PR is included in version 11.0.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀