[core] ESLint fixes for tests (#34924)

Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
mui · Nov 9, 2022 · acc033c · acc033c
1 parent a54733a
commit acc033c
Show file tree

Hide file tree

Showing 100 changed files with 1,210 additions and 946 deletions.
diff --git a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js
@@ -254,9 +254,7 @@ export default function MaterialUIComponents() {
                     Support in MUI X
                   </Link>
                 ) : null}
-                {component.materialUI === 'Composable' ? (
-                  <React.Fragment>{'Composable'}</React.Fragment>
-                ) : null}
+                {component.materialUI === 'Composable' ? 'Composable' : null}
                 {component.materialUI == null ? '❌ No support' : null}
               </TableCell>
             </TableRow>

diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js
@@ -8,7 +8,7 @@ describe('useAutocomplete', () => {
   const { render } = createRenderer();
 
   it('should preserve DOM nodes of options when re-ordering', () => {
-    const Test = (props) => {
+    function Test(props) {
       const { options } = props;
       const {
         groupedOptions,
@@ -37,7 +37,7 @@ describe('useAutocomplete', () => {
           ) : null}
         </div>
       );
-    };
+    }
 
     const { rerender } = render(<Test options={['foo', 'bar']} />);
     const [fooOptionAsFirst, barOptionAsSecond] = screen.getAllByRole('option');
@@ -235,7 +235,7 @@ describe('useAutocomplete', () => {
       this.skip();
     }
 
-    const Test = (props) => {
+    function Test(props) {
       const { options } = props;
       const {
         groupedOptions,
@@ -263,7 +263,7 @@ describe('useAutocomplete', () => {
           ) : null}
         </div>
       );
-    };
+    }
 
     const node16ErrorMessage =
       "Error: Uncaught [TypeError: Cannot read properties of null (reading 'removeAttribute')]";
@@ -299,12 +299,12 @@ describe('useAutocomplete', () => {
 
   describe('prop: freeSolo', () => {
     it('should not reset if the component value does not change on blur', () => {
-      const Test = (props) => {
+      function Test(props) {
         const { options } = props;
         const { getInputProps } = useAutocomplete({ options, open: true, freeSolo: true });
 
         return <input {...getInputProps()} />;
-      };
+      }
       render(<Test options={['foo', 'bar']} />);
       const input = screen.getByRole('combobox');
 
@@ -318,7 +318,7 @@ describe('useAutocomplete', () => {
   });
 
   it('should allow tuples or arrays as value when multiple=false', () => {
-    const Test = () => {
+    function Test() {
       const defaultValue = ['bar'];
 
       const { getClearProps, getInputProps } = useAutocomplete({
@@ -341,7 +341,7 @@ describe('useAutocomplete', () => {
           <button data-testid="button" {...getClearProps()} />;
         </div>
       );
-    };
+    }
 
     const { getByTestId } = render(<Test />);
 

diff --git a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx
@@ -24,7 +24,10 @@ const Badge = React.forwardRef(function Badge(
 const styledBadge = <BadgeUnstyled slots={{ root: Root, badge: Badge }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>

diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
@@ -24,7 +24,10 @@ function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
 }
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>

diff --git a/packages/mui-base/src/ButtonUnstyled/useButton.test.tsx b/packages/mui-base/src/ButtonUnstyled/useButton.test.tsx
@@ -10,12 +10,12 @@ describe('useButton', () => {
   describe('state: active', () => {
     describe('when using a button element', () => {
       it('is set when triggered by mouse', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <button {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -26,12 +26,12 @@ describe('useButton', () => {
       });
 
       it('is set when triggered by keyboard', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <button {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -45,12 +45,12 @@ describe('useButton', () => {
 
     describe('when using a span element', () => {
       it('is set when triggered by mouse', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <span {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -61,12 +61,12 @@ describe('useButton', () => {
       });
 
       it('is set when triggered by keyboard', () => {
-        const TestComponent = () => {
+        function TestComponent() {
           const buttonRef = React.useRef(null);
           const { active, getRootProps } = useButton({ ref: buttonRef });
 
           return <span {...getRootProps()} className={active ? 'active' : ''} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         const button = getByRole('button');
@@ -84,11 +84,11 @@ describe('useButton', () => {
       }
 
       it('calls them when provided in props', () => {
-        const TestComponent = (props: WithClickHandler) => {
+        function TestComponent(props: WithClickHandler) {
           const ref = React.useRef(null);
           const { getRootProps } = useButton({ ...props, ref });
           return <button {...getRootProps()} />;
-        };
+        }
 
         const handleClick = spy();
 
@@ -101,11 +101,11 @@ describe('useButton', () => {
       it('calls them when provided in getRootProps()', () => {
         const handleClick = spy();
 
-        const TestComponent = () => {
+        function TestComponent() {
           const ref = React.useRef(null);
           const { getRootProps } = useButton({ ref });
           return <button {...getRootProps({ onClick: handleClick })} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent />);
         fireEvent.click(getByRole('button'));
@@ -117,11 +117,11 @@ describe('useButton', () => {
         const handleClickExternal = spy();
         const handleClickInternal = spy();
 
-        const TestComponent = (props: WithClickHandler) => {
+        function TestComponent(props: WithClickHandler) {
           const ref = React.useRef(null);
           const { getRootProps } = useButton({ ...props, ref });
           return <button {...getRootProps({ onClick: handleClickInternal })} />;
-        };
+        }
 
         const { getByRole } = render(<TestComponent onClick={handleClickExternal} />);
         fireEvent.click(getByRole('button'));

diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.test.js b/packages/mui-base/src/FocusTrap/FocusTrap.test.js
@@ -368,16 +368,18 @@ describe('<FocusTrap />', () => {
       });
 
       it('should restore the focus', () => {
-        const Test = (props) => (
-          <div>
-            <input data-testid="outside-input" />
-            <FocusTrap open disableAutoFocus {...props}>
-              <div tabIndex={-1} data-testid="root">
-                <input data-testid="focus-input" />
-              </div>
-            </FocusTrap>
-          </div>
-        );
+        function Test(props) {
+          return (
+            <div>
+              <input data-testid="outside-input" />
+              <FocusTrap open disableAutoFocus {...props}>
+                <div tabIndex={-1} data-testid="root">
+                  <input data-testid="focus-input" />
+                </div>
+              </FocusTrap>
+            </div>
+          );
+        }
 
         const { setProps } = render(<Test />);
 

diff --git a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.spec.tsx b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.spec.tsx
@@ -3,37 +3,42 @@ import FormControlUnstyled from '@mui/base/FormControlUnstyled';
 import { expectType } from '@mui/types';
 import { FormControlUnstyledRootSlotProps } from './FormControlUnstyled.types';
 
-const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
-
-const FormControlUnstyledTest = () => (
-  <div>
-    <FormControlUnstyled required />
-    {/* @ts-expect-error */}
-    <FormControlUnstyled invalidProp={0} />
-
-    <FormControlUnstyled component="a" href="#" />
-
-    <FormControlUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
-    {/* @ts-expect-error */}
-    <FormControlUnstyled component={CustomComponent} />
-
-    <FormControlUnstyled
-      component="button"
-      onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
-    />
-
-    <FormControlUnstyled<'button'>
-      component="button"
-      ref={(elem) => {
-        expectType<HTMLButtonElement | null, typeof elem>(elem);
-      }}
-      onClick={(e) => {
-        expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
-        e.currentTarget.checkValidity();
-      }}
-    />
-  </div>
-);
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+function FormControlUnstyledTest() {
+  return (
+    <div>
+      <FormControlUnstyled required />
+      {/* @ts-expect-error */}
+      <FormControlUnstyled invalidProp={0} />
+
+      <FormControlUnstyled component="a" href="#" />
+
+      <FormControlUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error */}
+      <FormControlUnstyled component={CustomComponent} />
+
+      <FormControlUnstyled
+        component="button"
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
+      />
+
+      <FormControlUnstyled<'button'>
+        component="button"
+        ref={(elem) => {
+          expectType<HTMLButtonElement | null, typeof elem>(elem);
+        }}
+        onClick={(e) => {
+          expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
+          e.currentTarget.checkValidity();
+        }}
+      />
+    </div>
+  );
+}
 
 function Root(props: FormControlUnstyledRootSlotProps) {
   const { ownerState, children, ...other } = props;

diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx b/packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx
@@ -24,7 +24,10 @@ const InputInput = React.forwardRef(function InputInput(
 const styledInput = <InputUnstyled slots={{ root: InputRoot, input: InputInput }} />;
 
 const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
+  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+    function CustomComponent() {
+      return <div />;
+    };
 
   return (
     <div>

diff --git a/packages/mui-base/src/ListboxUnstyled/useControllableReducer.test.tsx b/packages/mui-base/src/ListboxUnstyled/useControllableReducer.test.tsx
@@ -21,7 +21,7 @@ describe('useControllableReducer', () => {
       });
 
       const actionToDispatch = { type: ActionTypes.setValue as const, value: 'b', event: null };
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -35,7 +35,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(reducer, undefined, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(reducer.getCalls()[0].args[1]).to.equal(actionToDispatch);
@@ -53,7 +53,7 @@ describe('useControllableReducer', () => {
       });
 
       const actionToDispatch = { type: ActionTypes.setValue as const, value: 'b', event: null };
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -67,7 +67,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(internalReducer, externalReducer, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(internalReducer.notCalled).to.equal(true);
@@ -86,7 +86,7 @@ describe('useControllableReducer', () => {
       const handleChange = spy();
       const handleHighlightChange = spy();
 
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -102,7 +102,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(reducer, undefined, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(handleChange.getCalls()[0].args[1]).to.equal('b');
@@ -125,7 +125,7 @@ describe('useControllableReducer', () => {
       const handleChange = spy();
       const handleHighlightChange = spy();
 
-      const TestComponent = () => {
+      function TestComponent() {
         const props: UseListboxPropsWithDefaults<string> = {
           options: ['a', 'b', 'c'],
           defaultValue: 'a',
@@ -141,7 +141,7 @@ describe('useControllableReducer', () => {
         const [, dispatch] = useControllableReducer(reducer, undefined, props);
         React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
         return null;
-      };
+      }
 
       render(<TestComponent />);
       expect(handleHighlightChange.getCalls()[0].args[1]).to.equal('b');