mui · aarongarciah · Jul 5, 2024 · Jun 18, 2024
diff --git a/docs/pages/joy-ui/api/tooltip.json b/docs/pages/joy-ui/api/tooltip.json
@@ -223,7 +223,7 @@
       "isGlobal": false
     }
   ],
-  "spread": true,
+  "spread": false,
   "themeDefaultProps": true,
   "muiName": "JoyTooltip",
   "forwardsRefTo": "HTMLButtonElement",

diff --git a/docs/pages/material-ui/api/switch.json b/docs/pages/material-ui/api/switch.json
@@ -133,7 +133,7 @@
       "isGlobal": false
     }
   ],
-  "spread": false,
+  "spread": true,
   "themeDefaultProps": false,
   "muiName": "MuiSwitch",
   "forwardsRefTo": "HTMLSpanElement",

diff --git a/packages/mui-base/test/describeConformanceUnstyled.tsx b/packages/mui-base/test/describeConformanceUnstyled.tsx
@@ -9,7 +9,6 @@ import {
   SlotTestingOptions,
   describeRef,
   randomStringValue,
-  testClassName,
   testComponentProp,
   testReactTestRenderer,
 } from '@mui-internal/test-utils';
@@ -266,6 +265,25 @@ function testSlotPropsProp(
   });
 }
 
+function testClassName(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+  it('applies the className to the root component', async () => {
+    const { render } = getOptions();
+
+    if (!render) {
+      throwMissingPropError('render');
+    }
+
+    const className = randomStringValue();
+    const testId = randomStringValue();
+
+    const { getByTestId } = await render(
+      React.cloneElement(element, { className, 'data-testid': testId }),
+    );
+
+    expect(getByTestId(testId)).to.have.class(className);
+  });
+}
+
 interface TestOwnerState {
   'data-testid'?: string;
 }

diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -632,9 +632,14 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     },
   });
 
-  const defaultRenderOption = (optionProps: any, option: unknown) => (
-    <SlotOption {...optionProps}>{getOptionLabel(option)}</SlotOption>
-  );
+  const defaultRenderOption = (optionProps: any, option: unknown) => {
+    const { key, ...rest } = optionProps;
+    return (
+      <SlotOption key={key} {...rest}>
+        {getOptionLabel(option)}
+      </SlotOption>
+    );
+  };
 
   const renderOption = renderOptionProp || defaultRenderOption;
 

diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx
@@ -31,12 +31,6 @@ describe('Joy <Menu />', () => {
         <DropdownContext.Provider value={testContext}>{node}</DropdownContext.Provider>,
       );
     },
-    wrapMount: (mount) => (node: React.ReactNode) => {
-      const wrapper = mount(
-        <DropdownContext.Provider value={testContext}>{node}</DropdownContext.Provider>,
-      );
-      return wrapper.childAt(0);
-    },
     ThemeProvider,
     muiName: 'JoyMenu',
     refInstanceof: window.HTMLUListElement,

diff --git a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx
@@ -22,12 +22,6 @@ describe('<MenuButton />', () => {
   describeConformance(<MenuButton />, () => ({
     classes,
     inheritComponent: 'button',
-    wrapMount: (mount) => (node: React.ReactNode) => {
-      const wrapper = mount(
-        <DropdownContext.Provider value={testContext}>{node}</DropdownContext.Provider>,
-      );
-      return wrapper.childAt(0);
-    },
     muiName: 'JoyMenuButton',
     refInstanceof: window.HTMLButtonElement,
     render: (node) => {

diff --git a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx
@@ -36,10 +36,6 @@ describe('Joy <MenuItem />', () => {
     classes,
     inheritComponent: ListItemButton,
     render: (node) => render(<MenuProvider value={testContext}>{node}</MenuProvider>),
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(<MenuProvider value={testContext}>{node}</MenuProvider>);
-      return wrapper.childAt(0);
-    },
     ThemeProvider,
     refInstanceof: window.HTMLLIElement,
     testComponentPropWith: 'a',

diff --git a/packages/mui-joy/src/Tab/Tab.test.tsx b/packages/mui-joy/src/Tab/Tab.test.tsx
@@ -32,7 +32,6 @@ describe('Joy <Tab />', () => {
     classes,
     inheritComponent: 'button',
     render: (node) => render(<TabsProvider defaultValue={0}>{node}</TabsProvider>),
-    wrapMount: (mount) => (node) => mount(<TabsProvider defaultValue={0}>{node}</TabsProvider>),
     ThemeProvider,
     muiName: 'JoyTab',
     refInstanceof: window.HTMLButtonElement,

diff --git a/packages/mui-joy/src/TabList/TabList.test.tsx b/packages/mui-joy/src/TabList/TabList.test.tsx
@@ -21,7 +21,6 @@ describe('Joy <TabList />', () => {
     classes,
     inheritComponent: 'div',
     render: (node) => render(<TabsProvider defaultValue={0}>{node}</TabsProvider>),
-    wrapMount: (mount) => (node) => mount(<TabsProvider defaultValue={0}>{node}</TabsProvider>),
     ThemeProvider,
     muiName: 'JoyTabList',
     refInstanceof: window.HTMLDivElement,

diff --git a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx
@@ -20,7 +20,6 @@ describe('Joy <TabPanel />', () => {
     classes,
     inheritComponent: 'div',
     render: (node) => render(<TabsProvider defaultValue={0}>{node}</TabsProvider>),
-    wrapMount: (mount) => (node) => mount(<TabsProvider defaultValue={0}>{node}</TabsProvider>),
     ThemeProvider,
     muiName: 'JoyTabPanel',
     refInstanceof: window.HTMLDivElement,

diff --git a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx
@@ -52,6 +52,12 @@ describe('<Tooltip />', () => {
         'themeVariants',
         // react-transition-group issue
         'reactTestRenderer',
+        // Props are spread to root and children
+        // We cannot use the standard propsSpread test which relies on data-testid only on the root
+        'propsSpread',
+        // Props are spread to root and children
+        // We cannot use the standard mergeClassName test which relies on data-testid only on the root
+        'mergeClassName',
       ],
     }),
   );

diff --git a/packages/mui-lab/src/TabList/TabList.test.js b/packages/mui-lab/src/TabList/TabList.test.js
@@ -19,10 +19,6 @@ describe('<TabList />', () => {
      * @param {React.ReactNode} node
      */
     render: (node) => render(<TabContext value="0">{node}</TabContext>),
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(<TabContext value="0">{node}</TabContext>);
-      return wrapper.childAt(0);
-    },
     refInstanceof: window.HTMLDivElement,
     // TODO: no idea why reactTestRenderer fails
     skip: [

diff --git a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx
@@ -12,7 +12,6 @@ describe('<TabPanel />', () => {
     classes,
     inheritComponent: 'div',
     render: (node) => render(<TabContext value="0">{node}</TabContext>),
-    wrapMount: (mount) => (node) => mount(<TabContext value="0">{node}</TabContext>),
     refInstanceof: window.HTMLDivElement,
     muiName: 'MuiTabPanel',
     skip: [

diff --git a/packages/mui-material/src/Fade/Fade.test.js b/packages/mui-material/src/Fade/Fade.test.js
@@ -16,6 +16,7 @@ describe('<Fade />', () => {
   };
 
   describeConformance(<Fade {...defaultProps} />, () => ({
+    render,
     classes: {},
     inheritComponent: Transition,
     refInstanceof: window.HTMLDivElement,

diff --git a/packages/mui-material/src/Grow/Grow.test.js b/packages/mui-material/src/Grow/Grow.test.js
@@ -17,10 +17,11 @@ describe('<Grow />', () => {
   };
 
   describeConformance(
-    <Grow in>
+    <Grow in appear={false}>
       <div />
     </Grow>,
     () => ({
+      render,
       classes: {},
       inheritComponent: Transition,
       refInstanceof: window.HTMLDivElement,

diff --git a/packages/mui-material/src/MenuList/MenuList.test.js b/packages/mui-material/src/MenuList/MenuList.test.js
@@ -23,6 +23,7 @@ describe('<MenuList />', () => {
   const { render } = createRenderer();
 
   describeConformance(<MenuList />, () => ({
+    render,
     classes: {},
     inheritComponent: List,
     refInstanceof: window.HTMLUListElement,

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
@@ -11,6 +11,7 @@ describe('<NativeSelectInput />', () => {
   const { render } = createRenderer();
 
   describeConformance(<NativeSelectInput IconComponent="div" />, () => ({
+    render,
     only: ['refForwarding'],
     refInstanceof: window.HTMLSelectElement,
     muiName: 'MuiNativeSelectInput',

diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.test.js b/packages/mui-material/src/RadioGroup/RadioGroup.test.js
@@ -12,6 +12,7 @@ describe('<RadioGroup />', () => {
   const { render } = createRenderer();
 
   describeConformance(<RadioGroup value="" />, () => ({
+    render,
     classes: {},
     inheritComponent: FormGroup,
     refInstanceof: window.HTMLDivElement,

diff --git a/packages/mui-material/src/Slide/Slide.test.js b/packages/mui-material/src/Slide/Slide.test.js
@@ -23,6 +23,7 @@ describe('<Slide />', () => {
       <div />
     </Slide>,
     () => ({
+      render,
       classes: {},
       inheritComponent: Transition,
       refInstanceof: window.HTMLDivElement,

diff --git a/packages/mui-material/src/StepContent/StepContent.test.js b/packages/mui-material/src/StepContent/StepContent.test.js
@@ -13,22 +13,6 @@ describe('<StepContent />', () => {
   describeConformance(<StepContent />, () => ({
     classes,
     inheritComponent: 'div',
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(
-        <Stepper orientation="vertical">
-          <Step>{node}</Step>
-        </Stepper>,
-      );
-      // `wrapper.find(Step)` tree.
-      // "->" indicates the path we want
-      // "n:" indicates the index
-      // <ForwardRef(Step)>
-      // ->   0: <MuiStepRoot>
-      //        0: <Noop /> // from Emotion
-      // ->     1: <div className="MuiStep-root">
-      // ->       0: <MuiStepContentRoot />
-      return wrapper.find(Step).childAt(0).childAt(1).childAt(0);
-    },
     muiName: 'MuiStepContent',
     refInstanceof: window.HTMLDivElement,
     render: (node) => {

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -63,6 +63,7 @@ describe('<SwipeableDrawer />', () => {
   const { render } = createRenderer({ clock: 'fake' });
 
   describeConformance(<SwipeableDrawer onOpen={() => {}} onClose={() => {}} open />, () => ({
+    render,
     classes: {},
     inheritComponent: Drawer,
     refInstanceof: window.HTMLDivElement,

diff --git a/packages/mui-material/src/Switch/Switch.test.js b/packages/mui-material/src/Switch/Switch.test.js
@@ -17,7 +17,16 @@ describe('<Switch />', () => {
       { slotName: 'input', slotClassName: classes.input },
     ],
     refInstanceof: window.HTMLSpanElement,
-    skip: ['componentProp', 'componentsProp', 'propsSpread', 'themeDefaultProps', 'themeVariants'],
+    skip: [
+      'componentProp',
+      'componentsProp',
+      'themeDefaultProps',
+      'themeVariants',
+      // Props are spread to the root's child but className is added to the root
+      // We cannot use the standard mergeClassName test which relies on data-testid on the root
+      // We should fix this when refactoring with Base UI
+      'mergeClassName',
+    ],
   }));
 
   describe('styleSheet', () => {
@@ -142,4 +151,12 @@ describe('<Switch />', () => {
       });
     });
   });
+
+  describe('mergeClassName', () => {
+    it('should merge the className', () => {
+      const { container } = render(<Switch className="test-class-name" />);
+
+      expect(container.firstChild).to.have.class('test-class-name');
+    });
+  });
 });
diff --git a/packages/mui-material/src/TableBody/TableBody.test.js b/packages/mui-material/src/TableBody/TableBody.test.js
@@ -15,10 +15,6 @@ describe('<TableBody />', () => {
   describeConformance(<TableBody />, () => ({
     classes,
     inheritComponent: 'tbody',
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(<table>{node}</table>);
-      return wrapper.find('table').childAt(0);
-    },
     render: (node) => {
       const { container, ...other } = render(<table>{node}</table>);
       return { container: container.firstChild, ...other };

diff --git a/packages/mui-material/src/TableCell/TableCell.test.js b/packages/mui-material/src/TableCell/TableCell.test.js
@@ -32,16 +32,6 @@ describe('<TableCell />', () => {
       );
       return { container: container.firstChild.firstChild.firstChild, ...other };
     },
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(
-        <table>
-          <tbody>
-            <tr>{node}</tr>
-          </tbody>
-        </table>,
-      );
-      return wrapper.find('tr').childAt(0);
-    },
     muiName: 'MuiTableCell',
     testVariantProps: { variant: 'body' },
     refInstanceof: window.HTMLTableCellElement,

diff --git a/packages/mui-material/src/TableFooter/TableFooter.test.js b/packages/mui-material/src/TableFooter/TableFooter.test.js
@@ -19,10 +19,6 @@ describe('<TableFooter />', () => {
       const { container, ...other } = render(<table>{node}</table>);
       return { container: container.firstChild, ...other };
     },
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(<table>{node}</table>);
-      return wrapper.find('table').childAt(0);
-    },
     muiName: 'MuiTableFooter',
     testVariantProps: { variant: 'foo' },
     refInstanceof: window.HTMLTableSectionElement,

diff --git a/packages/mui-material/src/TableHead/TableHead.test.js b/packages/mui-material/src/TableHead/TableHead.test.js
@@ -14,10 +14,6 @@ describe('<TableHead />', () => {
   describeConformance(<TableHead />, () => ({
     classes,
     inheritComponent: 'thead',
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(<table>{node}</table>);
-      return wrapper.find('table').childAt(0);
-    },
     render: (node) => {
       const { container, ...other } = render(<table>{node}</table>);
       return { container: container.firstChild, ...other };

diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
@@ -45,16 +45,6 @@ describe('<TablePagination />', () => {
         );
         return { container: container.firstChild.firstChild.firstChild, ...other };
       },
-      wrapMount: (mount) => (node) => {
-        const wrapper = mount(
-          <table>
-            <tbody>
-              <tr>{node}</tr>
-            </tbody>
-          </table>,
-        );
-        return wrapper.find('tr').childAt(0);
-      },
       muiName: 'MuiTablePagination',
       refInstanceof: window.HTMLTableCellElement,
       testComponentPropWith: 'td',

diff --git a/packages/mui-material/src/TableRow/TableRow.test.js b/packages/mui-material/src/TableRow/TableRow.test.js
@@ -26,14 +26,6 @@ describe('<TableRow />', () => {
       );
       return { container: container.firstChild.firstChild, ...other };
     },
-    wrapMount: (mount) => (node) => {
-      const wrapper = mount(
-        <table>
-          <tbody>{node}</tbody>
-        </table>,
-      );
-      return wrapper.find('tbody').childAt(0);
-    },
     muiName: 'MuiTableRow',
     testVariantProps: { variant: 'foo' },
     refInstanceof: window.HTMLTableRowElement,

diff --git a/packages/mui-material/src/Zoom/Zoom.test.js b/packages/mui-material/src/Zoom/Zoom.test.js
@@ -15,6 +15,7 @@ describe('<Zoom />', () => {
       <div />
     </Zoom>,
     () => ({
+      render,
       classes: {},
       inheritComponent: Transition,
       refInstanceof: window.HTMLDivElement,