From 01660befe79abc3e68a4c31dbb046eef282765f6 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 29 May 2024 16:30:40 -0400 Subject: [PATCH 1/8] Remove enzyme from testPropsSpread test --- docs/pages/joy-ui/api/tooltip.json | 2 +- .../test-utils/src/describeConformance.tsx | 21 ++++++++----------- packages/mui-joy/src/Tooltip/Tooltip.test.tsx | 1 + packages/mui-material/src/Fade/Fade.test.js | 1 + packages/mui-material/src/Grow/Grow.test.js | 1 + .../src/MenuList/MenuList.test.js | 1 + .../src/RadioGroup/RadioGroup.test.js | 1 + packages/mui-material/src/Slide/Slide.test.js | 1 + .../SwipeableDrawer/SwipeableDrawer.test.js | 1 + packages/mui-material/src/Zoom/Zoom.test.js | 1 + 10 files changed, 18 insertions(+), 13 deletions(-) diff --git a/docs/pages/joy-ui/api/tooltip.json b/docs/pages/joy-ui/api/tooltip.json index a2ff5c760db364..8ec531a901a955 100644 --- 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/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 4cb6d35c2120bb..b6fd97250ae521 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -170,7 +170,7 @@ export function testComponentProp( } /** - * MUI components can spread additional props to a documented component. + * MUI components spread additional props to its root. */ export function testPropsSpread( element: React.ReactElement, @@ -178,24 +178,21 @@ export function testPropsSpread( ) { it(`spreads props to the root component`, () => { // type def in ConformanceOptions - const { inheritComponent, mount } = getOptions(); - if (!mount) { - throwMissingPropError('mount'); - } + const { render } = getOptions(); - if (inheritComponent === undefined) { - throw new TypeError( - 'Unable to test props spread without `inheritComponent`. Either skip the test or pass a React element type.', - ); + if (!render) { + throwMissingPropError('render'); } const testProp = 'data-test-props-spread'; const value = randomStringValue(); + const testId = randomStringValue(); - const wrapper = mount(React.cloneElement(element, { [testProp]: value })); - const root = findRootComponent(wrapper, inheritComponent); + const { getByTestId } = render( + React.cloneElement(element, { [testProp]: value, 'data-testid': testId }), + ); - expect(root.props()).to.have.property(testProp, value); + expect(getByTestId(testId)).to.have.attribute(testProp, value); }); } diff --git a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx index 64361e880a4ae1..fcb9b437eabe3b 100644 --- a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx +++ b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx @@ -52,6 +52,7 @@ describe('', () => { 'themeVariants', // react-transition-group issue 'reactTestRenderer', + 'propsSpread', // props are spread to root and children ], }), ); diff --git a/packages/mui-material/src/Fade/Fade.test.js b/packages/mui-material/src/Fade/Fade.test.js index 6971bc3f4b875a..eb12b8a5d9e559 100644 --- a/packages/mui-material/src/Fade/Fade.test.js +++ b/packages/mui-material/src/Fade/Fade.test.js @@ -16,6 +16,7 @@ describe('', () => { }; describeConformance(, () => ({ + 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 index 71d64855760a76..9ca0bd2bc665bf 100644 --- a/packages/mui-material/src/Grow/Grow.test.js +++ b/packages/mui-material/src/Grow/Grow.test.js @@ -21,6 +21,7 @@ describe('', () => {
, () => ({ + 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 index ba523f4a56c18b..67eeba715f24af 100644 --- a/packages/mui-material/src/MenuList/MenuList.test.js +++ b/packages/mui-material/src/MenuList/MenuList.test.js @@ -23,6 +23,7 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ + render, classes: {}, inheritComponent: List, refInstanceof: window.HTMLUListElement, diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.test.js b/packages/mui-material/src/RadioGroup/RadioGroup.test.js index be154233f9fbbe..fb7933fffbdda9 100644 --- a/packages/mui-material/src/RadioGroup/RadioGroup.test.js +++ b/packages/mui-material/src/RadioGroup/RadioGroup.test.js @@ -12,6 +12,7 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ + 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 index a5e069c854343a..b8c6caebe3ae58 100644 --- a/packages/mui-material/src/Slide/Slide.test.js +++ b/packages/mui-material/src/Slide/Slide.test.js @@ -23,6 +23,7 @@ describe('', () => {
, () => ({ + render, classes: {}, inheritComponent: Transition, refInstanceof: window.HTMLDivElement, diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js index a31e311fb1e683..458678713612ae 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js @@ -63,6 +63,7 @@ describe('', () => { const { render } = createRenderer({ clock: 'fake' }); describeConformance( {}} onClose={() => {}} open />, () => ({ + render, classes: {}, inheritComponent: Drawer, refInstanceof: window.HTMLDivElement, diff --git a/packages/mui-material/src/Zoom/Zoom.test.js b/packages/mui-material/src/Zoom/Zoom.test.js index d1cd69bd9d1ea4..cc5af9e9f8e372 100644 --- a/packages/mui-material/src/Zoom/Zoom.test.js +++ b/packages/mui-material/src/Zoom/Zoom.test.js @@ -15,6 +15,7 @@ describe('', () => {
, () => ({ + render, classes: {}, inheritComponent: Transition, refInstanceof: window.HTMLDivElement, From c9842727d04d26c20ab0ba68d34477dde219dd1a Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 29 May 2024 12:56:34 -0400 Subject: [PATCH 2/8] Remove enzyme from describeRef test --- .../test-utils/src/describeConformance.tsx | 45 ++++--------------- packages/mui-material/src/Grow/Grow.test.js | 2 +- .../NativeSelect/NativeSelectInput.test.js | 1 + 3 files changed, 11 insertions(+), 37 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index b6fd97250ae521..2fb3617d487ab4 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -65,34 +65,6 @@ export interface ConformanceOptions { createTheme?: (arg: any) => any; } -/** - * @param {object} node - * @returns - */ -function assertDOMNode(node: unknown) { - // duck typing a DOM node - expect(typeof (node as HTMLElement).nodeName).to.equal('string'); -} - -/** - * Utility method to make assertions about the ref on an element - * The element should have a component wrapped in withStyles as the root - */ -function testRef( - element: React.ReactElement, - mount: ConformanceOptions['mount'], - onRef: (instance: unknown, wrapper: import('enzyme').ReactWrapper) => void = assertDOMNode, -) { - if (!mount) { - throwMissingPropError('mount'); - } - - const ref = React.createRef(); - - const wrapper = mount({React.cloneElement(element, { ref })}); - onRef(ref.current, wrapper); -} - /** * Glossary * - root component: @@ -209,16 +181,17 @@ export function describeRef( describe('ref', () => { it(`attaches the ref`, () => { // type def in ConformanceOptions - const { inheritComponent, mount, refInstanceof } = getOptions(); + const { render, refInstanceof } = getOptions(); + + if (!render) { + throwMissingPropError('render'); + } - testRef(element, mount, (instance, wrapper) => { - expect(instance).to.be.instanceof(refInstanceof); + const ref = React.createRef(); - if (inheritComponent !== undefined && (instance as HTMLElement).nodeType === 1) { - const rootHost = findOutermostIntrinsic(wrapper); - expect(instance).to.equal(rootHost.instance()); - } - }); + render(React.cloneElement(element, { ref })); + + expect(ref.current).to.be.instanceof(refInstanceof); }); }); } diff --git a/packages/mui-material/src/Grow/Grow.test.js b/packages/mui-material/src/Grow/Grow.test.js index 9ca0bd2bc665bf..8a6caf68679739 100644 --- a/packages/mui-material/src/Grow/Grow.test.js +++ b/packages/mui-material/src/Grow/Grow.test.js @@ -17,7 +17,7 @@ describe('', () => { }; describeConformance( - +
, () => ({ diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js index 6dec2d7a4e9ad2..282b2c9cfee9e1 100644 --- a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js +++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js @@ -11,6 +11,7 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ + render, only: ['refForwarding'], refInstanceof: window.HTMLSelectElement, muiName: 'MuiNativeSelectInput', From 96d29af1f3bdf055b6af101906cea210a93231e3 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 29 May 2024 15:45:55 -0400 Subject: [PATCH 3/8] Remove enzyme from testClassName test --- docs/pages/material-ui/api/switch.json | 2 +- .../test-utils/src/describeConformance.tsx | 14 ++++++++----- .../test/describeConformanceUnstyled.tsx | 20 ++++++++++++++++++- packages/mui-joy/src/Tooltip/Tooltip.test.tsx | 7 ++++++- .../mui-material/src/Switch/Switch.test.js | 19 +++++++++++++++++- 5 files changed, 53 insertions(+), 9 deletions(-) diff --git a/docs/pages/material-ui/api/switch.json b/docs/pages/material-ui/api/switch.json index 118a43aa8dc2dc..b469b4f66308ca 100644 --- 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-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 2fb3617d487ab4..0550b0f345500d 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -106,16 +106,20 @@ export function testClassName( getOptions: () => ConformanceOptions, ) { it('applies the className to the root component', () => { - const { mount } = getOptions(); - if (!mount) { - throwMissingPropError('mount'); + const { render } = getOptions(); + + if (!render) { + throwMissingPropError('render'); } const className = randomStringValue(); + const testId = randomStringValue(); - const wrapper = mount(React.cloneElement(element, { className })); + const { getByTestId } = render( + React.cloneElement(element, { className, 'data-testid': testId }), + ); - expect(findOutermostIntrinsic(wrapper).instance()).to.have.class(className); + expect(getByTestId(testId)).to.have.class(className); }); } diff --git a/packages/mui-base/test/describeConformanceUnstyled.tsx b/packages/mui-base/test/describeConformanceUnstyled.tsx index 508f0b8664062e..d7ff71924130a2 100644 --- 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'; @@ -269,6 +268,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/Tooltip/Tooltip.test.tsx b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx index fcb9b437eabe3b..e070f4cce3832d 100644 --- a/packages/mui-joy/src/Tooltip/Tooltip.test.tsx +++ b/packages/mui-joy/src/Tooltip/Tooltip.test.tsx @@ -52,7 +52,12 @@ describe('', () => { 'themeVariants', // react-transition-group issue 'reactTestRenderer', - 'propsSpread', // props are spread to root and children + // 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-material/src/Switch/Switch.test.js b/packages/mui-material/src/Switch/Switch.test.js index e35a171eeff4d7..3f62c576b8f75d 100644 --- a/packages/mui-material/src/Switch/Switch.test.js +++ b/packages/mui-material/src/Switch/Switch.test.js @@ -17,7 +17,16 @@ describe('', () => { { 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('', () => { }); }); }); + + describe('mergeClassName', () => { + it('should merge the className', () => { + const { container } = render(); + + expect(container.firstChild).to.have.class('test-class-name'); + }); + }); }); From a891f02b0ec32f5b57a94f8d9aac856705b3b286 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 29 May 2024 16:06:19 -0400 Subject: [PATCH 4/8] Remove enzyme from testComponentProp test --- .../test-utils/src/describeConformance.tsx | 28 +++++++++++++++---- packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx | 2 +- .../mui-material/src/SvgIcon/SvgIcon.test.js | 2 +- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 0550b0f345500d..6d51ea7e3868ef 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -50,6 +50,15 @@ export interface ConformanceOptions { only?: Array; skip?: Array; testComponentsRootPropWith?: string; + /** + * A custom React component to test if the component prop is implemented correctly. + * + * It must either: + * - Be a string that is a valid HTML tag, or + * - Contain at least one DOM which has `data-testid="custom"` + * + * If not provided, the default 'em' element is used + */ testComponentPropWith?: string | React.ElementType; testDeepOverrides?: SlotTestOverride | SlotTestOverride[]; testRootOverrides?: SlotTestOverride; @@ -133,14 +142,23 @@ export function testComponentProp( ) { describe('prop: component', () => { it('can render another root component with the `component` prop', () => { - const { mount, testComponentPropWith: component = 'em' } = getOptions(); - if (!mount) { - throwMissingPropError('mount'); + const { render, testComponentPropWith: component = 'em' } = getOptions(); + if (!render) { + throwMissingPropError('render'); } - const wrapper = mount(React.cloneElement(element, { component })); + if (typeof component === 'string') { + const testId = randomStringValue(); - expect(findRootComponent(wrapper, component).exists()).to.equal(true); + const { getByTestId } = render( + React.cloneElement(element, { component, 'data-testid': testId }), + ); + expect(getByTestId(testId)).not.to.equal(null); + expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component); + } else { + const { getByTestId } = render(React.cloneElement(element, { component })); + expect(getByTestId('custom')).not.to.equal(null); + } }); }); } diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx index 9c7dd2a22a7b7d..149bf6a72acfc9 100644 --- a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx +++ b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx @@ -31,7 +31,7 @@ describe('', () => { muiName: 'JoySvgIcon', refInstanceof: window.SVGSVGElement, testComponentPropWith: (props: SvgIconProps) => ( - + diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.test.js b/packages/mui-material/src/SvgIcon/SvgIcon.test.js index 77562a46200553..d35b1ded486f0d 100644 --- a/packages/mui-material/src/SvgIcon/SvgIcon.test.js +++ b/packages/mui-material/src/SvgIcon/SvgIcon.test.js @@ -24,7 +24,7 @@ describe('', () => { muiName: 'MuiSvgIcon', refInstanceof: window.SVGSVGElement, testComponentPropWith: (props) => ( - + From ae0b1da0b7faf9f4f3b39055acc0a0cbcf237798 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 29 May 2024 16:12:21 -0400 Subject: [PATCH 5/8] Remove enzyme from testComponentsProp test --- .../test-utils/src/describeConformance.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 6d51ea7e3868ef..68c7148aa2c656 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -581,14 +581,18 @@ function testComponentsProp( ) { describe('prop components:', () => { it('can render another root component with the `components` prop', () => { - const { mount, testComponentsRootPropWith: component = 'em' } = getOptions(); - if (!mount) { - throwMissingPropError('mount'); + const { render, testComponentsRootPropWith: component = 'em' } = getOptions(); + if (!render) { + throwMissingPropError('render'); } - const wrapper = mount(React.cloneElement(element, { components: { Root: component } })); + const testId = randomStringValue(); - expect(findRootComponent(wrapper, component).exists()).to.equal(true); + const { getByTestId } = render( + React.cloneElement(element, { components: { Root: component }, 'data-testid': testId }), + ); + expect(getByTestId(testId)).not.to.equal(null); + expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component); }); }); } From d0b2593b9fc50ae1c8e79a249fedf3ad2dd4214d Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 29 May 2024 16:25:36 -0400 Subject: [PATCH 6/8] Remove mount from describeConformance --- .../test-utils/src/describeConformance.tsx | 32 +------------------ packages/mui-joy/src/Menu/Menu.test.tsx | 6 ---- .../src/MenuButton/MenuButton.test.tsx | 6 ---- .../mui-joy/src/MenuItem/MenuItem.test.tsx | 4 --- packages/mui-joy/src/Tab/Tab.test.tsx | 1 - packages/mui-joy/src/TabList/TabList.test.tsx | 1 - .../mui-joy/src/TabPanel/TabPanel.test.tsx | 1 - packages/mui-lab/src/TabList/TabList.test.js | 4 --- .../mui-lab/src/TabPanel/TabPanel.test.tsx | 1 - .../src/StepContent/StepContent.test.js | 16 ---------- .../src/TableBody/TableBody.test.js | 4 --- .../src/TableCell/TableCell.test.js | 10 ------ .../src/TableFooter/TableFooter.test.js | 4 --- .../src/TableHead/TableHead.test.js | 4 --- .../TablePagination/TablePagination.test.js | 10 ------ .../src/TableRow/TableRow.test.js | 8 ----- 16 files changed, 1 insertion(+), 111 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 68c7148aa2c656..97327e418c2bba 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -1,11 +1,8 @@ /* eslint-env mocha */ import * as React from 'react'; import { expect } from 'chai'; -import { ReactWrapper } from 'enzyme'; import ReactTestRenderer from 'react-test-renderer'; -import createMount from './createMount'; import createDescribe from './createDescribe'; -import findOutermostIntrinsic from './findOutermostIntrinsic'; import { MuiRenderResult } from './createRenderer'; function capitalize(string: string): string { @@ -46,7 +43,6 @@ export interface ConformanceOptions { after?: () => void; inheritComponent?: React.ElementType; render: (node: React.ReactElement) => MuiRenderResult; - mount?: (node: React.ReactElement) => ReactWrapper; only?: Array; skip?: Array; testComponentsRootPropWith?: string; @@ -66,9 +62,6 @@ export interface ConformanceOptions { testCustomVariant?: boolean; testVariantProps?: object; testLegacyComponentsProp?: boolean; - wrapMount?: ( - mount: (node: React.ReactElement) => ReactWrapper, - ) => (node: React.ReactElement) => ReactWrapper; slots?: Record; ThemeProvider?: React.ElementType; createTheme?: (arg: any) => any; @@ -83,18 +76,6 @@ export interface ConformanceOptions { * - has the type of `inheritComponent` */ -/** - * Returns the component with the same constructor as `component` that renders - * the outermost host - */ -export function findRootComponent(wrapper: ReactWrapper, component: string | React.ElementType) { - const outermostHostElement = findOutermostIntrinsic(wrapper).getElement(); - - return wrapper.find(component as string).filterWhere((componentWrapper) => { - return componentWrapper.contains(outermostHostElement); - }); -} - export function randomStringValue() { return `s${Math.random().toString(36).slice(2)}`; } @@ -1077,7 +1058,6 @@ function describeConformance( only = Object.keys(fullSuite), slots, skip = [], - wrapMount, } = getOptions(); let filteredTests = Object.keys(fullSuite).filter( @@ -1092,21 +1072,11 @@ function describeConformance( filteredTests = filteredTests.filter((testKey) => !slotBasedTests.includes(testKey)); } - const baseMount = createMount(); - const mount = wrapMount !== undefined ? wrapMount(baseMount) : baseMount; - after(runAfterHook); - function getTestOptions(): ConformanceOptions { - return { - ...getOptions(), - mount, - }; - } - filteredTests.forEach((testKey) => { const test = fullSuite[testKey]; - test(minimalElement, getTestOptions); + test(minimalElement, getOptions); }); } diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx index c1eb7a52292e8e..b236f5c6c65dd8 100644 --- a/packages/mui-joy/src/Menu/Menu.test.tsx +++ b/packages/mui-joy/src/Menu/Menu.test.tsx @@ -31,12 +31,6 @@ describe('Joy ', () => { {node}, ); }, - wrapMount: (mount) => (node: React.ReactNode) => { - const wrapper = mount( - {node}, - ); - 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 index 85081fb4ba3890..fb89d168de0b31 100644 --- a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx +++ b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx @@ -22,12 +22,6 @@ describe('', () => { describeConformance(, () => ({ classes, inheritComponent: 'button', - wrapMount: (mount) => (node: React.ReactNode) => { - const wrapper = mount( - {node}, - ); - 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 index a7c06365e4249e..736232cd7c0c82 100644 --- a/packages/mui-joy/src/MenuItem/MenuItem.test.tsx +++ b/packages/mui-joy/src/MenuItem/MenuItem.test.tsx @@ -36,10 +36,6 @@ describe('Joy ', () => { classes, inheritComponent: ListItemButton, render: (node) => render({node}), - wrapMount: (mount) => (node) => { - const wrapper = mount({node}); - 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 index a5f783caa2a190..3473b40767d398 100644 --- a/packages/mui-joy/src/Tab/Tab.test.tsx +++ b/packages/mui-joy/src/Tab/Tab.test.tsx @@ -32,7 +32,6 @@ describe('Joy ', () => { classes, inheritComponent: 'button', render: (node) => render({node}), - wrapMount: (mount) => (node) => mount({node}), 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 index 4af93910b9b729..34cf1c274a3365 100644 --- a/packages/mui-joy/src/TabList/TabList.test.tsx +++ b/packages/mui-joy/src/TabList/TabList.test.tsx @@ -21,7 +21,6 @@ describe('Joy ', () => { classes, inheritComponent: 'div', render: (node) => render({node}), - wrapMount: (mount) => (node) => mount({node}), 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 index 89c2ba13f945c3..c4136af434d49a 100644 --- a/packages/mui-joy/src/TabPanel/TabPanel.test.tsx +++ b/packages/mui-joy/src/TabPanel/TabPanel.test.tsx @@ -20,7 +20,6 @@ describe('Joy ', () => { classes, inheritComponent: 'div', render: (node) => render({node}), - wrapMount: (mount) => (node) => mount({node}), ThemeProvider, muiName: 'JoyTabPanel', refInstanceof: window.HTMLDivElement, diff --git a/packages/mui-lab/src/TabList/TabList.test.js b/packages/mui-lab/src/TabList/TabList.test.js index 20f560859732d9..4c1b95702fed16 100644 --- a/packages/mui-lab/src/TabList/TabList.test.js +++ b/packages/mui-lab/src/TabList/TabList.test.js @@ -19,10 +19,6 @@ describe('', () => { * @param {React.ReactNode} node */ render: (node) => render({node}), - wrapMount: (mount) => (node) => { - const wrapper = mount({node}); - 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 index 0f4403330e21e7..45b8ef3b89275e 100644 --- a/packages/mui-lab/src/TabPanel/TabPanel.test.tsx +++ b/packages/mui-lab/src/TabPanel/TabPanel.test.tsx @@ -12,7 +12,6 @@ describe('', () => { classes, inheritComponent: 'div', render: (node) => render({node}), - wrapMount: (mount) => (node) => mount({node}), refInstanceof: window.HTMLDivElement, muiName: 'MuiTabPanel', skip: [ diff --git a/packages/mui-material/src/StepContent/StepContent.test.js b/packages/mui-material/src/StepContent/StepContent.test.js index 7be20dc45c0251..8170c2d0c7a59a 100644 --- a/packages/mui-material/src/StepContent/StepContent.test.js +++ b/packages/mui-material/src/StepContent/StepContent.test.js @@ -13,22 +13,6 @@ describe('', () => { describeConformance(, () => ({ classes, inheritComponent: 'div', - wrapMount: (mount) => (node) => { - const wrapper = mount( - - {node} - , - ); - // `wrapper.find(Step)` tree. - // "->" indicates the path we want - // "n:" indicates the index - // - // -> 0: - // 0: // from Emotion - // -> 1:
- // -> 0: - return wrapper.find(Step).childAt(0).childAt(1).childAt(0); - }, muiName: 'MuiStepContent', refInstanceof: window.HTMLDivElement, render: (node) => { diff --git a/packages/mui-material/src/TableBody/TableBody.test.js b/packages/mui-material/src/TableBody/TableBody.test.js index 7912ca2c8b8230..2dadb46e2afcfa 100644 --- a/packages/mui-material/src/TableBody/TableBody.test.js +++ b/packages/mui-material/src/TableBody/TableBody.test.js @@ -15,10 +15,6 @@ describe('', () => { describeConformance(, () => ({ classes, inheritComponent: 'tbody', - wrapMount: (mount) => (node) => { - const wrapper = mount({node}
); - return wrapper.find('table').childAt(0); - }, render: (node) => { const { container, ...other } = render({node}
); 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 index 7baee719f2bfe7..6da76a2f39da39 100644 --- a/packages/mui-material/src/TableCell/TableCell.test.js +++ b/packages/mui-material/src/TableCell/TableCell.test.js @@ -32,16 +32,6 @@ describe('', () => { ); return { container: container.firstChild.firstChild.firstChild, ...other }; }, - wrapMount: (mount) => (node) => { - const wrapper = mount( - - - {node} - -
, - ); - 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 index ae6b880965529f..743aaab7cb4a66 100644 --- a/packages/mui-material/src/TableFooter/TableFooter.test.js +++ b/packages/mui-material/src/TableFooter/TableFooter.test.js @@ -19,10 +19,6 @@ describe('', () => { const { container, ...other } = render({node}
); return { container: container.firstChild, ...other }; }, - wrapMount: (mount) => (node) => { - const wrapper = mount({node}
); - 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 index 54cce9737cf9b7..d67d2baf68b4e3 100644 --- a/packages/mui-material/src/TableHead/TableHead.test.js +++ b/packages/mui-material/src/TableHead/TableHead.test.js @@ -14,10 +14,6 @@ describe('', () => { describeConformance(, () => ({ classes, inheritComponent: 'thead', - wrapMount: (mount) => (node) => { - const wrapper = mount({node}
); - return wrapper.find('table').childAt(0); - }, render: (node) => { const { container, ...other } = render({node}
); 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 index 1293b6189b27f6..e75062a8d16902 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.test.js +++ b/packages/mui-material/src/TablePagination/TablePagination.test.js @@ -45,16 +45,6 @@ describe('', () => { ); return { container: container.firstChild.firstChild.firstChild, ...other }; }, - wrapMount: (mount) => (node) => { - const wrapper = mount( - - - {node} - -
, - ); - 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 index ffab5aab8fd19a..16c3ab7fb5fcaf 100644 --- a/packages/mui-material/src/TableRow/TableRow.test.js +++ b/packages/mui-material/src/TableRow/TableRow.test.js @@ -26,14 +26,6 @@ describe('', () => { ); return { container: container.firstChild.firstChild, ...other }; }, - wrapMount: (mount) => (node) => { - const wrapper = mount( - - {node} -
, - ); - return wrapper.find('tbody').childAt(0); - }, muiName: 'MuiTableRow', testVariantProps: { variant: 'foo' }, refInstanceof: window.HTMLTableRowElement, From aceac7d0b04d464669364e400f461bea1f5cf101 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Fri, 14 Jun 2024 17:28:21 +0200 Subject: [PATCH 7/8] Automatically set data-testid --- .../test-utils/src/describeConformance.tsx | 18 ++++++++++++------ packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx | 2 +- .../mui-material/src/SvgIcon/SvgIcon.test.js | 2 +- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 97327e418c2bba..6d5ee641d3c37c 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -51,9 +51,9 @@ export interface ConformanceOptions { * * It must either: * - Be a string that is a valid HTML tag, or - * - Contain at least one DOM which has `data-testid="custom"` + * - A component that spread props to the underlying rendered element. * - * If not provided, the default 'em' element is used + * If not provided, the default 'em' element is used. */ testComponentPropWith?: string | React.ElementType; testDeepOverrides?: SlotTestOverride | SlotTestOverride[]; @@ -128,17 +128,23 @@ export function testComponentProp( throwMissingPropError('render'); } - if (typeof component === 'string') { - const testId = randomStringValue(); + const testId = randomStringValue(); + if (typeof component === 'string') { const { getByTestId } = render( React.cloneElement(element, { component, 'data-testid': testId }), ); expect(getByTestId(testId)).not.to.equal(null); expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component); } else { - const { getByTestId } = render(React.cloneElement(element, { component })); - expect(getByTestId('custom')).not.to.equal(null); + const componentWithTestId = (props: {}) => + React.createElement(component, { ...props, 'data-testid': testId }); + const { getByTestId } = render( + React.cloneElement(element, { + component: componentWithTestId, + }), + ); + expect(getByTestId(testId)).not.to.equal(null); } }); }); diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx index 149bf6a72acfc9..9c7dd2a22a7b7d 100644 --- a/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx +++ b/packages/mui-joy/src/SvgIcon/SvgIcon.test.tsx @@ -31,7 +31,7 @@ describe('', () => { muiName: 'JoySvgIcon', refInstanceof: window.SVGSVGElement, testComponentPropWith: (props: SvgIconProps) => ( - + diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.test.js b/packages/mui-material/src/SvgIcon/SvgIcon.test.js index d35b1ded486f0d..77562a46200553 100644 --- a/packages/mui-material/src/SvgIcon/SvgIcon.test.js +++ b/packages/mui-material/src/SvgIcon/SvgIcon.test.js @@ -24,7 +24,7 @@ describe('', () => { muiName: 'MuiSvgIcon', refInstanceof: window.SVGSVGElement, testComponentPropWith: (props) => ( - + From 3a6ae48cc8e975e2a474b6f9a48540a3ce4d506f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Mon, 17 Jun 2024 11:08:44 +0200 Subject: [PATCH 8/8] Do not spread key prop --- packages/mui-joy/src/Autocomplete/Autocomplete.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx index 21879755e722cc..3601284ec7eeaa 100644 --- 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) => ( - {getOptionLabel(option)} - ); + const defaultRenderOption = (optionProps: any, option: unknown) => { + const { key, ...rest } = optionProps; + return ( + + {getOptionLabel(option)} + + ); + }; const renderOption = renderOptionProp || defaultRenderOption;