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');
  });
  });