[test] Test all Base components with describeConformanceUnstyled

docs/pages/base/api/modal-unstyled.json

@@ -38,7 +38,7 @@
     "globalClasses": { "root": "MuiModal-root", "hidden": "MuiModal-hidden" },
     "name": null
   },
-  "spread": false,
+  "spread": true,
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js",
   "inheritance": null,

docs/pages/base/api/popper-unstyled.json

@@ -48,7 +48,7 @@
   },
   "name": "PopperUnstyled",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
-  "spread": false,
+  "spread": true,
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js",
   "inheritance": null,

docs/pages/base/api/textarea-autosize.json

@@ -8,7 +8,7 @@
   },
   "name": "TextareaAutosize",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
-  "spread": true,
+  "spread": false,
   "forwardsRefTo": "HTMLTextAreaElement",
   "filename": "/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js",
   "inheritance": null,

packages/mui-base/src/ModalUnstyled/ModalUnstyled.js

@@ -55,7 +55,7 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(props, ref) {
     children,
     classes: classesProp,
     closeAfterTransition = false,
-    component = 'div',
+    component,
     container,
     disableAutoFocus = false,
     disableEnforceFocus = false,
@@ -235,7 +235,7 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(props, ref) {
     childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
   }
 
-  const Root = slots.root || component;
+  const Root = component ?? slots.root ?? 'div';
   const rootProps = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,

packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js

@@ -21,20 +21,16 @@ describe('<ModalUnstyled />', () => {
       <div />
     </ModalUnstyled>,
     () => ({
-      classes,
       inheritComponent: 'div',
       render,
       mount,
       refInstanceof: window.HTMLDivElement,
       slots: {
         root: {
           expectedClassName: classes.root,
-          testWithElement: null,
         },
       },
       skip: [
-        'propsSpread',
-        'slotsProp',
         'reactTestRenderer', // portal https://github.com/facebook/react/issues/11565
       ],
     }),

packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js

@@ -19,10 +19,6 @@ describe('<PopperUnstyled />', () => {
     mount,
     refInstanceof: window.HTMLDivElement,
     skip: [
-      'themeDefaultProps',
-      'themeStyleOverrides',
-      'themeVariants',
-      'propsSpread',
       // https://github.com/facebook/react/issues/11565
       'reactTestRenderer',
     ],

packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx

@@ -34,7 +34,6 @@ describe('<TabPanelUnstyled />', () => {
         expectedClassName: tabPanelUnstyledClasses.root,
       },
     },
-
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
     ],

packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx

@@ -34,7 +34,6 @@ describe('<TabUnstyled />', () => {
         expectedClassName: tabUnstyledClasses.root,
       },
     },
-
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
     ],

packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx

@@ -34,7 +34,6 @@ describe('<TabsListUnstyled />', () => {
         expectedClassName: tabsListUnstyledClasses.root,
       },
     },
-
     skip: [
       'reactTestRenderer', // Need to be wrapped with TabsContext
     ],

packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { expect } from 'chai';
 import sinon, { spy, stub } from 'sinon';
 import {
-  describeConformance,
+  describeConformanceUnstyled,
   act,
+  createMount,
   createRenderer,
   fireEvent,
   strictModeDoubleLoggingSupressed,
@@ -12,17 +13,23 @@ import TextareaAutosize from '@mui/base/TextareaAutosize';
 
 describe('<TextareaAutosize />', () => {
   const { clock, render } = createRenderer();
+  const mount = createMount;
 
-  describeConformance(<TextareaAutosize />, () => ({
+  describeConformanceUnstyled(<TextareaAutosize />, () => ({
+    render,
+    mount,
     inheritComponent: 'textarea',
     refInstanceof: window.HTMLTextAreaElement,
+    slots: {},
     skip: [
-      'rootClass',
+      // doesn't have slots, so these tests are irrelevant:
       'componentProp',
-      'componentsProp',
-      'themeDefaultProps',
-      'themeStyleOverrides',
-      'themeVariants',
+      'mergeClassName',
+      'ownerStatePropagation',
+      'propsSpread',
+      'refForwarding',
+      'rootClass',
+      'slotsProp',
     ],
   }));
 

test/utils/describeConformanceUnstyled.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { MuiRenderResult, RenderOptions } from './createRenderer';
+import { MuiRenderResult, RenderOptions, screen } from './createRenderer';
 import {
   ConformanceOptions,
   describeRef,
@@ -46,7 +46,6 @@ interface WithCustomProp {
 
 interface WithOwnerState {
   ownerState: Record<string, any>;
-  expectedOwnerState: Record<string, any>;
 }
 
 function forEachSlot(
@@ -76,7 +75,7 @@ function testPropForwarding(
     const CustomRoot = React.forwardRef(
       ({ fooBar, lang }: WithCustomProp, ref: React.ForwardedRef<any>) => {
         // @ts-ignore
-        return <Element ref={ref} data-foobar={fooBar} lang={lang} />;
+        return <Element ref={ref} data-foobar={fooBar} lang={lang} data-testid="custom-root" />;
       },
     );
 
@@ -85,26 +84,25 @@ function testPropForwarding(
       fooBar: randomStringValue(),
     };
 
-    const { container } = render(
-      React.cloneElement(element, { slots: { root: CustomRoot }, ...otherProps }),
-    );
+    render(React.cloneElement(element, { slots: { root: CustomRoot }, ...otherProps }));
 
-    expect(container.firstChild).to.have.attribute('lang', otherProps.lang);
-    expect(container.firstChild).to.have.attribute('data-foobar', otherProps.fooBar);
+    const customRoot = screen.getByTestId('custom-root');
+    expect(customRoot).to.have.attribute('lang', otherProps.lang);
+    expect(customRoot).to.have.attribute('data-foobar', otherProps.fooBar);
   });
 
   it('does forward standard props to the root element if an intrinsic element is provided', () => {
     const otherProps = {
       lang: 'fr',
       'data-foobar': randomStringValue(),
+      'data-testid': 'custom-root',
     };
 
-    const { container } = render(
-      React.cloneElement(element, { slots: { root: Element }, ...otherProps }),
-    );
+    render(React.cloneElement(element, { slots: { root: Element }, ...otherProps }));
 
-    expect(container.firstChild).to.have.attribute('lang', otherProps.lang);
-    expect(container.firstChild).to.have.attribute('data-foobar', otherProps['data-foobar']);
+    const customRoot = screen.getByTestId('custom-root');
+    expect(customRoot).to.have.attribute('lang', otherProps.lang);
+    expect(customRoot).to.have.attribute('data-foobar', otherProps['data-foobar']);
   });
 }
 
@@ -301,10 +299,11 @@ function testOwnerStatePropagation(
 
   forEachSlot(slots, (slotName) => {
     it(`sets the ownerState prop on the ${slotName} slot's component`, () => {
+      let componentOwnerState;
       const TestComponent = React.forwardRef(
-        ({ ownerState, expectedOwnerState }: WithOwnerState, ref: React.Ref<any>) => {
-          expect(ownerState).not.to.equal(undefined);
-          expect(ownerState).to.deep.include(expectedOwnerState);
+        ({ ownerState }: WithOwnerState, ref: React.Ref<any>) => {
+          componentOwnerState = ownerState;
+
           // @ts-ignore
           return <Element ref={ref} />;
         },
@@ -314,15 +313,13 @@ function testOwnerStatePropagation(
         [slotName]: TestComponent,
       };
 
-      const slotProps = {
-        [slotName]: {
-          expectedOwnerState: {
-            id: 'foo',
-          },
-        },
+      const expectedOwnerState = {
+        id: 'foo',
       };
 
-      render(React.cloneElement(element, { slots: slotOverrides, slotProps, id: 'foo' }));
+      render(React.cloneElement(element, { slots: slotOverrides, id: 'foo' }));
+      expect(componentOwnerState).not.to.equal(undefined);
+      expect(componentOwnerState).to.deep.include(expectedOwnerState);
     });
   });
 }