Convert test to TS

Author: mj12albert

packages/mui-material-next/src/FormControl/FormControl.test.js renamed to packages/mui-material-next/src/FormControl/FormControl.test.tsx

@@ -2,18 +2,22 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { describeConformance, act, createRenderer, fireEvent } from 'test/utils';
-import FormControl, { formControlClasses as classes } from '@mui/material-next/FormControl';
+import FormControl, {
+  formControlClasses as classes,
+  FormControlClasses,
+} from '@mui/material-next/FormControl';
 // TODO v6: replace with material-next/FilledInput
 import InputBase from '@mui/material-next/InputBase';
 import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
 // TODO v6: replace with material-next/Select
 import Select from '@mui/material/Select';
+import { FormControlContextValue } from './FormControlContext';
 import useFormControl from './useFormControl';
 
 describe('<FormControl />', () => {
   const { render } = createRenderer();
 
-  function TestComponent(props) {
+  function TestComponent(props: { contextCallback: (context?: FormControlContextValue) => void }) {
     const context = useFormControl();
     React.useEffect(() => {
       props.contextCallback(context);
@@ -47,15 +51,19 @@ describe('<FormControl />', () => {
       const root = container.firstChild;
 
       expect(root).not.to.have.class(classes.marginNormal);
-      expect(root).not.to.have.class(classes.sizeSmall);
+      expect(root).not.to.have.class(
+        (classes as FormControlClasses & { sizeSmall: string }).sizeSmall,
+      );
     });
 
     it('can have the margin normal class', () => {
       const { container } = render(<FormControl margin="normal" />);
       const root = container.firstChild;
 
       expect(root).to.have.class(classes.marginNormal);
-      expect(root).not.to.have.class(classes.sizeSmall);
+      expect(root).not.to.have.class(
+        (classes as FormControlClasses & { sizeSmall: string }).sizeSmall,
+      );
     });
 
     it('can have the margin dense class', () => {
@@ -106,7 +114,7 @@ describe('<FormControl />', () => {
       expect(readContext.args[0][0]).to.have.property('focused', false);
 
       act(() => {
-        container.querySelector('input').focus();
+        container.querySelector('input')?.focus();
       });
       expect(readContext.lastCall.args[0]).to.have.property('focused', true);
 
@@ -126,7 +134,7 @@ describe('<FormControl />', () => {
       );
 
       expect(readContext.args[0][0]).to.have.property('focused', true);
-      container.querySelector('input').blur();
+      container.querySelector('input')?.blur();
       expect(readContext.args[0][0]).to.have.property('focused', true);
     });
 
@@ -216,12 +224,12 @@ describe('<FormControl />', () => {
       expect(readContext.args[0][0]).to.have.property('filled', true);
     });
 
-    it('should be filled when a value is set through inputProps', () => {
+    it('should be filled when a value is set through slotProps', () => {
       const readContext = spy();
       render(
         <FormControl>
           {/* TODO v6: use material-next/FilledInput */}
-          <InputBase inputProps={{ value: 'bar' }} />
+          <InputBase slotProps={{ input: { value: 'bar' } }} />
           <TestComponent contextCallback={readContext} />
         </FormControl>,
       );
@@ -287,7 +295,7 @@ describe('<FormControl />', () => {
           <TestComponent contextCallback={readContext} />
         </FormControl>,
       );
-      expect(readContext.args[0][0].adornedStart, true);
+      expect(readContext.args[0][0].adornedStart, 'true');
     });
   });
 
@@ -348,22 +356,29 @@ describe('<FormControl />', () => {
       });
     });
 
+    type FormControlledComponent = {
+      onFilled: () => {};
+      onEmpty: () => {};
+      onFocus: () => {};
+      onBlur: () => {};
+    };
+
     describe('callbacks', () => {
       describe('onFilled', () => {
         it('should set the filled state', () => {
-          const formControlRef = React.createRef();
+          const formControlRef = React.createRef<FormControlledComponent>();
           render(<FormControlled ref={formControlRef} />);
 
           expect(formControlRef.current).to.have.property('filled', false);
 
           act(() => {
-            formControlRef.current.onFilled();
+            formControlRef.current?.onFilled();
           });
 
           expect(formControlRef.current).to.have.property('filled', true);
 
           act(() => {
-            formControlRef.current.onFilled();
+            formControlRef.current?.onFilled();
           });
 
           expect(formControlRef.current).to.have.property('filled', true);
@@ -372,23 +387,23 @@ describe('<FormControl />', () => {
 
       describe('onEmpty', () => {
         it('should clean the filled state', () => {
-          const formControlRef = React.createRef();
+          const formControlRef = React.createRef<FormControlledComponent>();
           render(<FormControlled ref={formControlRef} />);
 
           act(() => {
-            formControlRef.current.onFilled();
+            formControlRef.current?.onFilled();
           });
 
           expect(formControlRef.current).to.have.property('filled', true);
 
           act(() => {
-            formControlRef.current.onEmpty();
+            formControlRef.current?.onEmpty();
           });
 
           expect(formControlRef.current).to.have.property('filled', false);
 
           act(() => {
-            formControlRef.current.onEmpty();
+            formControlRef.current?.onEmpty();
           });
 
           expect(formControlRef.current).to.have.property('filled', false);
@@ -397,18 +412,18 @@ describe('<FormControl />', () => {
 
       describe('handleFocus', () => {
         it('should set the focused state', () => {
-          const formControlRef = React.createRef();
+          const formControlRef = React.createRef<FormControlledComponent>();
           render(<FormControlled ref={formControlRef} />);
           expect(formControlRef.current).to.have.property('focused', false);
 
           act(() => {
-            formControlRef.current.onFocus();
+            formControlRef.current?.onFocus();
           });
 
           expect(formControlRef.current).to.have.property('focused', true);
 
           act(() => {
-            formControlRef.current.onFocus();
+            formControlRef.current?.onFocus();
           });
 
           expect(formControlRef.current).to.have.property('focused', true);
@@ -417,24 +432,24 @@ describe('<FormControl />', () => {
 
       describe('handleBlur', () => {
         it('should clear the focused state', () => {
-          const formControlRef = React.createRef();
+          const formControlRef = React.createRef<FormControlledComponent>();
           render(<FormControlled ref={formControlRef} />);
           expect(formControlRef.current).to.have.property('focused', false);
 
           act(() => {
-            formControlRef.current.onFocus();
+            formControlRef.current?.onFocus();
           });
 
           expect(formControlRef.current).to.have.property('focused', true);
 
           act(() => {
-            formControlRef.current.onBlur();
+            formControlRef.current?.onBlur();
           });
 
           expect(formControlRef.current).to.have.property('focused', false);
 
           act(() => {
-            formControlRef.current.onBlur();
+            formControlRef.current?.onBlur();
           });
 
           expect(formControlRef.current).to.have.property('focused', false);