diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index c8892f4160bc20..86b32191440298 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -534,6 +534,33 @@ function testSlotPropsCallback( forEachSlot(slots, (slotName) => { it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} callback`, async () => { + const slotProps = { + [slotName]: () => ({ + 'data-testid': 'custom', + }), + }; + + const { queryByTestId } = await render( + React.cloneElement(element, { slotProps, className: 'custom' }), + ); + const slotComponent = queryByTestId('custom'); + expect(slotComponent).not.to.equal(null); + }); + }); +} + +function testSlotPropsCallbackWithPropsAsOwnerState( + element: React.ReactElement, + getOptions: () => ConformanceOptions, +) { + const { render, slots } = getOptions(); + + if (!render) { + throwMissingPropError('render'); + } + + forEachSlot(slots, (slotName) => { + it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} callback using the ownerState`, async () => { const slotProps = { [slotName]: (ownerState: Record) => ({ 'data-testid': ownerState.className, @@ -1068,6 +1095,7 @@ const fullSuite = { rootClass: testRootClass, slotPropsProp: testSlotPropsProp, slotPropsCallback: testSlotPropsCallback, + slotPropsCallbackWithPropsAsOwnerState: testSlotPropsCallbackWithPropsAsOwnerState, slotsProp: testSlotsProp, themeDefaultProps: testThemeDefaultProps, themeStyleOverrides: testThemeStyleOverrides, @@ -1120,7 +1148,12 @@ function describeConformance( (testKey) => only.includes(testKey) && !skip.includes(testKey as keyof typeof fullSuite), ) as (keyof typeof fullSuite)[]; - const slotBasedTests = ['slotsProp', 'slotPropsProp', 'slotPropsCallback']; + const slotBasedTests = [ + 'slotsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotPropsCallbackWithPropsAsOwnerState', + ]; if (!slots) { // if `slots` are not defined, do not run tests that depend on them diff --git a/packages/mui-material/src/FilledInput/FilledInput.test.js b/packages/mui-material/src/FilledInput/FilledInput.test.js index 06671ea1686a46..dac7996df24514 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.test.js +++ b/packages/mui-material/src/FilledInput/FilledInput.test.js @@ -28,6 +28,7 @@ describe('', () => { 'componentProp', 'componentsProp', 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], })); diff --git a/packages/mui-material/src/Input/Input.test.js b/packages/mui-material/src/Input/Input.test.js index 3774a38f5821c9..329a657e71e059 100644 --- a/packages/mui-material/src/Input/Input.test.js +++ b/packages/mui-material/src/Input/Input.test.js @@ -27,6 +27,7 @@ describe('', () => { 'componentProp', 'componentsProp', 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], })); diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js index 404c5b089b0b25..f89f452661bc4c 100644 --- a/packages/mui-material/src/InputBase/InputBase.test.js +++ b/packages/mui-material/src/InputBase/InputBase.test.js @@ -31,6 +31,7 @@ describe('', () => { skip: [ 'componentProp', 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], })); diff --git a/packages/mui-material/src/ListItem/ListItem.test.js b/packages/mui-material/src/ListItem/ListItem.test.js index 8df90d7167c584..623316636b59bc 100644 --- a/packages/mui-material/src/ListItem/ListItem.test.js +++ b/packages/mui-material/src/ListItem/ListItem.test.js @@ -26,6 +26,7 @@ describe('', () => { skip: [ 'componentsProp', 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], })); diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js index 145bc5d8b15f90..24e2dc25b8711b 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.test.js @@ -28,6 +28,7 @@ describe('', () => { 'componentProp', 'componentsProp', 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], })); diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.test.js b/packages/mui-material/src/PaginationItem/PaginationItem.test.js index 593037012dc26b..4c299203c11ebd 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.test.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.test.js @@ -34,6 +34,7 @@ describe('', () => { 'slotsProp', 'slotPropsProp', 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], })); diff --git a/packages/mui-material/src/Popper/Popper.test.js b/packages/mui-material/src/Popper/Popper.test.js index 326b95b2df39ec..9c6c0c11b9c1f0 100644 --- a/packages/mui-material/src/Popper/Popper.test.js +++ b/packages/mui-material/src/Popper/Popper.test.js @@ -38,6 +38,7 @@ describe('', () => { 'themeStyleOverrides', 'themeVariants', 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], })); diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index 07e62bf1bd03a6..8b8d868434dbbd 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -66,6 +66,7 @@ describe('', () => { }, skip: [ 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet ], }), ); diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js index fef0e80b808ea1..e1392563a0d5d7 100644 --- a/packages/mui-material/src/TextField/TextField.test.js +++ b/packages/mui-material/src/TextField/TextField.test.js @@ -60,7 +60,12 @@ describe('', () => { testWithElement: null, }, }, - only: ['slotsProp', 'slotPropsProp', 'slotPropsCallback'], + only: [ + 'slotsProp', + 'slotPropsProp', + 'slotPropsCallback', // not supported yet + 'slotPropsCallbackWithPropsAsOwnerState', // not supported yet + ], }), );