Remove unnecessary async act calls

mui · Jul 15, 2024 · 1e22be8 · 1e22be8
1 parent 2f481a0
commit 1e22be8
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 88 deletions.
diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
@@ -97,7 +97,7 @@ describe('Joy <MenuItem />', () => {
         const handler = spy();
         render(<MenuItem {...{ [handlerName]: handler }} />);
 
-        await act(async () => fireEvent[eventName](screen.getByRole('menuitem')));
+        fireEvent[eventName](screen.getByRole('menuitem'));
 
         expect(handler.callCount).to.equal(1);
       });
@@ -125,11 +125,11 @@ describe('Joy <MenuItem />', () => {
 
       expect(handleFocus.callCount).to.equal(1);
 
-      await act(async () => fireEvent.keyDown(menuitem));
+      fireEvent.keyDown(menuitem);
 
       expect(handleKeyDown.callCount).to.equal(1);
 
-      await act(async () => fireEvent.keyUp(menuitem));
+      fireEvent.keyUp(menuitem);
 
       expect(handleKeyUp.callCount).to.equal(1);
 

diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.test.js b/packages/mui-material/src/ButtonBase/ButtonBase.test.js
@@ -202,47 +202,47 @@ describe('<ButtonBase />', () => {
       if (typeof Touch !== 'undefined') {
         const touch = new Touch({ identifier: 0, target: button, clientX: 0, clientY: 0 });
 
-        await act(async () => fireEvent.touchStart(button, { touches: [touch] }));
+        fireEvent.touchStart(button, { touches: [touch] });
         expect(onTouchStart.callCount).to.equal(1);
 
-        await act(async () => fireEvent.touchEnd(button, { touches: [touch] }));
+        fireEvent.touchEnd(button, { touches: [touch] });
         expect(onTouchEnd.callCount).to.equal(1);
       }
 
       if (canFireDragEvents) {
-        await act(async () => fireEvent.dragEnd(button));
+        fireEvent.dragEnd(button);
         expect(onDragEnd.callCount).to.equal(1);
       }
 
-      await act(async () => fireEvent.mouseDown(button));
+      fireEvent.mouseDown(button);
       expect(onMouseDown.callCount).to.equal(1);
 
-      await act(async () => fireEvent.mouseUp(button));
+      fireEvent.mouseUp(button);
       expect(onMouseUp.callCount).to.equal(1);
 
-      await act(async () => fireEvent.contextMenu(button));
+      fireEvent.contextMenu(button);
       expect(onContextMenu.callCount).to.equal(1);
 
       await user.click(button);
       expect(onClick.callCount).to.equal(1);
 
-      act(() => {
+      await act(async () => {
         button.focus();
       });
       expect(onFocus.callCount).to.equal(1);
 
-      await act(async () => fireEvent.keyDown(button));
+      fireEvent.keyDown(button);
       expect(onKeyDown.callCount).to.equal(1);
 
-      await act(async () => fireEvent.keyUp(button));
+      fireEvent.keyUp(button);
       expect(onKeyUp.callCount).to.equal(1);
 
-      act(() => {
+      await act(async () => {
         button.blur();
       });
       expect(onBlur.callCount).to.equal(1);
 
-      await act(async () => fireEvent.mouseLeave(button));
+      fireEvent.mouseLeave(button);
       expect(onMouseLeave.callCount).to.equal(1);
     });
   });
@@ -942,9 +942,7 @@ describe('<ButtonBase />', () => {
 
       await ripple.startFocus(button);
 
-      act(() => {
-        fireEvent.keyDown(button, { key: 'Enter' });
-      });
+      fireEvent.keyDown(button, { key: 'Enter' });
 
       expect(container.querySelectorAll('.ripple-visible')).to.have.lengthOf(1);
 
@@ -1007,7 +1005,7 @@ describe('<ButtonBase />', () => {
     });
 
     describe('keyboard accessibility for non interactive elements', () => {
-      it('does not call onClick when a spacebar is pressed on the element but prevents the default', () => {
+      it('does not call onClick when a spacebar is pressed on the element but prevents the default', async () => {
         const onKeyDown = spy();
         const onClickSpy = spy();
         const { getByRole } = render(
@@ -1017,19 +1015,20 @@ describe('<ButtonBase />', () => {
         );
         const button = getByRole('button');
 
-        act(() => {
+        await act(async () => {
           button.focus();
-          fireEvent.keyDown(button, {
-            key: ' ',
-          });
+        });
+
+        fireEvent.keyDown(button, {
+          key: ' ',
         });
 
         expect(onClickSpy.callCount).to.equal(0);
         expect(onKeyDown.callCount).to.equal(1);
         expect(onKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true);
       });
 
-      it('does call onClick when a spacebar is released on the element', () => {
+      it('does call onClick when a spacebar is released on the element', async () => {
         const onClickSpy = spy();
         const { getByRole } = render(
           <ButtonBase onClick={onClickSpy} component="div">
@@ -1038,18 +1037,19 @@ describe('<ButtonBase />', () => {
         );
         const button = getByRole('button');
 
-        act(() => {
+        await act(async () => {
           button.focus();
-          fireEvent.keyUp(button, {
-            key: ' ',
-          });
+        });
+
+        fireEvent.keyUp(button, {
+          key: ' ',
         });
 
         expect(onClickSpy.callCount).to.equal(1);
         expect(onClickSpy.firstCall.args[0]).to.have.property('defaultPrevented', false);
       });
 
-      it('does not call onClick when a spacebar is released and the default is prevented', () => {
+      it('does not call onClick when a spacebar is released and the default is prevented', async () => {
         const onClickSpy = spy();
         const { getByRole } = render(
           <ButtonBase
@@ -1067,17 +1067,18 @@ describe('<ButtonBase />', () => {
         );
         const button = getByRole('button');
 
-        act(() => {
+        await act(async () => {
           button.focus();
-          fireEvent.keyUp(button, {
-            key: ' ',
-          });
+        });
+
+        fireEvent.keyUp(button, {
+          key: ' ',
         });
 
         expect(onClickSpy.callCount).to.equal(0);
       });
 
-      it('calls onClick when Enter is pressed on the element', () => {
+      it('calls onClick when Enter is pressed on the element', async () => {
         const onClickSpy = spy();
         const { getByRole } = render(
           <ButtonBase onClick={onClickSpy} component="div">
@@ -1086,11 +1087,12 @@ describe('<ButtonBase />', () => {
         );
         const button = getByRole('button');
 
-        act(() => {
+        await act(async () => {
           button.focus();
-          fireEvent.keyDown(button, {
-            key: 'Enter',
-          });
+        });
+
+        fireEvent.keyDown(button, {
+          key: 'Enter',
         });
 
         expect(onClickSpy.calledOnce).to.equal(true);
@@ -1131,7 +1133,7 @@ describe('<ButtonBase />', () => {
         expect(onClickSpy.callCount).to.equal(0);
       });
 
-      it('prevents default with an anchor and empty href', () => {
+      it('prevents default with an anchor and empty href', async () => {
         const onClickSpy = spy();
         const { getByRole } = render(
           <ButtonBase component="a" onClick={onClickSpy}>
@@ -1140,16 +1142,17 @@ describe('<ButtonBase />', () => {
         );
         const button = getByRole('button');
 
-        act(() => {
+        await act(async () => {
           button.focus();
-          fireEvent.keyDown(button, { key: 'Enter' });
         });
 
+        fireEvent.keyDown(button, { key: 'Enter' });
+
         expect(onClickSpy.calledOnce).to.equal(true);
         expect(onClickSpy.firstCall.args[0]).to.have.property('defaultPrevented', true);
       });
 
-      it('should ignore anchors with href', () => {
+      it('should ignore anchors with href', async () => {
         const onClick = spy();
         const onKeyDown = spy();
         const { getByText } = render(
@@ -1159,11 +1162,12 @@ describe('<ButtonBase />', () => {
         );
         const button = getByText('Hello');
 
-        act(() => {
+        await act(async () => {
           button.focus();
-          fireEvent.keyDown(button, {
-            key: 'Enter',
-          });
+        });
+
+        fireEvent.keyDown(button, {
+          key: 'Enter',
         });
 
         expect(onClick.callCount).to.equal(0);

diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.test.js b/packages/mui-material/src/ListItemButton/ListItemButton.test.js
@@ -68,8 +68,9 @@ describe('<ListItemButton />', () => {
       );
       const button = getByRole('button');
 
+      fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
+
       act(() => {
-        fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
         button.focus();
       });
 

diff --git a/packages/mui-material/src/MenuItem/MenuItem.test.js b/packages/mui-material/src/MenuItem/MenuItem.test.js
@@ -91,11 +91,11 @@ describe('<MenuItem />', () => {
 
       expect(handleFocus.callCount).to.equal(1);
 
-      await act(async () => fireEvent.keyDown(menuitem));
+      fireEvent.keyDown(menuitem);
 
       expect(handleKeyDown.callCount).to.equal(1);
 
-      await act(async () => fireEvent.keyUp(menuitem));
+      fireEvent.keyUp(menuitem);
 
       expect(handleKeyUp.callCount).to.equal(1);
 

diff --git a/packages/mui-material/src/Popper/Popper.test.js b/packages/mui-material/src/Popper/Popper.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { ThemeProvider } from '@mui/system';
 import createTheme from '@mui/system/createTheme';
 import Grow from '@mui/material/Grow';
@@ -114,9 +114,7 @@ describe('<Popper />', () => {
       );
       expect(screen.getByTestId('placement')).to.have.text('bottom');
 
-      await act(async () => {
-        await popperRef.current.setOptions({ placement: 'top' });
-      });
+      await popperRef.current.setOptions({ placement: 'top' });
 
       expect(screen.getByTestId('placement')).to.have.text('bottom');
     });

diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
@@ -116,14 +116,15 @@ describe('<Select />', () => {
     );
     const trigger = getByRole('combobox');
 
-    await act(async () => fireEvent.mouseDown(trigger));
+    fireEvent.mouseDown(trigger);
 
     expect(handleBlur.callCount).to.equal(0);
     expect(getByRole('listbox')).not.to.equal(null);
 
+    const options = getAllByRole('option');
+    fireEvent.mouseDown(options[0]);
+
     await act(async () => {
-      const options = getAllByRole('option');
-      fireEvent.mouseDown(options[0]);
       options[0].click();
     });
 

diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js
@@ -123,11 +123,15 @@ describe('<SpeedDial />', () => {
         </SpeedDial>,
       );
       const buttonWrapper = getByRole('button', { expanded: true });
+
+      fireEvent.keyDown(document.body, { key: 'TAB' });
+
       await act(async () => {
-        fireEvent.keyDown(document.body, { key: 'TAB' });
         buttonWrapper.focus();
-        fireEvent.keyDown(buttonWrapper, { key: ' ' });
       });
+
+      fireEvent.keyDown(buttonWrapper, { key: ' ' });
+
       expect(handleKeyDown.callCount).to.equal(1);
       expect(handleKeyDown.args[0][0]).to.have.property('key', ' ');
     });
@@ -190,7 +194,7 @@ describe('<SpeedDial />', () => {
       expect(handleOpen.callCount).to.equal(1);
       const actions = getAllByRole('menuitem');
       expect(actions.length).to.equal(2);
-      await act(async () => fireEvent.keyDown(fab, { key: 'ArrowUp' }));
+      fireEvent.keyDown(fab, { key: 'ArrowUp' });
       expect(document.activeElement).to.equal(actions[0]);
       expect(fab).to.have.attribute('aria-expanded', 'true');
     });
@@ -218,11 +222,11 @@ describe('<SpeedDial />', () => {
 
       expect(fab).to.have.attribute('aria-expanded', 'true');
 
-      await act(async () => fireEvent.keyDown(fab, { key: 'ArrowUp' }));
+      fireEvent.keyDown(fab, { key: 'ArrowUp' });
       clock.runAll();
       expect(queryByRole('tooltip')).not.to.equal(null);
 
-      await act(async () => fireDiscreteEvent.keyDown(actions[0], { key: 'Escape' }));
+      fireDiscreteEvent.keyDown(actions[0], { key: 'Escape' });
       clock.runAll();
 
       expect(queryByRole('tooltip')).to.equal(null);
@@ -312,13 +316,13 @@ describe('<SpeedDial />', () => {
 
     it('considers arrow keys with the same initial orientation', async () => {
       await renderSpeedDial();
-      await act(async () => fireEvent.keyDown(fabButton, { key: 'left' }));
+      fireEvent.keyDown(fabButton, { key: 'left' });
       expect(isActionFocused(0)).to.equal(true);
-      await act(async () => fireEvent.keyDown(getActionButton(0), { key: 'up' }));
+      fireEvent.keyDown(getActionButton(0), { key: 'up' });
       expect(isActionFocused(0)).to.equal(true);
-      await act(async () => fireEvent.keyDown(getActionButton(0), { key: 'left' }));
+      fireEvent.keyDown(getActionButton(0), { key: 'left' });
       expect(isActionFocused(1)).to.equal(true);
-      await act(async () => fireEvent.keyDown(getActionButton(1), { key: 'right' }));
+      fireEvent.keyDown(getActionButton(1), { key: 'right' });
       expect(isActionFocused(0)).to.equal(true);
     });
 
@@ -333,7 +337,7 @@ describe('<SpeedDial />', () => {
 
           await renderSpeedDial(dialDirection);
 
-          await act(async () => fireEvent.keyDown(fabButton, { key: firstKey }));
+          fireEvent.keyDown(fabButton, { key: firstKey });
           expect(isActionFocused(firstFocusedAction)).to.equal(
             true,
             `focused action initial ${firstKey} should be ${firstFocusedAction}`,