I need to write an integration test specifically for keyboard-based navigation through a cluster of closely-related components. These integration tests must verify that the components together, combined with established browser behavior, result in the expected keyboard flow through the component involved.
I will be running these tests in various browsers at the component level in a tight loop with editing, before checking anything in, so I’d prefer to do this solely using the test framework provided with Ember CLI if possible.
The component’s event handling involves a few tweaks over mostly semantic HTML, so any test of keyboard navigation through a component has to also perform steps that should be pure default browser behavior to verify that my component’s event handlers aren’t getting invoked and overriding it and that the default behavior has the desired effect in the scenario.
Last night, after fighting with triggerKeyEvent() from@ember/test-helpers for half a day, I discovered (as in issue How simulate "enter" keypress in integration test?) that using this method targeting the currently focused element only works to trigger application event handlers. It doesn’t appear to trigger normal browser behavior for the keypress. Hence, it appears this call can’t be used as UI automation for pressing keys in the browser window.
What should I use from an ember integration test to feed navigational key presses (tab, space, arrow, enter, escape, sometimes with shift) to the #ember-testing region of the browser, so I can measure the cumulative effects that the user will see?