migrate to testing-library

mui · Feb 29, 2020 · 0c7d2bb · 0c7d2bb
1 parent 05bb637
commit 0c7d2bb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 62 deletions.
diff --git a/docs/pages/api/tooltip.md b/docs/pages/api/tooltip.md
@@ -41,7 +41,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be open.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | If `true`, the tooltip is shown. |
 | <span class="prop-name">placement</span> | <span class="prop-type">'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Tooltip placement. |
-| <span class="prop-name">PopperProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Popper`](/api/popper/) element. |
+| <span class="prop-name">PopperProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`Popper`](/api/popper/) element. |
 | <span class="prop-name required">title&nbsp;*</span> | <span class="prop-type">node</span> |  | Tooltip title. Zero-length titles string are never displayed. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -194,7 +194,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     onOpen,
     open: openProp,
     placement = 'bottom',
-    PopperProps,
+    PopperProps = {},
     title,
     TransitionComponent = Grow,
     TransitionProps,
@@ -484,18 +484,21 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     }
   }
 
-  const PopperPropsToPassToPopper = React.useMemo(() => {
-    const defaultPopperOptions = {
-      modifiers: {
-        arrow: {
-          enabled: Boolean(arrowRef),
-          element: arrowRef
-        }
-      }
-    }
-
-    return deepmerge({ popperOptions: defaultPopperOptions }, PopperProps || {})
-  }, [arrowRef, PopperProps])
+  const mergedPopperProps = React.useMemo(() => {
+    return deepmerge(
+      {
+        popperOptions: {
+          modifiers: {
+            arrow: {
+              enabled: Boolean(arrowRef),
+              element: arrowRef,
+            },
+          },
+        },
+      },
+      PopperProps,
+    );
+  }, [arrowRef, PopperProps]);
 
   return (
     <React.Fragment>
@@ -511,7 +514,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
         id={childrenProps['aria-describedby']}
         transition
         {...interactiveWrapperListeners}
-        {...PopperPropsToPassToPopper}
+        {...mergedPopperProps}
       >
         {({ placement: placementInner, TransitionProps: TransitionPropsInner }) => (
           <TransitionComponent

diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js
@@ -399,63 +399,33 @@ describe('<Tooltip />', () => {
 
   describe('prop: PopperProps', () => {
     it('should pass PopperProps to Popper Component', () => {
-      const wrapper = mount(<Tooltip {...defaultProps} PopperProps={{ item: 'value' }} />);
-
-      assert.strictEqual(wrapper.find(Popper).props().item, 'value');
-    });
-
-    it('should pass popperOptions to Popper Component when PopperProps is undefined', () => {
-      const wrapper = mount(<Tooltip {...defaultProps} />);
-
-      assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
-    });
-
-    it('should pass popperOptions to Popper Component when PopperProps is not undefined', () => {
-      const wrapper = mount(<Tooltip {...defaultProps} PopperProps={{ item: 'value' }} />);
-
-      assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
-      assert.strictEqual(wrapper.find(Popper).props().item, 'value');
-    });
-
-    it('should merge popperOptions with arrow modifer', () => {
-      const wrapper = mount(
-        <Tooltip
-          {...defaultProps}
-          PopperProps={{
-            popperOptions: { item: 'value' },
-          }}
-        />,
-      );
-
-      assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
-      assert.strictEqual(wrapper.find(Popper).props().popperOptions.item, 'value');
-    });
-
-    it('should merge popperOptions modifiers with arrow modifer', () => {
-      const wrapper = mount(
-        <Tooltip
-          {...defaultProps}
-          PopperProps={{
-            popperOptions: { modifiers: { item: 'value' } },
-          }}
-        />,
+      const { getByTestId } = render(
+        <Tooltip {...defaultProps} open PopperProps={{ 'data-testid': 'popper' }} />,
       );
 
-      assert.exists(wrapper.find(Popper).props().popperOptions.modifiers.arrow);
-      assert.strictEqual(wrapper.find(Popper).props().popperOptions.modifiers.item, 'value');
+      expect(getByTestId('popper')).to.be.ok;
     });
 
-    it('should override popperOptions arrow modifier', () => {
-      const wrapper = mount(
+    it('should merge popperOptions with arrow modifier', () => {
+      const popperRef = React.createRef();
+      render(
         <Tooltip
           {...defaultProps}
+          open
+          arrow
           PopperProps={{
-            popperOptions: { modifiers: { arrow: 'value' } },
+            popperRef,
+            popperOptions: {
+              modifiers: {
+                arrow: {
+                  foo: 'bar',
+                },
+              },
+            },
           }}
         />,
       );
-
-      assert.strictEqual(wrapper.find(Popper).props().popperOptions.modifiers.arrow, 'value');
+      expect(popperRef.current.modifiers.find(x => x.name === 'arrow').foo).to.equal('bar');
     });
   });