Overlay improvements (#724)

* Make Overlay more robust.

* Fix tests

Author: tcbegley

.babelrc

@@ -1,16 +1,12 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ],
-    "plugins": [
-        "@babel/plugin-proposal-object-rest-spread"
-    ],
-    "env": {
-        "test": {
-            "plugins": [
-                "@babel/plugin-proposal-class-properties"
-            ]
-        }
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-runtime"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["@babel/plugin-proposal-class-properties"]
     }
+  }
 }

package-lock.json

@@ -38,6 +38,7 @@
     "@babel/core": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
     "@testing-library/jest-dom": "^5.14.1",

package.json

@@ -9,7 +9,6 @@ function isInDOMSubtree(element, subtreeRoot) {
 
 function useStateRef(initialValue) {
   const [value, setValue] = useState(initialValue);
-
   const ref = useRef(value);
 
   useEffect(() => {
@@ -146,9 +145,23 @@ const Overlay = ({
     setIsOpen(defaultShow);
   }, [defaultShow]);
 
+  const wait = ms => new Promise(res => setTimeout(res, ms));
+
+  const getTarget = async (target, depth = 0) => {
+    const targetRef = document.getElementById(target);
+    if (targetRef === null && depth < 4) {
+      await wait(2 ** depth * 100);
+      return getTarget(target, depth + 1);
+    }
+    return targetRef;
+  };
+
   useEffect(() => {
-    targetRef.current = document.getElementById(targetStr);
-    addEventListeners(targetRef.current);
+    const attachListenersToTarget = async () => {
+      targetRef.current = await getTarget(targetStr);
+      addEventListeners(targetRef.current);
+    };
+    attachListenersToTarget();
   }, [targetStr]);
 
   return (

src/components/tooltip/__tests__/Tooltip.test.js

@@ -3,13 +3,17 @@
  */
 
 import React from 'react';
-import {act, fireEvent, render} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Tooltip from '../../components/tooltip/Tooltip';
-
+import {render} from '@testing-library/react';
+import Overlay from '../Overlay';
 jest.useFakeTimers();
 
-describe('Tooltip with dict id', () => {
+const CustomChild = React.forwardRef((props, ref) => (
+  <div ref={ref} id="content">
+    Some test content
+  </div>
+));
+
+describe('Overlay with dict id', () => {
   // this is just a little hack to silence a warning that we'll get until we
   // upgrade to 16.9. See also: https://github.com/facebook/react/pull/14853
   const originalError = console.error;
@@ -34,41 +38,27 @@ describe('Tooltip with dict id', () => {
 
   test('renders nothing by default', () => {
     render(
-      <Tooltip target={{type: 'target', index: 1}}>Test content</Tooltip>,
+      <Overlay target={{type: 'target', index: 1}}>
+        <CustomChild />
+      </Overlay>,
       {
         container: document.body.appendChild(div)
       }
     );
 
-    expect(document.body.querySelector('.tooltip')).toBe(null);
-  });
-
-  test('renders a div with class "tooltip"', () => {
-    render(<Tooltip target={{type: 'target', index: 1}} />, {
-      container: document.body.appendChild(div)
-    });
-
-    fireEvent.mouseOver(div);
-    act(() => jest.runAllTimers());
-    expect(document.body.querySelector('.tooltip')).not.toBe(null);
-
-    fireEvent.mouseLeave(div);
-    act(() => jest.runAllTimers());
-    expect(document.body.querySelector('.tooltip')).toBe(null);
+    expect(document.body.querySelector('#content')).toBe(null);
   });
 
   test('renders its content', () => {
     render(
-      <Tooltip target={{type: 'target', index: 1}}>Tooltip content</Tooltip>,
+      <Overlay defaultShow target={{type: 'target', index: 1}}>
+        <CustomChild />
+      </Overlay>,
       {
         container: document.body.appendChild(div)
       }
     );
 
-    fireEvent.mouseOver(div);
-    act(() => jest.runAllTimers());
-    expect(document.body.querySelector('.tooltip')).toHaveTextContent(
-      'Tooltip content'
-    );
+    expect(document.body.querySelector('#content')).not.toBe(null);
   });
 });

src/private/Overlay.js

@@ -0,0 +1,55 @@
+from dash import Dash, html
+from dash_bootstrap_components import (
+    Popover,
+    PopoverBody,
+    PopoverHeader,
+    themes,
+)
+from selenium.webdriver.common.action_chains import ActionChains
+
+
+def test_dbpo001_popover_click(dash_duo):
+    app = Dash(external_stylesheets=[themes.BOOTSTRAP])
+
+    app.layout = html.Div(
+        [
+            Popover(
+                [PopoverHeader("Test Header"), PopoverBody("Test content")],
+                id="popover",
+                target="popover-target",
+                trigger="click",
+            ),
+            html.Div("Target", id="popover-target"),
+        ],
+        className="container p-5",
+    )
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_element_by_id("popover-target").click()
+    assert dash_duo.wait_for_element(".popover-body").text == "Test content"
+
+
+def test_dbpo002_popover_hover(dash_duo):
+    app = Dash(external_stylesheets=[themes.BOOTSTRAP])
+
+    app.layout = html.Div(
+        [
+            Popover(
+                [PopoverHeader("Test Header"), PopoverBody("Test content")],
+                id="popover",
+                target="popover-target",
+                trigger="hover",
+            ),
+            html.Div("Target", id="popover-target"),
+        ],
+        className="container p-5",
+    )
+
+    dash_duo.start_server(app)
+
+    hover = ActionChains(dash_duo.driver).move_to_element(
+        dash_duo.wait_for_element_by_id("popover-target")
+    )
+    hover.perform()
+    assert dash_duo.wait_for_element(".popover-body").text == "Test content"

src/private/__tests__/Overlay.test.js

@@ -0,0 +1,23 @@
+from dash import Dash, html
+from dash_bootstrap_components import Tooltip, themes
+from selenium.webdriver.common.action_chains import ActionChains
+
+
+def test_dbtt001_tooltip_content(dash_duo):
+    app = Dash(external_stylesheets=[themes.BOOTSTRAP])
+
+    app.layout = html.Div(
+        [
+            Tooltip("Test content", id="tooltip", target="tooltip-target"),
+            html.Div("Target", id="tooltip-target"),
+        ],
+        className="container p-5",
+    )
+
+    dash_duo.start_server(app)
+
+    hover = ActionChains(dash_duo.driver).move_to_element(
+        dash_duo.wait_for_element_by_id("tooltip-target")
+    )
+    hover.perform()
+    assert dash_duo.wait_for_element(".tooltip-inner").text == "Test content"