-
Notifications
You must be signed in to change notification settings - Fork 842
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TESTING] Add Cypress Real Events for a11y UI testing #5510
[TESTING] Add Cypress Real Events for a11y UI testing #5510
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added a couple of comments to the draft PR for context.
Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/ |
* Moved the first portion of the setup into a custom helper * Added a second promise return to the custom helper for `cy.get()` * DRY refactor of the real events setup completed.
Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/ |
…el test. * Refactored context menu panel test, updated docs. * Added TypeScript definition to the realMount custom command. * Updated docs to explain both mounting commands.
@@ -47,49 +45,42 @@ describe('EuiContextMenuPanel', () => { | |||
</EuiContextMenuItem>, | |||
]; | |||
|
|||
// Intermittent flake workaround: without this, the first downarrow key does not always focus into the menu items as expected |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks fantastic to me! Just have 1 change request for the types file and 1 optional comment on repeatRealPress
and I think this is good to go!
Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Super sorry, I'm actually the worst - I know I said the type change request was the last thing, but I did one last review pass and noticed a cy.end()
usage that should likely be removed. I swear this is the actual last comment haha 🙈
Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Woohoo!! Thanks for your responsiveness and fixing that dang flakey Cypress test! This is awesome!
Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is so good!
Preview documentation changes for this PR: https://eui.elastic.co/pr_5510/ |
Summary
I added the Cypress Real Events library to our Cypress test config and wrote a proof of concept, showing how we can use real browser events like keypresses, clicks, and hovers in our tests. Specifically, these tests will give us more coverage for keyboard and aspects of screen reader accessibility testing.
Only works in Chrome or Edge, but this is not a significant issue IMO. The type of events we are looking to test with this library are well-tread paths in evergreen browsers.
Why?
From the Cypress Real Events repo:
Further improvements may include:
Checklist
Check against all themes for compatibility in both light and dark modesChecked in mobileChecked in Chrome, Safari, Edge, and FirefoxProps have proper autodocs and **[playground toggles](https://github.com/elastic/eui/blob/main/wiki/documentation-guidelines.md#adding-playground-toggles)**Checked Code Sandbox works for any docs examplesChecked for breaking changes and labeled appropriatelyA changelog entry exists and is marked appropriately