diff --git a/packages/mui-joy/src/List/List.test.tsx b/packages/mui-joy/src/List/List.test.tsx index b54c2c315830e4..e26698831bf2fb 100644 --- a/packages/mui-joy/src/List/List.test.tsx +++ b/packages/mui-joy/src/List/List.test.tsx @@ -100,8 +100,15 @@ describe('Joy ', () => { }); describe('Menu - integration', () => { - const element = document.createElement('div'); - element.setAttribute('aria-controls', 'test'); + let element: HTMLDivElement; + beforeAll(() => { + element = document.createElement('div'); + element.setAttribute('aria-controls', 'test'); + document.body.appendChild(element); + }); + afterAll(() => { + document.body.removeChild(element); + }); it('should have role="group" inside Menu', () => { render( diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx index 73f27c63d35f17..efcf3237b411c1 100644 --- a/packages/mui-joy/src/Menu/Menu.test.tsx +++ b/packages/mui-joy/src/Menu/Menu.test.tsx @@ -10,18 +10,34 @@ import MenuItem from '@mui/joy/MenuItem'; import MenuButton from '@mui/joy/MenuButton'; import describeConformance from '../../test/describeConformance'; +let defaultAnchorEl: HTMLDivElement | null = null; + const testContext: DropdownContextValue = { dispatch: () => {}, popupId: 'menu-popup', registerPopup: () => {}, registerTrigger: () => {}, state: { open: true, changeReason: null }, - triggerElement: document.createElement('div'), + get triggerElement() { + return defaultAnchorEl; + }, }; describe('Joy ', () => { const { render } = createRenderer({ clock: 'fake' }); + beforeAll(() => { + defaultAnchorEl = document.createElement('div'); + defaultAnchorEl.setAttribute('aria-controls', 'test'); + document.body.appendChild(defaultAnchorEl); + }); + afterAll(() => { + if (defaultAnchorEl !== null) { + document.body.removeChild(defaultAnchorEl); + defaultAnchorEl = null; + } + }); + describeConformance(, () => ({ classes, inheritComponent: PopperUnstyled, // `Unstyled` suffix must exist for parser to recognise that this component inherits Base UI component @@ -45,11 +61,8 @@ describe('Joy ', () => { ], })); - const anchorEl = document.createElement('div'); - anchorEl.setAttribute('aria-controls', 'test'); - it('should render with `ul` by default', () => { - render(); + render(); expect(screen.getByTestId('popover')).to.have.tagName('ul'); }); @@ -77,7 +90,7 @@ describe('Joy ', () => { it('renders its children only when open', () => { const { setProps } = render( - +
, ); @@ -90,14 +103,14 @@ describe('Joy ', () => { }); it('should have role="menu"', () => { - render(); + render(); expect(screen.getByTestId('popover')).to.have.attribute('role', 'menu'); }); it('ignores invalid children', () => { render( - + {null} hello {/* testing conditional rendering */} @@ -113,19 +126,19 @@ describe('Joy ', () => { describe('classnames', () => { it('size prop', () => { - render(); + render(); expect(screen.getByTestId('menu')).to.have.class(classes.sizeSm); }); it('variant prop', () => { - render(); + render(); expect(screen.getByTestId('menu')).to.have.class(classes.variantSoft); }); it('color prop', () => { - render(); + render(); expect(screen.getByTestId('menu')).to.have.class(classes.colorPrimary); }); diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx index 6e007806898925..03e14df3791e95 100644 --- a/packages/mui-joy/src/utils/useSlot.test.tsx +++ b/packages/mui-joy/src/utils/useSlot.test.tsx @@ -9,6 +9,18 @@ import useSlot from './useSlot'; describe('useSlot', () => { const { render } = createRenderer(); + let defaultAnchorElm: HTMLDivElement | null = null; + beforeAll(() => { + defaultAnchorElm = document.createElement('div'); + document.body.appendChild(defaultAnchorElm); + }); + afterAll(() => { + if (defaultAnchorElm !== null) { + document.body.removeChild(defaultAnchorElm); + defaultAnchorElm = null; + } + }); + describe('single slot', () => { const ItemRoot = styled('button')({}); const Item = React.forwardRef< @@ -155,7 +167,7 @@ describe('useSlot', () => { ownerState: {}, additionalProps: { open: true, // !!force the popper to always visible for testing - anchorEl: () => document.createElement('div'), + anchorEl: () => defaultAnchorElm!, }, internalForwardedProps: { slots: { root: ItemRoot }, @@ -229,7 +241,7 @@ describe('useSlot', () => { additionalProps: { open: true, // !!force the popper to always visible for testing role: 'menu', - anchorEl: () => document.createElement('div'), + anchorEl: () => defaultAnchorElm!, }, internalForwardedProps: { slots: { root: ItemListbox }, diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.test.js b/packages/mui-material/src/GridLegacy/GridLegacy.test.js index f0c358597ca538..0f9dc7ec6f0665 100644 --- a/packages/mui-material/src/GridLegacy/GridLegacy.test.js +++ b/packages/mui-material/src/GridLegacy/GridLegacy.test.js @@ -14,6 +14,16 @@ import describeConformance from '../../test/describeConformance'; describe('Material UI ', () => { const { render } = createRenderer(); + beforeEach(() => { + const orig = console.warn; + vi.spyOn(console, 'warn').mockImplementation((msg, ...rest) => { + if (/MUI: The GridLegacy component is deprecated./.test(msg)) { + return; + } + orig.apply(console, [msg, ...rest]); + }); + }); + describeConformance(, () => ({ classes, inheritComponent: 'div', diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js index 2b776ae05472eb..4a76f97c7c26b1 100644 --- a/packages/mui-material/src/Menu/Menu.test.js +++ b/packages/mui-material/src/Menu/Menu.test.js @@ -26,7 +26,17 @@ const CustomTransition = React.forwardRef(function CustomTransition( describe('', () => { const { render } = createRenderer({ clock: 'fake' }); - describeConformance( document.createElement('div')} open />, () => ({ + let defaultAnchorEl; + beforeAll(() => { + defaultAnchorEl = document.createElement('div'); + document.body.appendChild(defaultAnchorEl); + }); + afterAll(() => { + document.body.removeChild(defaultAnchorEl); + defaultAnchorEl = null; + }); + + describeConformance( defaultAnchorEl} open />, () => ({ classes, inheritComponent: Popover, render, @@ -73,7 +83,7 @@ describe('', () => { const handleEntering = spy(); render( ', () => { onExit: handleExit, onExiting: handleExiting, }} - anchorEl={document.createElement('div')} + anchorEl={defaultAnchorEl} open />, ); @@ -121,13 +131,7 @@ describe('', () => { }); it('should pass `classes.paper` to the Paper', () => { - render( - , - ); + render(); expect(screen.getByTestId('paper')).to.have.class(classes.paper); }); @@ -136,7 +140,7 @@ describe('', () => { it('should be able to change the Popover style', () => { render( ', () => { it('should be able to change the Popover root element style when Menu classes prop is also provided', () => { render( ', () => { render( ', () => { it('should pass onClose prop to Popover', () => { const handleClose = spy(); - render(); + render(); fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' }); @@ -193,7 +197,7 @@ describe('', () => { it('renders its children only when open', () => { const { setProps } = render( - +
, ); @@ -207,7 +211,7 @@ describe('', () => { describe('list node', () => { it('should render a menu inside the Popover', () => { - render(); + render(); expect(screen.getByTestId('popover').querySelector('[role="menu"]')).not.to.equal(null); }); @@ -223,7 +227,7 @@ describe('', () => { ); } render( - + one , ); @@ -233,7 +237,7 @@ describe('', () => { it('should not focus list if autoFocus=false', () => { render( - +
, ); @@ -245,7 +249,7 @@ describe('', () => { const onEnteringSpy = spy(); render( , @@ -258,7 +262,7 @@ describe('', () => { const onEnteringSpy = spy(); render( ', () => { it('should call TransitionProps.onEntering', () => { const onEnteringSpy = spy(); render( - , + , ); expect(onEnteringSpy.callCount).to.equal(1); @@ -287,7 +287,7 @@ describe('', () => { const onEnteringSpy = spy(); render( ', () => { } const onCloseSpy = spy(); render( - + hello , ); @@ -330,7 +330,7 @@ describe('', () => { it('ignores invalid children', () => { render( - + {null} hello {/* testing conditional rendering */} @@ -348,7 +348,7 @@ describe('', () => { it('warns a Fragment is passed as a child', () => { expect(() => { render( - + {/* eslint-disable-next-line react/jsx-no-useless-fragment */} , @@ -380,7 +380,7 @@ describe('', () => { render( ', () => { render( ', () => {
diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js index 97ff26c60d5cd9..431012c6461639 100644 --- a/packages/mui-material/src/Popover/Popover.test.js +++ b/packages/mui-material/src/Popover/Popover.test.js @@ -52,7 +52,17 @@ const CustomTransition = React.forwardRef(function CustomTransition( describe('', () => { const { clock, render } = createRenderer({ clock: 'fake' }); - describeConformance( document.createElement('div')} open />, () => ({ + let defaultAnchorEl; + beforeAll(() => { + defaultAnchorEl = document.createElement('div'); + document.body.appendChild(defaultAnchorEl); + }); + afterAll(() => { + document.body.removeChild(defaultAnchorEl); + defaultAnchorEl = null; + }); + + describeConformance( defaultAnchorEl} open />, () => ({ classes, inheritComponent: Modal, render, @@ -103,7 +113,7 @@ describe('', () => { render( ', () => { it('should only render its children when open', () => { const { setProps } = render( - +
, ); @@ -135,7 +145,7 @@ describe('', () => { it('hide its children immediately when closing but transition them out', () => { const { setProps } = render( - +
, ); @@ -212,11 +222,7 @@ describe('', () => { it('appears on mount', () => { const handleEnter = spy(); render( - +
, ); @@ -237,7 +243,7 @@ describe('', () => { const { setProps } = render( ', () => { describe('paper', () => { it('should have the paper class', () => { render( - +
, ); @@ -346,11 +348,7 @@ describe('', () => { it('should have a elevation prop passed down', () => { const { setProps } = render( - +
, ); @@ -369,7 +367,7 @@ describe('', () => { const handleEntering = spy(); render( null }} TransitionProps={{ onEntering: handleEntering }} @@ -386,7 +384,7 @@ describe('', () => { const className = 'MyPaperClassName'; render( @@ -405,7 +403,7 @@ describe('', () => { const handleEntering = spy(); const { setProps } = render( @@ -430,7 +428,7 @@ describe('', () => { const paperRenderSpy = spy(PopoverPaper, 'render'); const { setProps } = render( ', () => { it('should pass through container prop if container and anchorEl props are provided', () => { const container = document.createElement('div'); - const anchorEl = document.createElement('div'); - render(); + render(); expect(container.querySelector('[data-testid="popover"]').parentElement).to.equal(container); }); it("should use anchorEl's parent body as container if container not provided", () => { - const anchorEl = document.createElement('div'); - render(); + render(); - expect(screen.getByTestId('popover').parentElement).to.equal(anchorEl.ownerDocument.body); + expect(screen.getByTestId('popover').parentElement).to.equal( + defaultAnchorEl.ownerDocument.body, + ); }); describe('warnings', () => { @@ -622,7 +620,7 @@ describe('', () => { PropTypes.checkPropTypes( Popover.propTypes, { - anchorEl: document.createElement('div'), + anchorEl: defaultAnchorEl, classes: {}, open: false, PaperProps: { component: () =>
, elevation: 4 }, @@ -642,7 +640,7 @@ describe('', () => { function openPopover(anchorOrigin) { render( ', () => { describe('prop anchorReference="none"', () => { it('should not try to change the position', () => { - const anchorEl = document.createElement('div'); render( ', () => { describe('prop: marginThreshold', () => { [0, 18, 16].forEach((marginThreshold) => { - function getElementStyleOfOpenPopover(anchorEl = document.createElement('svg')) { + function getElementStyleOfOpenPopover(anchorEl = defaultAnchorEl) { let style; render( ', () => { )); TransitionComponent.muiSupportAuto = true; render( - +
, ); @@ -1022,11 +1015,7 @@ describe('', () => {
)); render( - +
, ); @@ -1050,7 +1039,7 @@ describe('', () => { }, })} > - +
, @@ -1066,7 +1055,7 @@ describe('', () => { render( ', () => { const paperRef = { current: null }; render( ', () => { let rtlTheme; const { clock, render } = createRenderer({ clock: 'fake' }); + + let defaultAnchorElm = null; + const defaultProps = { - anchorEl: () => document.createElement('svg'), + anchorEl: () => defaultAnchorElm, children: Hello World, open: true, }; @@ -20,6 +23,12 @@ describe('', () => { rtlTheme = createTheme({ direction: 'rtl', }); + defaultAnchorElm = document.createElement('div'); + document.body.appendChild(defaultAnchorElm); + }); + + afterAll(() => { + document.body.removeChild(defaultAnchorElm); }); describeConformance(, () => ({ diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js index 12913acc8f0d64..34cbf9672e48c5 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js @@ -254,6 +254,8 @@ describe('', () => { expect(screen.queryByRole('tooltip')).to.equal(null); expect(fab).to.have.attribute('aria-expanded', 'false'); expect(fab).toHaveFocus(); + + await flushEffects(); }, ); }); diff --git a/packages/mui-material/src/utils/useSlot.test.tsx b/packages/mui-material/src/utils/useSlot.test.tsx index ed3712bd70de31..de61e82b4f03fa 100644 --- a/packages/mui-material/src/utils/useSlot.test.tsx +++ b/packages/mui-material/src/utils/useSlot.test.tsx @@ -9,6 +9,18 @@ import useSlot from './useSlot'; describe('useSlot', () => { const { render } = createRenderer(); + let defaultAnchorElm: HTMLDivElement | null = null; + beforeAll(() => { + defaultAnchorElm = document.createElement('div'); + document.body.appendChild(defaultAnchorElm); + }); + afterAll(() => { + if (defaultAnchorElm !== null) { + document.body.removeChild(defaultAnchorElm); + defaultAnchorElm = null; + } + }); + describe('single slot', () => { const ItemRoot = styled('button')({}); const Item = React.forwardRef< @@ -139,7 +151,7 @@ describe('useSlot', () => { ownerState: {}, additionalProps: { open: true, // !!force the popper to always visible for testing - anchorEl: () => document.createElement('div'), + anchorEl: () => defaultAnchorElm!, }, internalForwardedProps: { slots: { root: ItemRoot }, @@ -213,7 +225,7 @@ describe('useSlot', () => { additionalProps: { open: true, // !!force the popper to always visible for testing role: 'menu', - anchorEl: () => document.createElement('div'), + anchorEl: () => defaultAnchorElm!, }, internalForwardedProps: { slots: { root: ItemListbox },