Angular Material - Verify Form and Display / Text Value of a Select Box

[mleimer]

Testing an Angular Material Select-Box https://material.angular.io/components/select/examples#select-custom-trigger appears to be rather cumbersome at this stage.

Based on 04-forms-with-material

..verifying if a Angular Material Select-Box has a pre-set form value requires one to do:
expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('B');

..verifying its pre-set display/text-value requires on to do something like:
detectChanges();
expect(colorControl).toHaveTextContent('Blue');`

It would be great if we could achieve easier solutions where:

• the value can be verified through toHaveFormValues or toHaveValue on its control
• any display value / text can be verified without having to click on a native element and forcing detectChanges()

Am I maybe missing something?

[mleimer]

I created this PR here to enhance the example to show how one can currently verify any pre-set values: #276

It would be awesome, if there is an easier solution!