[Emotion] Fix/regression test tooltip-related css props (#6253)

* [setup] Add missing tooltip helper type defs

* Update `shouldRenderCustomStyles` with a `renderCallback` option

- for components (primarily tooltip) that only render the component conditionally

- nb: snapshot changed because the preceding test removes a className from `body`

* Add EuiIconTip regression test

* Add EuiKeyPad regression tests

+ update `waitForEuiToolTipVisible` to not throw for tooltips with along delay

* Add EuiSuperUpdateButton tooltip regression tests

* Fix EuiSuperDatePicker ignoring the`className` prop

* changelog

Author: Constance

src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap

@@ -8,7 +8,8 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
 >
   <EuiFlexItem>
     <EuiFormControlLayout
-      className="euiSuperDatePicker"
+      className="euiSuperDatePicker testClass1 testClass2"
+      data-test-subj="test subject string"
       isDisabled={false}
       prepend={
         <EuiQuickSelectPopover

src/components/date_picker/super_date_picker/super_date_picker.test.tsx

@@ -8,6 +8,8 @@
 
 import React from 'react';
 import { mount, shallow, ReactWrapper } from 'enzyme';
+import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import {
   EuiSuperDatePicker,
@@ -30,9 +32,17 @@ const shallowAndDive = (component: React.ReactElement) =>
   shallow(component).dive().dive();
 
 describe('EuiSuperDatePicker', () => {
+  shouldRenderCustomStyles(<EuiSuperDatePicker onTimeChange={noop} />, {
+    skipStyles: true,
+  });
+  shouldRenderCustomStyles(<EuiSuperDatePicker onTimeChange={noop} />, {
+    childProps: ['updateButtonProps'],
+    skipParentTest: true,
+  });
+
   test('is rendered', () => {
     const component = shallowAndDive(
-      <EuiSuperDatePicker onTimeChange={noop} />
+      <EuiSuperDatePicker onTimeChange={noop} {...requiredProps} />
     );
 
     expect(component).toMatchSnapshot();

src/components/date_picker/super_date_picker/super_date_picker.tsx

@@ -541,6 +541,7 @@ export class EuiSuperDatePickerInternal extends Component<
       width: _width,
       isQuickSelectOnly,
       compressed,
+      className,
     } = this.props;
 
     // Force reduction in width if showing quick select only
@@ -600,13 +601,14 @@ export class EuiSuperDatePickerInternal extends Component<
               compressed={compressed}
               isDisabled={isDisabled}
               data-test-subj={dataTestSubj}
+              className={className}
             />
           </EuiFlexItem>
         ) : (
           <>
             <EuiFlexItem>
               <EuiFormControlLayout
-                className="euiSuperDatePicker"
+                className={classNames('euiSuperDatePicker', className)}
                 compressed={compressed}
                 isDisabled={isDisabled}
                 prepend={quickSelect}

src/components/date_picker/super_date_picker/super_update_button.test.tsx

@@ -8,13 +8,35 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
+import { waitForEuiToolTipVisible } from '../../../test/rtl';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiSuperUpdateButton } from './super_update_button';
 import { EuiButton, EuiButtonProps } from '../../button';
 
 const noop = () => {};
 
 describe('EuiSuperUpdateButton', () => {
+  shouldRenderCustomStyles(<EuiSuperUpdateButton onClick={noop} />);
+  shouldRenderCustomStyles(
+    <EuiSuperUpdateButton
+      onClick={noop}
+      data-test-subj="trigger"
+      showTooltip
+      needsUpdate
+      toolTipProps={{ children: <>Test</>, delay: 'regular', position: 'top' }} // React throws a `Failed prop type` error without this
+    />,
+    {
+      childProps: ['toolTipProps'],
+      skipParentTest: true,
+      renderCallback: async ({ getByTestSubject }) => {
+        fireEvent.mouseOver(getByTestSubject('trigger'));
+        await waitForEuiToolTipVisible();
+      },
+    }
+  );
+
   test('is rendered', () => {
     const component = shallow(<EuiSuperUpdateButton onClick={noop} />);
 

src/components/key_pad_menu/key_pad_menu.test.tsx

@@ -9,10 +9,17 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiKeyPadMenu } from './key_pad_menu';
 
 describe('EuiKeyPadMenu', () => {
+  shouldRenderCustomStyles(<EuiKeyPadMenu />);
+  shouldRenderCustomStyles(<EuiKeyPadMenu checkable={{ legend: 'test' }} />, {
+    childProps: ['checkable.legendProps'],
+    skipParentTest: true,
+  });
+
   test('is rendered', () => {
     const component = render(<EuiKeyPadMenu {...requiredProps} />);
 

src/components/key_pad_menu/key_pad_menu_item.test.tsx

@@ -8,11 +8,35 @@
 
 import React from 'react';
 import { render, shallow } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
+import { waitForEuiToolTipVisible } from '../../test/rtl';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiKeyPadMenuItem } from './key_pad_menu_item';
 
 describe('EuiKeyPadMenuItem', () => {
+  shouldRenderCustomStyles(
+    <EuiKeyPadMenuItem label="test">Test</EuiKeyPadMenuItem>
+  );
+  shouldRenderCustomStyles(
+    <EuiKeyPadMenuItem
+      label="test"
+      betaBadgeLabel="Beta"
+      data-test-subj="trigger"
+    >
+      Test
+    </EuiKeyPadMenuItem>,
+    {
+      skipParentTest: true,
+      childProps: ['betaBadgeTooltipProps'],
+      renderCallback: async ({ getByTestSubject }) => {
+        fireEvent.mouseOver(getByTestSubject('trigger'));
+        await waitForEuiToolTipVisible();
+      },
+    }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiKeyPadMenuItem label="Label" {...requiredProps}>

src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap

@@ -30,7 +30,9 @@ exports[`EuiToolTip display prop renders block 1`] = `
 `;
 
 exports[`EuiToolTip is rendered 1`] = `
-<body>
+<body
+  class=""
+>
   <div>
     <span
       class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"

src/components/tool_tip/icon_tip.test.tsx

@@ -8,11 +8,25 @@
 
 import React from 'react';
 import { render } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
+import { waitForEuiToolTipVisible } from '../../test/rtl';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiIconTip } from './icon_tip';
 
 describe('EuiIconTip', () => {
+  shouldRenderCustomStyles(
+    <EuiIconTip content="test" iconProps={{ 'data-test-subj': 'trigger' }} />,
+    {
+      childProps: ['iconProps'],
+      renderCallback: async ({ getByTestSubject }) => {
+        fireEvent.mouseOver(getByTestSubject('trigger'));
+        await waitForEuiToolTipVisible();
+      },
+    }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiIconTip title="title" id="id" content="content" {...requiredProps} />

src/components/tool_tip/tool_tip.test.tsx

@@ -15,10 +15,24 @@ import {
   waitForEuiToolTipHidden,
 } from '../../test/rtl';
 import { requiredProps, findTestSubject } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiToolTip } from './tool_tip';
 
 describe('EuiToolTip', () => {
+  shouldRenderCustomStyles(
+    <EuiToolTip content="test">
+      <button data-test-subj="trigger" />
+    </EuiToolTip>,
+    {
+      childProps: ['anchorProps'],
+      renderCallback: async ({ getByTestSubject }) => {
+        fireEvent.mouseOver(getByTestSubject('trigger'));
+        await waitForEuiToolTipVisible();
+      },
+    }
+  );
+
   it('is rendered', () => {
     const { baseElement } = render(
       <EuiToolTip title="title" id="id" content="content" {...requiredProps}>

src/test/internal/render_custom_styles.tsx

@@ -7,9 +7,9 @@
  */
 
 import React, { ReactElement } from 'react';
-import { render } from '@testing-library/react';
 import { css } from '@emotion/react';
 import { get, set } from 'lodash';
+import { render } from '../rtl';
 
 export const customStyles = {
   className: 'hello',
@@ -59,6 +59,7 @@ export const shouldRenderCustomStyles = (
     childProps?: string[];
     skipStyles?: boolean;
     skipParentTest?: boolean;
+    renderCallback?: (result: ReturnType<typeof render>) => void;
   } = {}
 ) => {
   const testCases = options.skipStyles
@@ -71,25 +72,27 @@ export const shouldRenderCustomStyles = (
   // Some tests run separate child props tests with different settings & don't need
   // to run the base parent test multiple times. If so, allow skipping this test
   if (!(options.skipParentTest === true && options.childProps)) {
-    it(`should render custom ${testCases}`, () => {
-      const { baseElement } = render(
+    it(`should render custom ${testCases}`, async () => {
+      const result = render(
         <div>{React.cloneElement(component, testProps)}</div>
       );
-      assertOutputStyles(baseElement, options);
+      await options.renderCallback?.(result);
+      assertOutputStyles(result.baseElement, options);
     });
   }
 
   if (options.childProps) {
     options.childProps.forEach((childProps) => {
-      it(`should render custom ${testCases} on ${childProps}`, () => {
+      it(`should render custom ${testCases} on ${childProps}`, async () => {
         const mergedChildProps = set({ ...component.props }, childProps, {
           ...get(component.props, childProps),
           ...testProps,
         });
-        const { baseElement } = render(
+        const result = render(
           <div>{React.cloneElement(component, mergedChildProps)}</div>
         );
-        assertOutputStyles(baseElement, options);
+        await options.renderCallback?.(result);
+        assertOutputStyles(result.baseElement, options);
       });
     });
   }

src/test/rtl/component_helpers.d.ts

@@ -5,3 +5,6 @@
  */
 export declare const waitForEuiPopoverOpen: () => Promise<void>;
 export declare const waitForEuiPopoverClose: () => Promise<void>;
+
+export declare const waitForEuiToolTipVisible: () => Promise<void>;
+export declare const waitForEuiToolTipHidden: () => Promise<void>;

src/test/rtl/component_helpers.ts

@@ -30,10 +30,13 @@ export const waitForEuiPopoverClose = async () =>
  * Ensure the EuiToolTip being tested is open and visible before continuing
  */
 export const waitForEuiToolTipVisible = async () =>
-  await waitFor(() => {
-    const tooltip = document.querySelector('.euiToolTipPopover');
-    expect(tooltip).toBeVisible();
-  });
+  await waitFor(
+    () => {
+      const tooltip = document.querySelector('.euiToolTipPopover');
+      expect(tooltip).toBeVisible();
+    },
+    { timeout: 1500 } // Account for long delay on tooltips
+  );
 
 export const waitForEuiToolTipHidden = async () =>
   await waitFor(() => {

upcoming_changelogs/6253.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` not correctly merging passed `className`s