[EuiSelectableTemplateSitewide] fix: The keydown popup display shall be Enter key.

[ki504178]

Summary

Address the following issues.
#5726

Checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cee-chen]

I QA'd this locally and it's looking great, thank you @ki504178!

This is potentially out of scope, so I'm ok with skipping it for now - but just curious, would you be interested in writing E2E Cypress tests for this file to ensure we don't see regressions in the future?

No worries if you'd rather not, we can skip it if so (since this file doesn't have existing E2E tests written for it) - but if you're at all interested in learning Cypress, let me know and I can provide more details on what I'm looking for in terms of a regression test for this behavior.

[ki504178]

Thanks for the review! @constancecchen
I am interested in writing an E2E test with Cypress and would love to try it.

[cee-chen]

jenkins test this

[cee-chen]

Changes look fantastic, thank you @ki504178! I'd be good with this merging in as-is, although also very excited to see what you come up with for Cypress tests.

You will want to create a new file called selectable_template_sitewide.spec.tsx. You can take a look at the following docs for how to run Cypress tests (you will likely want to use yarn test-cypress-dev) and an example to get a quick peek at setup:

• https://github.com/elastic/eui/blob/main/wiki/cypress-testing.md
• https://github.com/elastic/eui/blob/main/src/components/combo_box/combo_box.spec.tsx

You should be able to mount a minimal EuiSelectableTemplateSitewide component using something like this:

const options = [
  {
    label: 'Hello',
    meta: [{ text: 'Test', highlightSearchString: true }],
  },
  {
    label: 'World',
    meta: [{ text: 'Test', highlightSearchString: true }],
  },
];

cy.mount(
  <EuiSelectableTemplateSitewide
    options={options}
    searchProps={{ 'data-test-subj': 'searchInput' }}
    popoverProps={{ 'data-test-subj': 'searchPopover' }}
  />
);

With the above component, I'd like to see the following 2-3 separate E2E tests:

1. One that asserts that clicking into the searchInput and then pressing Enter makes the searchPopover appear
2. One that asserts that pressing the Escape key makes the popover disappear
3. (Optional additional test) One that asserts that typing the character H into the searchInput makes the 'Hello' option appear, but not the World option

Hope that helps! You'll likely want to make use of Cypress APIs such as cy.realPress for the keypresses, cy.get('...').should('not.exist') for checking that DOM nodes are not present, and cy.contains for checking whether 'hello' vs 'world' exists.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5886/

[ki504178]

@constancecchen
Thanks for the re-review and the detailed description of Cypress!
Please let me hold off on the merge because I would like to try to create a test case for Cypress using the pattern you taught me.

[ki504178]

Sorry @constancecchen
We ran into the following problem, which may take some time to resolve, so we will leave the addition of test cases by Cypress for another time.
cypress-io/cypress-docker-images#431

[cee-chen]

Gotcha, no worries at all! Hopefully some other time in the future!

Going to go ahead and merge, thanks so much for your time with this fix!!