Fix tests

mui · Aug 13, 2020 · 16b4c2e · 16b4c2e
1 parent 80d5c0f
commit 16b4c2e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 80 deletions.
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -313,8 +313,6 @@ This change affects almost all components where you're using the `component` pro
   -  onExit={onEntered},
   -  onExited={onEntered},
   -  onExiting={onEntered}
-  />
-  <Snackbar
   +  TransitionProps={{
   +    onEnter,
   +    onEntered,

diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
@@ -133,7 +133,7 @@ const Menu = React.forwardRef(function Menu(props, ref) {
       getContentAnchorEl={getContentAnchorEl}
       classes={PopoverClasses}
       onClose={onClose}
-      onEntering={handleEntering}
+      TransitionProps={{ onEntering: handleEntering }}
       anchorOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
       transformOrigin={theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN}
       PaperProps={{

diff --git a/packages/material-ui/src/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js
@@ -41,14 +41,16 @@ describe('<Menu />', () => {
 
         const wrapper = mount(
           <Menu
-            onEnter={handleEnter}
-            onEntering={handleEntering}
-            onEntered={() => {
-              expect(handleEnter.callCount).to.equal(1);
-              expect(handleEnter.args[0].length).to.equal(2);
-              expect(handleEntering.callCount).to.equal(1);
-              expect(handleEntering.args[0].length).to.equal(2);
-              done();
+            TransitionProps={{
+              onEnter: handleEnter,
+              onEntering: handleEntering,
+              onEntered: () => {
+                expect(handleEnter.callCount).to.equal(1);
+                expect(handleEnter.args[0].length).to.equal(2);
+                expect(handleEntering.callCount).to.equal(1);
+                expect(handleEntering.args[0].length).to.equal(2);
+                done();
+              }
             }}
             {...defaultProps}
           />,
@@ -67,14 +69,16 @@ describe('<Menu />', () => {
 
         const wrapper = mount(
           <Menu
-            onExit={handleExit}
-            onExiting={handleExiting}
-            onExited={() => {
-              expect(handleExit.callCount).to.equal(1);
-              expect(handleExit.args[0].length).to.equal(1);
-              expect(handleExiting.callCount).to.equal(1);
-              expect(handleExiting.args[0].length).to.equal(1);
-              done();
+            TransitionProps={{
+              onExit: handleExit,
+              onExiting: handleExiting,
+              onExited: () => {
+                expect(handleExit.callCount).to.equal(1);
+                expect(handleExit.args[0].length).to.equal(1);
+                expect(handleExiting.callCount).to.equal(1);
+                expect(handleExiting.args[0].length).to.equal(1);
+                done();
+              }
             }}
             {...defaultProps}
             open
@@ -158,28 +162,28 @@ describe('<Menu />', () => {
     expect(false).to.equal(menuEl.contains(document.activeElement));
   });
 
-  it('should call props.onEntering with element if exists', () => {
+  it('should call onEntering with element if exists', () => {
     const onEnteringSpy = spy();
-    const wrapper = mount(<Menu {...defaultProps} onEntering={onEnteringSpy} />);
+    const wrapper = mount(<Menu {...defaultProps} TransitionProps={{ onEntering: onEnteringSpy }} />);
     const popover = wrapper.find(Popover);
 
     const elementForHandleEnter = { clientHeight: MENU_LIST_HEIGHT };
 
-    popover.props().onEntering(elementForHandleEnter);
+    popover.props().TransitionProps.onEntering(elementForHandleEnter);
     expect(onEnteringSpy.callCount).to.equal(1);
     expect(onEnteringSpy.calledWith(elementForHandleEnter)).to.equal(true);
   });
 
   it('should call props.onEntering, disableAutoFocusItem', () => {
     const onEnteringSpy = spy();
     const wrapper = mount(
-      <Menu disableAutoFocusItem {...defaultProps} onEntering={onEnteringSpy} />,
+      <Menu disableAutoFocusItem {...defaultProps} TransitionProps={{ onEntering: onEnteringSpy }} />,
     );
     const popover = wrapper.find(Popover);
 
     const elementForHandleEnter = { clientHeight: MENU_LIST_HEIGHT };
 
-    popover.props().onEntering(elementForHandleEnter);
+    popover.props().TransitionProps.onEntering(elementForHandleEnter);
     expect(onEnteringSpy.callCount).to.equal(1);
     expect(onEnteringSpy.calledWith(elementForHandleEnter)).to.equal(true);
   });

diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
@@ -212,7 +212,7 @@ describe('<Popover />', () => {
 
       // transitions towards entered
       const wrapper = mount(
-        <Popover {...defaultProps} open transitionDuration={0} {...handlers}>
+        <Popover {...defaultProps} open transitionDuration={0} TransitionProps={{...handlers}}>
           <div />
         </Popover>,
       );
@@ -268,7 +268,7 @@ describe('<Popover />', () => {
       it('should set the inline styles for the enter phase', () => {
         const handleEntering = spy();
         const wrapper = mount(
-          <Popover {...defaultProps} onEntering={handleEntering}>
+          <Popover {...defaultProps} TransitionProps={{ onEntering: handleEntering }}>
             <div />
           </Popover>,
         );
@@ -332,9 +332,10 @@ describe('<Popover />', () => {
               anchorEl={anchorEl}
               anchorOrigin={anchorOrigin}
               transitionDuration={0}
-              onEntered={() => {
-                popoverEl = document.querySelector('[data-mui-test="Popover"]');
-                resolve();
+              TransitionProps={{ onEntered: () => {
+                  popoverEl = document.querySelector('[data-mui-test="Popover"]');
+                  resolve();
+                }
               }}
             >
               <div />
@@ -471,9 +472,10 @@ describe('<Popover />', () => {
               anchorPosition={anchorPosition}
               anchorOrigin={anchorOrigin}
               transitionDuration={0}
-              onEntered={() => {
-                popoverEl = document.querySelector('[data-mui-test="Popover"]');
-                resolve();
+              TransitionProps={{ onEntered: () => {
+                  popoverEl = document.querySelector('[data-mui-test="Popover"]');
+                  resolve();
+                }
               }}
             >
               <div />
@@ -515,9 +517,10 @@ describe('<Popover />', () => {
               {...defaultProps}
               anchorReference="none"
               transitionDuration={0}
-              onEntered={() => {
-                popoverEl = document.querySelector('[data-mui-test="Popover"]');
-                resolve();
+              TransitionProps={{ onEntered: () => {
+                  popoverEl = document.querySelector('[data-mui-test="Popover"]');
+                  resolve();
+                }
               }}
               PaperProps={{
                 style: {
@@ -568,7 +571,7 @@ describe('<Popover />', () => {
         <Popover
           anchorEl={mockedAnchor}
           open
-          onEntering={handleEntering}
+          TransitionProps={{ onEntering: handleEntering }}
           transitionDuration={0}
           marginThreshold={8}
         >
@@ -653,7 +656,7 @@ describe('<Popover />', () => {
           <Popover
             anchorEl={anchorEl}
             open
-            onEntering={handleEntering}
+            TransitionProps={{ onEntering: handleEntering }}
             marginThreshold={marginThreshold}
             PaperProps={{ component: FakePaper }}
           >
@@ -775,7 +778,7 @@ describe('<Popover />', () => {
       mount(
         <Popover
           anchorEl={mockedAnchorEl}
-          onEntering={handleEntering}
+          TransitionProps={{ onEntering: handleEntering }}
           getContentAnchorEl={getContentAnchorEl}
           open
         >
@@ -810,45 +813,4 @@ describe('<Popover />', () => {
       expect(wrapper.find(TransitionComponent).props().timeout).to.equal(undefined);
     });
   });
-
-  describe('prop: TransitionProp', () => {
-    it('chains onEntering with the apparent onEntering prop', () => {
-      const apparentHandler = spy();
-      const transitionHandler = spy();
-
-      mount(
-        <Popover
-          {...defaultProps}
-          open
-          TransitionProps={{ onEntering: transitionHandler }}
-          onEntering={apparentHandler}
-        >
-          <div />
-        </Popover>,
-      );
-
-      expect(apparentHandler.callCount).to.equal(1);
-      expect(transitionHandler.callCount).to.equal(1);
-    });
-
-    it('does not chain other transition callbacks with the apparent ones', () => {
-      const apparentHandler = spy();
-      const transitionHandler = spy();
-      const wrapper = mount(
-        <Popover
-          {...defaultProps}
-          open
-          TransitionProps={{ onExiting: transitionHandler }}
-          onExiting={apparentHandler}
-        >
-          <div />
-        </Popover>,
-      );
-
-      wrapper.setProps({ open: false });
-
-      expect(apparentHandler.callCount).to.equal(0);
-      expect(transitionHandler.callCount).to.equal(1);
-    });
-  });
 });
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
@@ -578,7 +578,7 @@ describe('<Select />', () => {
     it('should apply additional props to the Menu component', () => {
       const onEntered = spy();
       const { getByRole } = render(
-        <Select MenuProps={{ onEntered, transitionDuration: 100 }} value="10">
+        <Select MenuProps={{ TransitionProps: { onEntered }, transitionDuration: 100 }} value="10">
           <MenuItem value="10">Ten</MenuItem>
         </Select>,
       );