Add failing test for multi-touch behavior

mui · Jan 21, 2020 · a0f6255 · a0f6255
1 parent c29c8ad
commit a0f6255
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.test.js b/packages/material-ui/src/ButtonBase/TouchRipple.test.js
@@ -18,7 +18,7 @@ describe('<TouchRipple />', () => {
    */
   function renderTouchRipple(other) {
     const touchRippleRef = React.createRef();
-    const { container } = render(
+    const { container, unmount } = render(
       <TouchRipple
         ref={touchRippleRef}
         classes={{
@@ -42,6 +42,7 @@ describe('<TouchRipple />', () => {
       queryRipple() {
         return container.querySelector('.ripple');
       },
+      unmount,
     };
   }
 
@@ -155,6 +156,9 @@ describe('<TouchRipple />', () => {
   });
 
   describe('mobile', () => {
+    /**
+     * @type {ReturnType<typeof useFakeTimers>}
+     */
     let clock;
 
     before(() => {
@@ -227,5 +231,17 @@ describe('<TouchRipple />', () => {
       expect(queryAllActiveRipples()).to.have.lengthOf(0);
       expect(queryAllStoppingRipples()).to.have.lengthOf(0);
     });
+
+    it('should not leak on multi-touch', function multiTouchTest() {
+      const { instance, unmount } = renderTouchRipple();
+
+      instance.start({ type: 'touchstart', touches: [{}] }, () => {});
+      instance.start({ type: 'touchstart', touches: [{}] }, () => {});
+      unmount();
+
+      // expect this to run gracefully without
+      // "react state update on an unmounted component"
+      clock.runAll();
+    });
   });
 });