Add back registering input tests

mui · Sep 18, 2023 · 098f825 · 098f825
1 parent 729de50
commit 098f825
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/packages/mui-material-next/src/FormControl/FormControl.test.js b/packages/mui-material-next/src/FormControl/FormControl.test.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { describeConformance, act, createRenderer } from 'test/utils';
+import { describeConformance, act, createRenderer, fireEvent } from 'test/utils';
 import FormControl, { formControlClasses as classes } from '@mui/material-next/FormControl';
 // TODO: replace with material-next/OutlinedInput
 import InputBase from '@mui/material-next/InputBase';
@@ -137,6 +137,65 @@ describe('<FormControl />', () => {
     });
   });
 
+  describe('registering input', () => {
+    it("should warn if more than one input is rendered regardless how it's nested", () => {
+      expect(() => {
+        render(
+          <FormControl>
+            <InputBase />
+            <div>
+              {/* should work regardless how it's nested */}
+              <InputBase />
+            </div>
+          </FormControl>,
+        );
+      }).toErrorDev([
+        'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.',
+        // React 18 Strict Effects run mount effects twice
+        React.version.startsWith('18') &&
+          'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.',
+      ]);
+    });
+
+    it('should not warn if only one input is rendered', () => {
+      expect(() => {
+        render(
+          <FormControl>
+            <InputBase />
+          </FormControl>,
+        );
+      }).not.toErrorDev();
+    });
+
+    it('should not warn when toggling between inputs', () => {
+      // this will ensure that deregistering was called during unmount
+      function ToggleFormInputs() {
+        const [flag, setFlag] = React.useState(true);
+
+        return (
+          <FormControl>
+            {flag ? (
+              <InputBase />
+            ) : (
+              // TODO: use material-next/Select
+              <Select native>
+                <option value="">empty</option>
+              </Select>
+            )}
+            <button type="button" onClick={() => setFlag(!flag)}>
+              toggle
+            </button>
+          </FormControl>
+        );
+      }
+
+      const { getByText } = render(<ToggleFormInputs />);
+      expect(() => {
+        fireEvent.click(getByText('toggle'));
+      }).not.toErrorDev();
+    });
+  });
+
   // TODO: needs Outlined|FilledInput + FormControl integrated
   // eslint-disable-next-line mocha/no-skipped-tests
   describe.skip('input', () => {

diff --git a/packages/mui-material-next/src/InputBase/InputBase.tsx b/packages/mui-material-next/src/InputBase/InputBase.tsx
@@ -509,7 +509,7 @@ const InputBase = React.forwardRef(function InputBase<
         {endAdornment}
         {renderSuffix
           ? renderSuffix({
-              // TODO: make sure ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled'] are all passed to renderSuffix
+              // TODO: make sure ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled'] are all passed to renderSuffix when integrating OutlinedInput
               ...muiFormControl,
               startAdornment,
             })