git-diff hygene

packages/material-ui-lab/src/TreeItem/TreeItem.test.js

@@ -364,7 +364,6 @@ describe('<TreeItem />', () => {
         act(() => {
           getByTestId('two').focus();
         });
-
         expect(getByTestId('two')).toHaveVirtualFocus();
       });
 

packages/material-ui-utils/src/useIsFocusVisible.test.js

@@ -79,7 +79,7 @@ describe('focus-visible polyfill', () => {
       document.body.removeChild(rootElement);
     });
 
-    it('should set focus state for shadowRoot children', async () => {
+    it('should set focus state for shadowRoot children', () => {
       const buttonRef = React.createRef();
       render(
         <SimpleButton id="test-button" ref={buttonRef}>

packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { describeConformanceV5, createClientRender, fireEvent, screen } from 'test/utils';
+import { describeConformanceV5, createClientRender, screen } from 'test/utils';
 import Breadcrumbs, { breadcrumbsClasses as classes } from '@material-ui/core/Breadcrumbs';
+import { act } from 'react-dom/test-utils';
 
 describe('<Breadcrumbs />', () => {
   const render = createClientRender();
@@ -66,7 +67,9 @@ describe('<Breadcrumbs />', () => {
       </Breadcrumbs>,
     );
 
-    fireEvent.click(getByRole('button'));
+    act(() => {
+      getByRole('button').click();
+    });
 
     expect(document.activeElement).to.equal(getByText('first'));
     expect(getAllByRole('listitem', { hidden: false })).to.have.length(9);

packages/material-ui/src/Button/Button.test.js

@@ -313,7 +313,7 @@ describe('<Button />', () => {
     expect(button).to.have.class(classes.disableElevation);
   });
 
-  it('should have a focusRipple by default', async () => {
+  it('should have a focusRipple by default', () => {
     const { getByRole } = render(
       <Button TouchRippleProps={{ classes: { ripplePulsate: 'pulsate-focus-visible' } }}>
         Hello World
@@ -322,7 +322,7 @@ describe('<Button />', () => {
     const button = getByRole('button');
 
     fireEvent.keyDown(document.body, { key: 'TAB' });
-    await act(async () => {
+    act(() => {
       button.focus();
     });
 

packages/material-ui/src/ButtonBase/ButtonBase.test.js

@@ -253,7 +253,7 @@ describe('<ButtonBase />', () => {
 
   describe('ripple', () => {
     describe('interactions', () => {
-      it('should not have a focus ripple by default', async () => {
+      it('should not have a focus ripple by default', () => {
         const { getByRole } = render(
           <ButtonBase
             TouchRippleProps={{
@@ -574,7 +574,7 @@ describe('<ButtonBase />', () => {
   });
 
   describe('focusRipple', () => {
-    it('should pulsate the ripple when focusVisible', async () => {
+    it('should pulsate the ripple when focusVisible', () => {
       const { getByRole } = render(
         <ButtonBase
           focusRipple
@@ -593,7 +593,7 @@ describe('<ButtonBase />', () => {
       expect(button.querySelectorAll('.ripple-pulsate')).to.have.lengthOf(1);
     });
 
-    it('should not stop the ripple when the mouse leaves', async () => {
+    it('should not stop the ripple when the mouse leaves', () => {
       const { getByRole } = render(
         <ButtonBase
           focusRipple
@@ -613,7 +613,7 @@ describe('<ButtonBase />', () => {
       expect(button.querySelectorAll('.ripple-pulsate')).to.have.lengthOf(1);
     });
 
-    it('should stop pulsate and start a ripple when the space button is pressed', async () => {
+    it('should stop pulsate and start a ripple when the space button is pressed', () => {
       const { getByRole } = render(
         <ButtonBase
           focusRipple
@@ -636,7 +636,7 @@ describe('<ButtonBase />', () => {
       expect(button.querySelectorAll('.ripple-visible')).to.have.lengthOf(0);
     });
 
-    it('should stop and re-pulsate when space bar is released', async () => {
+    it('should stop and re-pulsate when space bar is released', () => {
       const { getByRole } = render(
         <ButtonBase
           focusRipple
@@ -661,7 +661,7 @@ describe('<ButtonBase />', () => {
       expect(button.querySelectorAll('.ripple-visible')).to.have.lengthOf(3);
     });
 
-    it('should stop on blur and set focusVisible to false', async () => {
+    it('should stop on blur and set focusVisible to false', () => {
       const { getByRole } = render(
         <ButtonBase
           focusRipple
@@ -677,8 +677,6 @@ describe('<ButtonBase />', () => {
       simulatePointerDevice();
       focusVisible(button);
 
-      expect(button.querySelectorAll('.ripple-visible .child-leaving')).to.have.lengthOf(0);
-
       act(() => {
         button.blur();
       });
@@ -702,7 +700,7 @@ describe('<ButtonBase />', () => {
       expect(getByText('Hello')).to.have.property('disabled', true);
     });
 
-    it('should reset the focused state', async () => {
+    it('should reset the focused state', () => {
       const { getByText, setProps } = render(<ButtonBase>Hello</ButtonBase>);
       const button = getByText('Hello');
       simulatePointerDevice();
@@ -770,7 +768,7 @@ describe('<ButtonBase />', () => {
       expect(onFocusSpy.callCount).to.equal(1);
     });
 
-    it('has a focus-visible polyfill', async () => {
+    it('has a focus-visible polyfill', () => {
       const { getByText } = render(<ButtonBase>Hello</ButtonBase>);
       const button = getByText('Hello');
       simulatePointerDevice();
@@ -790,7 +788,7 @@ describe('<ButtonBase />', () => {
       expect(button).to.have.class(classes.focusVisible);
     });
 
-    it('removes foucs-visible if focus is re-targetted', async () => {
+    it('removes foucs-visible if focus is re-targetted', () => {
       /**
        * @type {string[]}
        */
@@ -835,7 +833,7 @@ describe('<ButtonBase />', () => {
       expect(buttonBase).not.to.have.class(classes.focusVisible);
     });
 
-    it('onFocusVisibleHandler() should propagate call to onFocusVisible prop', async () => {
+    it('onFocusVisibleHandler() should propagate call to onFocusVisible prop', () => {
       const onFocusVisibleSpy = spy();
       const { getByRole } = render(
         <ButtonBase component="span" onFocusVisible={onFocusVisibleSpy}>
@@ -1100,7 +1098,7 @@ describe('<ButtonBase />', () => {
   });
 
   describe('prop: action', () => {
-    it('should be able to focus visible the button', async () => {
+    it('should be able to focus visible the button', () => {
       /**
        * @type {React.RefObject<import('./ButtonBase').ButtonBaseActions>}
        */

packages/material-ui/src/Chip/Chip.test.js

@@ -546,7 +546,7 @@ describe('<Chip />', () => {
   });
 
   describe('event: focus', () => {
-    it('has a focus-visible polyfill', async () => {
+    it('has a focus-visible polyfill', () => {
       const { container } = render(<Chip label="Test Chip" onClick={() => {}} />);
       const chip = container.querySelector(`.${classes.root}`);
       simulatePointerDevice();
@@ -566,7 +566,7 @@ describe('<Chip />', () => {
       expect(chip).to.have.class(classes.focusVisible);
     });
 
-    it('should reset the focused state', async () => {
+    it('should reset the focused state', () => {
       const { container, setProps } = render(<Chip label="Test Chip" onClick={() => {}} />);
       const chip = container.querySelector(`.${classes.root}`);
 

packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js

@@ -165,7 +165,7 @@ describe('<ClickAwayListener />', () => {
     });
 
     ['onClick', 'onClickCapture'].forEach((eventListenerName) => {
-      it(`should not be called when ${eventListenerName} mounted the listener`, async () => {
+      it(`should not be called when ${eventListenerName} mounted the listener`, () => {
         function Test() {
           const [open, setOpen] = React.useState(false);
 
@@ -191,7 +191,7 @@ describe('<ClickAwayListener />', () => {
       });
     });
 
-    it('should be called if an element is interleaved between mousedown and mouseup', async () => {
+    it('should be called if an element is interleaved between mousedown and mouseup', () => {
       /**
        * @param {Element} element
        * @returns {Element[]}
@@ -250,7 +250,6 @@ describe('<ClickAwayListener />', () => {
       const mouseDownTarget = screen.getByTestId('trigger');
 
       fireDiscreteEvent.mouseDown(mouseDownTarget);
-
       const mouseUpTarget = screen.getByTestId('interleaved-element');
       // https://w3c.github.io/uievents/#events-mouseevent-event-order
       const clickTarget = findNearestCommonAncestor(mouseDownTarget, mouseUpTarget);

packages/material-ui/src/Fab/Fab.test.js

@@ -98,7 +98,7 @@ describe('<Fab />', () => {
     expect(container.querySelector(`.${touchRippleClasses.root}`)).to.equal(null);
   });
 
-  it('should have a focusRipple by default', async () => {
+  it('should have a focusRipple by default', () => {
     const { getByRole } = render(
       <Fab
         TouchRippleProps={{
@@ -110,9 +110,8 @@ describe('<Fab />', () => {
     );
     const button = getByRole('button');
 
-    fireEvent.keyDown(document.body, { key: 'TAB' });
-
-    await act(async () => {
+    act(() => {
+      fireEvent.keyDown(document.body, { key: 'TAB' });
       button.focus();
     });
 
@@ -132,9 +131,8 @@ describe('<Fab />', () => {
     );
     const button = getByRole('button');
 
-    fireEvent.keyDown(document.body, { key: 'TAB' });
-
-    await act(async () => {
+    act(() => {
+      fireEvent.keyDown(document.body, { key: 'TAB' });
       button.focus();
     });
 

packages/material-ui/src/FormControl/FormControl.test.js

@@ -83,7 +83,7 @@ describe('<FormControl />', () => {
   });
 
   describe('prop: disabled', () => {
-    it('will be unfocused if it gets disabled', async () => {
+    it('will be unfocused if it gets disabled', () => {
       const readContext = spy();
       const { container, setProps } = render(
         <FormControl>
@@ -93,7 +93,7 @@ describe('<FormControl />', () => {
       );
       expect(readContext.args[0][0]).to.have.property('focused', false);
 
-      await act(() => {
+      act(() => {
         container.querySelector('input').focus();
       });
       expect(readContext.lastCall.args[0]).to.have.property('focused', true);

packages/material-ui/src/InputBase/InputBase.test.js

@@ -60,14 +60,14 @@ describe('<InputBase />', () => {
       expect(input).to.have.class(classes.disabled);
     });
 
-    it('should reset the focused state if getting disabled', async () => {
+    it('should reset the focused state if getting disabled', () => {
       const handleBlur = spy();
       const handleFocus = spy();
       const { container, setProps } = render(
         <InputBase onBlur={handleBlur} onFocus={handleFocus} />,
       );
 
-      await act(() => {
+      act(() => {
         container.querySelector('input').focus();
       });
       expect(handleFocus.callCount).to.equal(1);
@@ -360,7 +360,7 @@ describe('<InputBase />', () => {
     });
 
     describe('focused', () => {
-      it('prioritizes context focus', async () => {
+      it('prioritizes context focus', () => {
         const FormController = React.forwardRef((props, ref) => {
           const { onBlur, onFocus } = useFormControl();
 
@@ -376,7 +376,7 @@ describe('<InputBase />', () => {
           </FormControl>,
         );
 
-        await act(() => {
+        act(() => {
           getByRole('textbox').focus();
         });
         expect(getByTestId('root')).to.have.class(classes.focused);
@@ -394,7 +394,7 @@ describe('<InputBase />', () => {
         expect(getByTestId('root')).to.have.class(classes.focused);
       });
 
-      it('propagates focused state', async () => {
+      it('propagates focused state', () => {
         function FocusedStateLabel(props) {
           const { focused } = useFormControl();
           return <label {...props}>focused: {String(focused)}</label>;
@@ -407,12 +407,12 @@ describe('<InputBase />', () => {
         );
         expect(getByTestId('label')).to.have.text('focused: false');
 
-        await act(() => {
+        act(() => {
           getByRole('textbox').focus();
         });
         expect(getByTestId('label')).to.have.text('focused: true');
 
-        await act(() => {
+        act(() => {
           getByRole('textbox').blur();
         });
         expect(getByTestId('label')).to.have.text('focused: false');

packages/material-ui/src/InputLabel/InputLabel.test.js

@@ -81,7 +81,7 @@ describe('<InputLabel />', () => {
     });
 
     describe('focused', () => {
-      it('applies a shrink class that can be controlled by props', async () => {
+      it('applies a shrink class that can be controlled by props', () => {
         function Wrapper({ children }) {
           return (
             <FormControl>
@@ -95,7 +95,7 @@ describe('<InputLabel />', () => {
         const { container, getByTestId, setProps } = render(<InputLabel data-testid="root" />, {
           wrapper: Wrapper,
         });
-        await act(() => {
+        act(() => {
           container.querySelector('input').focus();
         });
 

packages/material-ui/src/Link/Link.test.js

@@ -68,7 +68,7 @@ describe('<Link />', () => {
   });
 
   describe('keyboard focus', () => {
-    it('should add the focusVisible class when focused', async () => {
+    it('should add the focusVisible class when focused', () => {
       const { container } = render(<Link href="/">Home</Link>);
       const anchor = container.querySelector('a');
 

packages/material-ui/src/ListItem/ListItem.test.js

@@ -192,15 +192,14 @@ describe('<ListItem />', () => {
 
   // TODO remove in v6 in favor of ListItemButton
   describe('prop: focusVisibleClassName', () => {
-    it('should merge the class names', async () => {
+    it('should merge the class names', () => {
       const { getByRole } = render(
         <ListItem button focusVisibleClassName="focusVisibleClassName" />,
       );
       const button = getByRole('button');
 
-      fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
-
-      await act(async () => {
+      act(() => {
+        fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
         button.focus();
       });
 

packages/material-ui/src/ListItemButton/ListItemButton.test.js

@@ -53,15 +53,14 @@ describe('<ListItemButton />', () => {
   });
 
   describe('prop: focusVisibleClassName', () => {
-    it('should merge the class names', async () => {
+    it('should merge the class names', () => {
       const { getByRole } = render(
         <ListItemButton focusVisibleClassName="focusVisibleClassName" />,
       );
       const button = getByRole('button');
 
-      fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
-
-      await act(async () => {
+      act(() => {
+        fireEvent.keyDown(document.activeElement || document.body, { key: 'Tab' });
         button.focus();
       });
 

packages/material-ui/src/Rating/Rating.test.js

@@ -101,14 +101,14 @@ describe('<Rating />', () => {
     expect(checked.value).to.equal('2');
   });
 
-  it('has a customization point for the label of the empty value when it is active', async () => {
+  it('has a customization point for the label of the empty value when it is active', () => {
     const { container } = render(
       <Rating classes={{ labelEmptyValueActive: 'customized' }} name="" value={null} />,
     );
 
     expect(container.querySelector('.customized')).to.equal(null);
 
-    await act(() => {
+    act(() => {
       const noValueRadio = screen.getAllByRole('radio').find((radio) => {
         return radio.checked;
       });