test: convert even more component unit tests using enzyme render to RTL

[tkajtoch]

Summary

This PR converts EuiPopover, EuiPanel, EuiNotification, EuiMarkdownEditor, EuiLoading*, EuiListGroup, EuiKeyPadMenu and EuiHeader unit tests using Enzyme's render() function to RTL render() counterpart to reduce our tech debt.

QA

• Make sure all unit tests are passing
• Verify the updated snapshots don't contain any unexpected changes

General checklist

• Added or updated jest and cypress tests

[kibanamachine]

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

[cee-chen]

LGTM!

[cee-chen]

[optional] We've since mocked our ID generator to generate a static string - I wonder if we could uncomment this test and remove the TODO? No worries if you'd rather skip it though!

[cee-chen]

Ha, thanks for fixing this - I ran into it as well locally when starting the Emotion conversion for this component. The years before EUI had an accessibility dev on the team sure were wild 🤣

[1Copenut]

Just a comment about future enhancements for winding down use of Enzyme mount().

[1Copenut]

What do you think about a future enhancement to refactor tests using Enzyme mount() for keyboard / event behaviors to use RTL? I gave myself a 20 minute window to try refactoring a couple assertions, and this is what I came up with:

// The cue to use `getByText` came from this SO response: https://stackoverflow.com/a/59590889

// Also assumes a few more `import` calls
import { fireEvent, getByText } from '@testing-library/react';

/*
 * ...
 * More tests here
 */

describe('closePopover', () => {
  // Positive assertion
  it('is called when ESC key is hit and the popover is open', () => {
    const closePopoverHandler = jest.fn();

    const { container } = render(
      <EuiPopover
        ownFocus={false}
        id={getId()}
        button={<button />}
        closePopover={closePopoverHandler}
        isOpen
      >
        <p>Popover content</p>
      </EuiPopover>
    );

    fireEvent.keyDown(getByText(container, 'Popover content'), {
      key: 'Escape',
    });
    expect(closePopoverHandler).toBeCalledTimes(1);
  });

  // Negative assertion
  it('is not called when ESC key is hit and the popover is closed', () => {
    const closePopoverHandler = jest.fn();

    const { container } = render(
      <EuiPopover
        id={getId()}
        button={<button>Test</button>}
        closePopover={closePopoverHandler}
        isOpen={false}
      />
    );

    fireEvent.keyDown(getByText(container, 'Test'), {
      key: 'Escape',
    });
    expect(closePopoverHandler).not.toBeCalled();
  });
});

[kibanamachine]

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

[cee-chen]

Thanks for fixing EuiComboBox as part of this PR! 🚢

[kibanamachine]

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