diff --git a/docs/pages/base/api/modal-unstyled.json b/docs/pages/base/api/modal-unstyled.json index e35f1d27da241f..066ccf5847df56 100644 --- a/docs/pages/base/api/modal-unstyled.json +++ b/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, diff --git a/docs/pages/base/api/popper-unstyled.json b/docs/pages/base/api/popper-unstyled.json index 0ee65d6280ab9e..c59aafe0473eca 100644 --- a/docs/pages/base/api/popper-unstyled.json +++ b/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, diff --git a/docs/pages/base/api/textarea-autosize.json b/docs/pages/base/api/textarea-autosize.json index 7474dcf10c6244..73ac007fbcdf22 100644 --- a/docs/pages/base/api/textarea-autosize.json +++ b/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, diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js index aaacb78f92f96c..3fa8cfcac30022 100644 --- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js +++ b/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, diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js index 0d808c50f35031..43591c7dbbf0fe 100644 --- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js +++ b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.test.js @@ -21,7 +21,6 @@ describe('', () => {
, () => ({ - classes, inheritComponent: 'div', render, mount, @@ -29,12 +28,9 @@ describe('', () => { slots: { root: { expectedClassName: classes.root, - testWithElement: null, }, }, skip: [ - 'propsSpread', - 'slotsProp', 'reactTestRenderer', // portal https://github.com/facebook/react/issues/11565 ], }), diff --git a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js index f9f26f4d9d1d35..ee065fbedd6cd7 100644 --- a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js +++ b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.test.js @@ -19,10 +19,6 @@ describe('', () => { mount, refInstanceof: window.HTMLDivElement, skip: [ - 'themeDefaultProps', - 'themeStyleOverrides', - 'themeVariants', - 'propsSpread', // https://github.com/facebook/react/issues/11565 'reactTestRenderer', ], diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx index 5a53b551a9099b..7515487a5ee9c8 100644 --- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx +++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.test.tsx @@ -34,7 +34,6 @@ describe('', () => { expectedClassName: tabPanelUnstyledClasses.root, }, }, - skip: [ 'reactTestRenderer', // Need to be wrapped with TabsContext ], diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx index 9b05887804b123..74c8c497f8c192 100644 --- a/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx +++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.test.tsx @@ -34,7 +34,6 @@ describe('', () => { expectedClassName: tabUnstyledClasses.root, }, }, - skip: [ 'reactTestRenderer', // Need to be wrapped with TabsContext ], diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx index 454a81a1ef5082..1467f7bdbcc85f 100644 --- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx +++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.test.tsx @@ -34,7 +34,6 @@ describe('', () => { expectedClassName: tabsListUnstyledClasses.root, }, }, - skip: [ 'reactTestRenderer', // Need to be wrapped with TabsContext ], diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js index 4b493100f09a24..cd0756671df658 100644 --- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.js +++ b/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('', () => { const { clock, render } = createRenderer(); + const mount = createMount; - describeConformance(, () => ({ + describeConformanceUnstyled(, () => ({ + 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', ], })); diff --git a/test/utils/describeConformanceUnstyled.tsx b/test/utils/describeConformanceUnstyled.tsx index d545885d366994..2188f4e273a564 100644 --- a/test/utils/describeConformanceUnstyled.tsx +++ b/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; - expectedOwnerState: Record; } function forEachSlot( @@ -76,7 +75,7 @@ function testPropForwarding( const CustomRoot = React.forwardRef( ({ fooBar, lang }: WithCustomProp, ref: React.ForwardedRef) => { // @ts-ignore - return ; + return ; }, ); @@ -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) => { - expect(ownerState).not.to.equal(undefined); - expect(ownerState).to.deep.include(expectedOwnerState); + ({ ownerState }: WithOwnerState, ref: React.Ref) => { + componentOwnerState = ownerState; + // @ts-ignore return ; }, @@ -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); }); }); }