bug(Autocomplete): unit test using MatAutocompleteHarness fails when karma browser is in the foreground

[DmitryEfimenko]

Reproduction

• Clone repo: https://github.com/DmitryEfimenko/mat-autocomplete-harness-issue
• install deps

Steps to reproduce:

1. In the console: npm run test
2. Make sure NOT to bring the opened Chrome window showing Jasmine tests into the visibility
   If it opens in front, quickly click on some other window to bring the Chrome window to the background
3. Observe: test succeeds
4. make a small change in test (change spec name) to trigger test re-run
5. Observe: test still succeeds
6. Bring the Chrome window showing Jasmine tests into the visibility
7. Observe: test fail

Recording:
https://user-images.githubusercontent.com/2098175/113951456-76f5b680-97c8-11eb-9893-5cca66ac1a8c.mp4

Expected Behavior

Unit test should pass.
Specifically, autocompleteHarness.getOptions() should return 3 options instead of 0

Actual Behavior

Unit test only passes while the Jasmine Chrome window is in the background

Environment

• Angular: 11.2.8
• CDK/Material: 11.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Tested on:
  • Windows
  • Mac

Notes

I have created a StackBlitz repository with basically the same code, but can't reproduce the issue there:
https://stackblitz.com/edit/harness-issue-2m77t5?file=src/app/autocomplete-harness-example.spec.ts

[nienow]

Also seeing this in my project, with the same call: autocompleteHarness.getOptions(). I am on Angular 13.2.

[bentedder]

Glad I found this issue, as I have a similar one. I'm on Angular 12.2.15 and Angular Material 12.2.13:

The test:

const input = await loader.getHarness(MatAutocompleteHarness.with({ selector: '.example'}))
await input.focus();
const options = await input.getOptions();
expect(options.length).toEqual(1)

Karma headless: test passes fine
Karma with chrome runner: tests fail (Expected 0 to equal 1)

In order to get it to pass with the chrome runner, I have to change await input.focus() to await input.enterText(' ') which is not ideal or accurate to what is happening in the test.

[stepan-prokipchyn-vitech]

In some cases await input.enterText(' ') may not work (e.g. if you filter out all our options due to the entered whitespace). In such case this works for me await (await input.host()).dispatchEvent('focusin');

Still this is very annoying, please fix