From a0f6255c55a7ce77b37186b02dfae1776d4acabc Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 21 Jan 2020 15:30:19 +0100
Subject: [PATCH] Add failing test for multi-touch behavior

---
 .../src/ButtonBase/TouchRipple.test.js         | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.test.js b/packages/material-ui/src/ButtonBase/TouchRipple.test.js
index 64b9ada9ce3662..9b66633f70f0e2 100644
--- 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();
+    });
   });
 });