elastic · cee-chen · Aug 9, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 3, 2022
@@ -1,8 +1,20 @@
 jest.mock('./../../../src/components/auto_sizer', () => {
-  const { EuiAutoSizer } = require('./../../../src/components/auto_sizer/auto_sizer.testenv');
+  const {
+    EuiAutoSizer,
+  } = require('./../../../src/components/auto_sizer/auto_sizer.testenv');
   return { EuiAutoSizer };
 });
 
+jest.mock('./../../../src/components/observer/resize_observer', () => {
+  const rest = jest.requireActual(
+    './../../../src/components/observer/resize_observer'
+  );
+  const {
+    EuiResizeObserver,
+  } = require('./../../../src/components/observer/resize_observer/resize_observer.testenv');
+  return { ...rest, EuiResizeObserver };
+});
+
 jest.mock('./../../../src/components/icon', () => {
   const { EuiIcon } = require('./../../../src/components/icon/icon.testenv');
   return { EuiIcon };

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEffect, useState } from 'react';
+import { EuiResizeObserverProps } from './resize_observer';
+
+/**
+ * jsdom currently does not support ResizeObservers (@see https://github.com/jsdom/jsdom/issues/3368)
+ * To mimic RO init behavior (should call onResize on mount), we're providing the below testenv mock.
+ */
+export const EuiResizeObserver = ({
+  onResize,
+  children,
+}: EuiResizeObserverProps) => {
+  const [observedElement, setObservedElement] = useState<Element | null>(null);
+
+  useEffect(() => {
+    if (observedElement) {
+      const { width, height } = observedElement.getBoundingClientRect();
+      onResize({ width, height });
+    }
+  }, [observedElement, onResize]);
+
+  return children(setObservedElement);
+};
@@ -1,34 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiToolTip display prop renders block 1`] = `
-<span
-  class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
->
-  <button>
-    Trigger
-  </button>
-</span>
+<div>
+  <span
+    class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+  >
+    <button>
+      Trigger
+    </button>
+  </span>
+</div>
 `;
 
 exports[`EuiToolTip is rendered 1`] = `
-<span
-  class="euiToolTipAnchor"
->
-  <button>
-    Trigger
-  </button>
-</span>
+<body>
+  <div>
+    <span
+      class="euiToolTipAnchor"
+    >
+      <button>
+        Trigger
+      </button>
+    </span>
+  </div>
+</body>
 `;
 
-exports[`EuiToolTip shows tooltip on focus 1`] = `
-<span
-  class="euiToolTipAnchor"
+exports[`EuiToolTip shows tooltip on mouseover and focus 1`] = `
+<body
+  class="euiBody-hasPortalContent"
 >
-  <button
-    aria-describedby="id"
-    data-test-subj="trigger"
+  <div>
+    <span
+      class="euiToolTipAnchor"
+    >
+      <button
+        aria-describedby="id"
+        data-test-subj="trigger"
+      >
+        Trigger
+      </button>
+    </span>
+  </div>
+  <div
+    data-euiportal="true"
   >
-    Trigger
-  </button>
-</span>
+    <div
+      aria-label="aria-label"
+      class="euiToolTipPopover euiToolTip euiToolTip--top testClass1 testClass2"
+      data-test-subj="test subject string"
+      id="id"
+      position="top"
+      role="tooltip"
+      style="top: -16px; left: -10px;"
+    >
+      <div
+        class="euiToolTip__title"
+      >
+        title
+      </div>
+      <div
+        class="euiToolTip__arrow"
+        style="left: 4px; top: 0px;"
+      />
+      <div>
+        content
+      </div>
+    </div>
+  </div>
+</body>
 `;
@@ -7,41 +7,73 @@
  */
 
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
 import {
-  requiredProps,
-  findTestSubject,
-  takeMountedSnapshot,
-} from '../../test';
+  render,
+  waitForEuiToolTipVisible,
+  waitForEuiToolTipHidden,
+} from '../../test/rtl';
+import { requiredProps, findTestSubject } from '../../test';
+
 import { EuiToolTip } from './tool_tip';
 
 describe('EuiToolTip', () => {
-  test('is rendered', () => {
-    const component = render(
+  it('is rendered', () => {
+    const { baseElement } = render(
       <EuiToolTip title="title" id="id" content="content" {...requiredProps}>
         <button>Trigger</button>
       </EuiToolTip>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('shows tooltip on mouseover and focus', async () => {
+    const { baseElement, getByTestSubject } = render(
+      <EuiToolTip title="title" id="id" content="content" {...requiredProps}>
+        <button data-test-subj="trigger">Trigger</button>
+      </EuiToolTip>
+    );
+
+    fireEvent.mouseOver(getByTestSubject('trigger'));
+    await waitForEuiToolTipVisible();
+
+    expect(baseElement).toMatchSnapshot();
+
+    fireEvent.mouseOut(getByTestSubject('trigger'));
+    await waitForEuiToolTipHidden();
+
+    fireEvent.focus(getByTestSubject('trigger'));
+    await waitForEuiToolTipVisible();
   });
 
-  test('shows tooltip on focus', () => {
+  // This is a legacy unit test to ensure tooltips/portal updates still play well with Enzyme
+  it('[enzyme] shows tooltip on focus', () => {
     jest.useFakeTimers();
     const component = mount(
-      <EuiToolTip title="title" id="id" content="content" {...requiredProps}>
+      <EuiToolTip
+        title="title"
+        id="id"
+        content="content"
+        {...requiredProps}
+        data-test-subj="tooltip"
+      >
         <button data-test-subj="trigger">Trigger</button>
       </EuiToolTip>
     );
 
     const trigger = findTestSubject(component, 'trigger');
     trigger.simulate('focus');
-    jest.advanceTimersByTime(260); // wait for showToolTip setTimeout
-    expect(takeMountedSnapshot(component)).toMatchSnapshot();
+    jest.runAllTimers(); // wait for showToolTip setTimeout
+
+    expect(document.querySelector('[data-test-subj="tooltip"]')).not.toBeNull();
+
+    jest.useRealTimers();
   });
 
   test('display prop renders block', () => {
-    const component = render(
+    const { container } = render(
       <EuiToolTip
         title="title"
         id="id"
@@ -53,6 +85,6 @@ describe('EuiToolTip', () => {
       </EuiToolTip>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });
@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
+import '@testing-library/jest-dom';
 import { waitFor } from '@testing-library/react';
 
 /**
- * Ensure the EuiPopover being tested is open/closed before contiuning
+ * Ensure the EuiPopover being tested is open/closed before continuing
  * Note: Because EuiPopover is portalled, we want to query `document`
  * instead of the `container` returned by RTL's render()
  */
@@ -24,3 +25,18 @@ export const waitForEuiPopoverClose = async () =>
     const openPopover = document.querySelector('[data-popover-open]');
     expect(openPopover).toBeFalsy();
   });
+
+/**
+ * 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();
+  });
+
+export const waitForEuiToolTipHidden = async () =>
+  await waitFor(() => {
+    const tooltip = document.querySelector('.euiToolTipPopover');
+    expect(tooltip).toBeNull();
+  });
@@ -0,0 +1 @@
+- Added new React Testing Library EuiToolTip helpers, `waitForEuiToolTipVisible` and `waitForEuiToolTipClose`
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Added new React Testing Library EuiToolTip helpers, `waitForEuiToolTipVisible` and `waitForEuiToolTipClose`