diff --git a/docs/demo/fragment.md b/docs/demo/fragment.md deleted file mode 100644 index 8d04c249..00000000 --- a/docs/demo/fragment.md +++ /dev/null @@ -1,3 +0,0 @@ -## fragment - - diff --git a/docs/examples/antd.tsx b/docs/examples/antd.tsx index f5bd0bba..7796cd24 100644 --- a/docs/examples/antd.tsx +++ b/docs/examples/antd.tsx @@ -2,7 +2,9 @@ import React from 'react'; import type { CSSMotionProps } from 'rc-motion'; -import Menu, { SubMenu, Item as MenuItem, Divider, MenuProps } from '../../src'; +import Menu from 'rc-menu'; +import type { ItemType } from '@/interface'; +import type { MenuProps } from 'rc-menu'; import '../../assets/index.less'; function handleClick(info) { @@ -48,75 +50,142 @@ const motionMap: Record = { vertical: verticalMotion, }; -const nestSubMenu = ( - offset sub menu 2} - key="4" - popupOffset={[10, 15]} - > - inner inner - - sub menu 1} - > - sub 4-2-0} - key="4-2-0" - > - inner inner - inner inner2 - - inn - sub menu 4} - key="4-2-2" - > - inner inner - inner inner2 - - sub menu 3} - key="4-2-3" - > - inner inner - inner inner2 - - - -); +const nestSubMenu: ItemType = { + key: '4', + type: 'submenu', + label: offset sub menu 2, + popupOffset: [10, 15], + children: [ + { + key: '4-1', + label: 'inner inner', + }, + { + type: 'divider', + }, + { + key: '4-2', + type: 'submenu', + label: sub menu 1, + children: [ + { + key: '4-2-0', + type: 'submenu', + label: sub 4-2-0, + children: [ + { + key: '4-2-0-1', + label: 'inner inner', + }, + { + key: '4-2-0-2', + label: 'inner inner2', + }, + ], + }, + { + key: '4-2-1', + label: 'inn', + }, + { + key: '4-2-2', + type: 'submenu', + label: sub menu 4, + children: [ + { + key: '4-2-2-1', + label: 'inner inner', + }, + { + key: '4-2-2-2', + label: 'inner inner2', + }, + ], + }, + { + key: '4-2-3', + type: 'submenu', + label: sub menu 3, + children: [ + { + key: '4-2-3-1', + label: 'inner inner', + }, + { + key: '4-2-3-2', + label: 'inner inner2', + }, + ], + }, + ], + }, + ], +}; function onOpenChange(value) { console.log('onOpenChange', value); } -const children1 = [ - sub menu} - key="1" - > - 0-1 - 0-2 - , +const items1: ItemType[] = [ + { + type: 'submenu', + key: '1', + label: sub menu, + children: [ + { + key: '1-1', + label: '0-1', + }, + { + key: '1-2', + label: '0-2', + }, + ], + }, nestSubMenu, - 1, - outer, - - disabled - , - outer3, + { + key: '2', + label: '1', + }, + { + key: '3', + label: 'outer', + }, + { + key: '5', + label: 'disabled', + disabled: true, + }, + { + key: '6', + label: 'outer3', + }, ]; -const children2 = [ - sub menu} - key="1" - > - 0-1 - 0-2 - , - 1, - outer, +const items2 = [ + { + type: 'submenu', + key: '1', + label: sub menu, + children: [ + { + key: '1-1', + label: '0-1', + }, + { + key: '1-2', + label: '0-2', + }, + ], + }, + { + key: '2', + label: '1', + }, + { + key: '3', + label: 'outer', + }, ]; const customizeIndicator = Add More Items; @@ -127,7 +196,7 @@ interface CommonMenuProps extends MenuProps { } interface CommonMenuState { - children: React.ReactNode; + items: ItemType[]; overflowedIndicator: React.ReactNode; } @@ -136,13 +205,14 @@ export class CommonMenu extends React.Component< CommonMenuState > { state: CommonMenuState = { - children: children1, + items: items1 as ItemType[], overflowedIndicator: undefined, }; toggleChildren = () => { - this.setState(({ children }) => ({ - children: children === children1 ? children2 : children1, + // @ts-ignore + this.setState(({ items }) => ({ + items: items === items1 ? items2 : items1, })); }; @@ -155,13 +225,13 @@ export class CommonMenu extends React.Component< render() { const { triggerSubMenuAction } = this.props; - const { children, overflowedIndicator } = this.state; + const { items, overflowedIndicator } = this.state; return (
{this.props.updateChildrenAndOverflowedIndicator && (
); } diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx index 7b1f075b..a9f37faf 100644 --- a/docs/examples/custom-icon.tsx +++ b/docs/examples/custom-icon.tsx @@ -1,7 +1,8 @@ /* eslint-disable no-console, no-param-reassign */ import * as React from 'react'; -import Menu, { SubMenu, Item as MenuItem, Divider } from '../../src'; +import Menu from 'rc-menu'; import '../../assets/index.less'; +import type { ItemType } from '@/interface'; const getSvgIcon = (style = {}, text?: React.ReactNode) => { if (text) { @@ -67,50 +68,126 @@ class Demo extends React.Component { console.log(info); }; - renderNestSubMenu = (props = {}) => ( - offset sub menu 2} - key="4" - popupOffset={[10, 15]} - {...props} - > - inner inner - - sub menu 3}> - - inner inner - inner inner2 - - inn - sub menu 4} key="4-2-2"> - inner inner - inner inner2 - - - inner inner - inner inner2 - - - - ); + renderNestSubMenu = (props = {}) => ({ + key: '4', + type: 'submenu', + label: offset sub menu 2, + popupOffset: [10, 15], + children: [ + { + key: '4-1', + label: 'inner inner', + }, + { + type: 'divider', + }, + { + key: '4-2', + type: 'submenu', + label: sub menu 3, + children: [ + { + key: '4-2-0', + type: 'submenu', + label: 'sub 4-2-0', + children: [ + { + key: '4-2-0-1', + label: 'inner inner', + }, + { + key: '4-2-0-2', + label: 'inner inner2', + }, + ], + }, + { + key: '4-2-1', + label: 'inn', + }, + { + key: '4-2-2', + type: 'submenu', + label: sub menu 4, + children: [ + { + key: '4-2-2-1', + label: 'inner inner', + }, + { + key: '4-2-2-2', + label: 'inner inner2', + }, + ], + }, + { + key: '4-2-3', + type: 'submenu', + label: 'sub 4-2-3', + children: [ + { + key: '4-2-3-1', + label: 'inner inner', + }, + { + key: '4-2-3-2', + label: 'inner inner2', + }, + ], + }, + ], + }, + ], + ...props, + }); - renderCommonMenu = (props = {}) => ( - - sub menu} key="1"> - 0-1 - 0-2 - - {this.renderNestSubMenu()} - 1 - outer - disabled - outer3 - - ); + renderCommonMenu = (props = {}) => { + const items: ItemType[] = [ + { + key: '1', + type: 'submenu', + label: sub menu, + children: [ + { + key: '1-1', + label: '0-1', + }, + { + key: '1-2', + label: '0-2', + }, + ], + }, + // @ts-ignore + this.renderNestSubMenu(), + { + key: '2', + label: '1', + }, + { + key: '3', + label: 'outer', + }, + { + key: '44', + label: 'disabled', + disabled: true, + }, + { + key: '5', + label: 'outer3', + }, + ]; + + return ( + + ); + }; render() { const verticalMenu = this.renderCommonMenu({ diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index a9db1e87..488833a7 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -2,8 +2,8 @@ import React, { useRef } from 'react'; import type { CSSMotionProps } from 'rc-motion'; -import Menu, { ItemGroup as MenuItemGroup, MenuItem } from '../../src'; -import type { MenuProps } from '../../src'; +import Menu from 'rc-menu'; +import type { MenuProps } from 'rc-menu'; import '../../assets/index.less'; import '../../assets/menu.less'; import type { MenuInfo, MenuRef } from '@/interface'; @@ -69,9 +69,7 @@ export default () => { return ( <>
- - Light - + - , - ); - }).not.toThrow(); - }); - it('select multiple items', () => { const { container } = render( - - 1 - 2 - , + , ); fireEvent.click(container.querySelector('.rc-menu-item')); @@ -275,10 +357,20 @@ describe('Menu', () => { it('can be controlled by selectedKeys', () => { const genMenu = (props?) => ( - - 1 - 2 - + ); const { container, rerender } = render(genMenu()); expect(container.querySelector('li').className).toContain('-selected'); @@ -290,9 +382,15 @@ describe('Menu', () => { it('empty selectedKeys not to throw', () => { render( - - foo - , + , ); }); @@ -300,9 +398,17 @@ describe('Menu', () => { const onSelect = jest.fn(); const genMenu = (props?) => ( - - Bamboo - + ); const { container, rerender } = render(genMenu()); @@ -321,10 +427,19 @@ describe('Menu', () => { it('select default item', () => { const { container } = render( - - 1 - 2 - , + , ); expect(container.querySelector('li').className).toContain('-selected'); }); @@ -333,10 +448,19 @@ describe('Menu', () => { // don't use selectedKeys as string // it is a compatible feature for https://github.com/ant-design/ant-design/issues/29429 const { container } = render( - - 1 - 2 - , + , ); expect(container.querySelector('li').className).not.toContain('-selected'); expect(container.querySelectorAll('li')[1].className).toContain( @@ -347,14 +471,34 @@ describe('Menu', () => { describe('openKeys', () => { it('can be controlled by openKeys', () => { const genMenu = (props?) => ( - - - 1 - - - 2 - - + ); const { container, rerender } = render(genMenu()); @@ -382,26 +526,47 @@ describe('Menu', () => { openKeys={undefined} selectedKeys={['1']} mode="inline" - > - - - - 123123 - - - - , + items={[ + { + key: 'submenu', + type: 'submenu', + label: '1231', + children: [ + { + key: 'item1', + label: ( + + 123123 + + ), + }, + ], + }, + ]} + />, ); expect(container.innerHTML).toBeTruthy(); }); it('null of openKeys', () => { const { container } = render( - - - Light - - , + , ); expect(container.innerHTML).toBeTruthy(); }); @@ -409,14 +574,33 @@ describe('Menu', () => { it('open default submenu', () => { const { container } = render( - - - 1 - - - 2 - - , + , ); act(() => { @@ -434,10 +618,19 @@ describe('Menu', () => { it('fires select event', () => { const handleSelect = jest.fn(); const { container } = render( - - 1 - 2 - , + , ); fireEvent.click(container.querySelector('.rc-menu-item')); expect(handleSelect.mock.calls[0][0].key).toBe('1'); @@ -450,13 +643,31 @@ describe('Menu', () => { const handleClick = jest.fn(); const { container } = render( - - 1 - 2 - - 3 - - , + , ); act(() => { @@ -482,10 +693,20 @@ describe('Menu', () => { it('fires deselect event', () => { const handleDeselect = jest.fn(); const { container } = render( - - 1 - 2 - , + , ); const item = container.querySelector('.rc-menu-item'); fireEvent.click(item); @@ -495,24 +716,44 @@ describe('Menu', () => { it('active by mouse enter', () => { const { container } = render( - - item - disabled - item2 - , + , ); - // wrapper.find('li').last().simulate('mouseEnter'); fireEvent.mouseEnter(last(container.querySelectorAll('.rc-menu-item'))); - // expect(wrapper.isActive(2)).toBeTruthy(); isActive(container, 2); }); it('active by key down', () => { const genMenu = (props?) => ( - - 1 - 2 - + ); const { container, rerender } = render(genMenu()); @@ -530,9 +771,16 @@ describe('Menu', () => { it('defaultActiveFirst', () => { const { container } = render( - - foo - , + , ); isActive(container, 0); }); @@ -550,12 +798,26 @@ describe('Menu', () => { }; render( - - menuItem - - menuItem - - , + , ); expect(global.triggerProps.builtinPlacements.leftTop).toEqual( @@ -572,11 +834,23 @@ describe('Menu', () => { it('defaultMotions should work correctly', () => { const genMenu = (props?) => ( - - - - - + ); const { rerender } = render(genMenu()); @@ -605,11 +879,19 @@ describe('Menu', () => { defaultMotions={defaultMotions} motion={{ motionName: 'bambooLight' }} {...props} - > - - - - + items={[ + { + key: 'bamboo', + type: 'submenu', + children: [ + { + key: 'light', + label: '', + }, + ], + }, + ]} + /> ); const { rerender } = render(genMenu()); @@ -628,11 +910,22 @@ describe('Menu', () => { it('inline does not affect vertical motion', () => { const genMenu = (props?) => ( - - - - - + ); const { rerender } = render(genMenu({ mode: 'vertical' })); @@ -646,10 +939,20 @@ describe('Menu', () => { it('onMouseEnter should work', () => { const onMouseEnter = jest.fn(); const { container } = render( - - Navigation One - Navigation Two - , + , ); fireEvent.mouseEnter(container.querySelector('.rc-menu-root')); @@ -658,11 +961,23 @@ describe('Menu', () => { it('Nest children active should bump to top', async () => { const { container } = render( - - - Light - - , + , ); expect(container.querySelector('.rc-menu-submenu-active')).toBeTruthy(); @@ -672,9 +987,14 @@ describe('Menu', () => { const errorSpy = jest.spyOn(console, 'error'); const { unmount } = render( - - Bamboo - , + , ); unmount(); @@ -697,11 +1017,20 @@ describe('Menu', () => { mode="vertical" onOpenChange={onOpenChange} {...props} - > - - Light - - , + items={[ + { + key: 'bamboo', + type: 'submenu', + label: 'Bamboo', + children: [ + { + key: 'light', + label: 'Light', + }, + ], + }, + ]} + />, ); // Open menu @@ -723,11 +1052,24 @@ describe('Menu', () => { const onOpenChange = jest.fn(); const { container } = render( - - - Light - - , + , ); // Open menu @@ -743,9 +1085,15 @@ describe('Menu', () => { it('should support ref', () => { const menuRef = React.createRef(); const { container } = render( - - Light - , + , ); expect(menuRef.current?.list).toBe(container.querySelector('ul')); @@ -756,11 +1104,23 @@ describe('Menu', () => { it('should render a divider with role="separator"', () => { const menuRef = React.createRef(); const { container } = render( - - Light - - Cat - , + , ); // Get the divider element with the rc-menu-item-divider class const divider = container.querySelector('.rc-menu-item-divider'); @@ -768,6 +1128,7 @@ describe('Menu', () => { // Assert that the divider element with rc-menu-item-divider class has role="separator" expect(divider).toHaveAttribute('role', 'separator'); }); + it('expandIcon should be hidden when setting null or false', () => { const App = ({ expand, @@ -776,18 +1137,46 @@ describe('Menu', () => { expand?: React.ReactNode; subExpand?: React.ReactNode; }) => ( - - - 0-1 - 0-2 - - , - - 0-1 - 0-2 - - ,Cat - + ); const { container, rerender } = render( diff --git a/tests/MenuItem.spec.tsx b/tests/MenuItem.spec.tsx index d5cc0d12..18371353 100644 --- a/tests/MenuItem.spec.tsx +++ b/tests/MenuItem.spec.tsx @@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react'; import KeyCode from 'rc-util/lib/KeyCode'; import React from 'react'; -import Menu, { MenuItem, MenuItemGroup, SubMenu } from '../src'; +import Menu from '../src'; describe('MenuItem', () => { const subMenuIconText = 'SubMenuIcon'; @@ -27,9 +27,17 @@ describe('MenuItem', () => { describe('custom icon', () => { it('should render custom arrow icon correctly.', () => { const { container } = render( - - 1 - , + , ); const menuItemText = container.querySelector('.rc-menu-item').textContent; expect(menuItemText).toEqual(`1${menuItemIconText}`); @@ -38,12 +46,22 @@ describe('MenuItem', () => { it('should render custom arrow icon correctly (with children props).', () => { const targetText = 'target'; const { container } = render( - - {targetText}}> - 1 - - 2 - , + {targetText}, + }, + { + key: '2', + label: '2', + }, + ]} + />, ); const menuItemText = container.querySelector('.rc-menu-item').textContent; expect(menuItemText).toEqual(`1${targetText}`); @@ -53,11 +71,16 @@ describe('MenuItem', () => { it('not fires select event when disabled', () => { const handleSelect = jest.fn(); const { container } = render( - - - Item content - - , + Item content, + }, + ]} + />, ); fireEvent.click(container.querySelector('.xx')); @@ -67,9 +90,16 @@ describe('MenuItem', () => { describe('menuItem events', () => { function renderMenu(props, itemProps) { return render( - - - , + , ); } @@ -120,21 +150,42 @@ describe('MenuItem', () => { }; const { container } = render( - - - 1 - - - - 3 - - - - - 4 - - - , + , ); expect(container.children).toMatchSnapshot(); @@ -153,9 +204,15 @@ describe('MenuItem', () => { describe('overwrite default role', () => { it('should set role to none if null', () => { const { container } = render( - - test - , + , ); expect(container.querySelector('li')).toMatchSnapshot(); @@ -163,9 +220,15 @@ describe('MenuItem', () => { it('should set role to none if none', () => { const { container } = render( - - test - , + , ); expect(container.querySelector('li')).toMatchSnapshot(); @@ -173,9 +236,15 @@ describe('MenuItem', () => { it('should set role to listitem', () => { const { container } = render( - - test - , + , ); expect(container.querySelector('li')).toMatchSnapshot(); @@ -183,9 +252,15 @@ describe('MenuItem', () => { it('should set role to option', () => { const { container } = render( - - test - , + , ); expect(container.querySelector('li')).toMatchSnapshot(); diff --git a/tests/Private.spec.tsx b/tests/Private.spec.tsx index 06bdac9b..4f426afe 100644 --- a/tests/Private.spec.tsx +++ b/tests/Private.spec.tsx @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import classnames from 'classnames'; import React from 'react'; -import Menu, { MenuItem, SubMenu } from '../src'; +import Menu from '../src'; describe('Private Props', () => { it('_internalRenderMenuItem', () => { @@ -13,9 +13,13 @@ describe('Private Props', () => { className: classnames(node.props.className, 'inject-cls'), }) } - > - 1 - , + items={[ + { + key: '1', + label: '1', + }, + ]} + />, ); expect(container.querySelector('.inject-cls')).toBeTruthy(); @@ -31,11 +35,20 @@ describe('Private Props', () => { className: classnames(node.props.className, 'inject-cls'), }) } - > - - 1-1 - - , + items={[ + { + key: '1', + type: 'submenu', + label: '1', + children: [ + { + key: '1-1', + label: '1-1', + }, + ], + }, + ]} + />, ); expect(container.querySelector('.inject-cls')).toBeTruthy(); diff --git a/tests/React18.spec.tsx b/tests/React18.spec.tsx index b505027d..51bfdd2d 100644 --- a/tests/React18.spec.tsx +++ b/tests/React18.spec.tsx @@ -2,7 +2,7 @@ import { act, render } from '@testing-library/react'; import React from 'react'; import type { MenuProps } from '../src'; -import Menu, { MenuItem, SubMenu } from '../src'; +import Menu from '../src'; describe('React18', () => { function runAllTimer() { @@ -24,17 +24,44 @@ describe('React18', () => { function createMenu(props?: MenuProps) { return ( - - - 1 - - 2 - - - - 2 - - + ); } diff --git a/tests/Responsive.spec.tsx b/tests/Responsive.spec.tsx index 9d1e6ff6..acaa3705 100644 --- a/tests/Responsive.spec.tsx +++ b/tests/Responsive.spec.tsx @@ -4,7 +4,7 @@ import ResizeObserver from 'rc-resize-observer'; import KeyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import React from 'react'; -import Menu, { MenuItem, SubMenu } from '../src'; +import Menu from '../src'; import { OVERFLOW_KEY } from '../src/hooks/useKeyRecords'; import { last } from './util'; @@ -84,11 +84,25 @@ describe('Menu.Responsive', () => { it('ssr render full', () => { const { container } = render( - - Light - Bamboo - Little - , + , ); expect(container.children).toMatchSnapshot(); @@ -103,13 +117,28 @@ describe('Menu.Responsive', () => { activeKey="little" onOpenChange={onOpenChange} {...props} - > - Light - Bamboo - - Little - - + items={[ + { + key: 'light', + label: 'Light', + }, + { + key: 'bamboo', + label: 'Bamboo', + }, + { + key: 'home', + label: 'Home', + type: 'submenu', + children: [ + { + key: 'little', + label: 'Little', + }, + ], + }, + ]} + /> ); const { container, rerender } = render(genMenu()); @@ -150,13 +179,6 @@ describe('Menu.Responsive', () => { }); spy.mockRestore(); - // Should show the rest icon - // expect( - // last(container.querySelectorAll('.rc-menu-overflow-item-rest')), - // ).not.toHaveStyle({ - // opacity: '0', - // }); - // Should set active on rest expect( last(container.querySelectorAll('.rc-menu-overflow-item-rest')), diff --git a/tests/SubMenu.spec.tsx b/tests/SubMenu.spec.tsx index f77e6d76..dd3950d7 100644 --- a/tests/SubMenu.spec.tsx +++ b/tests/SubMenu.spec.tsx @@ -2,7 +2,7 @@ import { act, fireEvent, render } from '@testing-library/react'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; -import Menu, { MenuItem, SubMenu } from '../src'; +import Menu from '../src'; import { isActive, last } from './util'; jest.mock('@rc-component/trigger', () => { @@ -48,17 +48,44 @@ describe('SubMenu', () => { function createMenu(props?) { return ( - - - 1 - - 2 - - - - 2 - - + ); } @@ -68,11 +95,23 @@ describe('SubMenu', () => { it("don't show submenu when disabled", () => { const { container } = render( - - - 1 - - , + , ); fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title')); @@ -81,11 +120,24 @@ describe('SubMenu', () => { it('offsets the submenu popover', () => { render( - - - 1 - - , + , ); const { popupAlign } = global.triggerProps; @@ -98,12 +150,24 @@ describe('SubMenu', () => { mode="vertical" itemIcon={itemIcon} expandIcon={SubMenuIconNode} - > - - 1 - 2 - - , + items={[ + { + key: 's', + label: 'submenu', + type: 'submenu', + children: [ + { + key: '1', + label: '1', + }, + { + key: '2', + label: '2', + }, + ], + }, + ]} + />, ); const wrapperWithExpandIconFunction = render( @@ -111,12 +175,24 @@ describe('SubMenu', () => { mode="vertical" itemIcon={itemIcon} expandIcon={() => SubMenuIconNode} - > - - 1 - 2 - - , + items={[ + { + key: 's', + label: 'submenu', + type: 'submenu', + children: [ + { + key: '1', + label: '1', + }, + { + key: '2', + label: '2', + }, + ], + }, + ]} + />, ); const subMenuText = container.querySelector( @@ -132,16 +208,25 @@ describe('SubMenu', () => { it('should Not render custom arrow icon in horizontal mode.', () => { const { container } = render( - - SubMenuIconNode} - > - 1 - - , + SubMenuIconNode, + children: [ + { + key: '1', + label: '1', + }, + ], + }, + ]} + />, ); const childText = container.querySelector( @@ -178,11 +263,21 @@ describe('SubMenu', () => { describe('openSubMenuOnMouseEnter and closeSubMenuOnMouseLeave are true', () => { it('toggles when mouse enter and leave', () => { const { container } = render( - - - 1 - - , + , ); // Enter @@ -222,89 +317,77 @@ describe('SubMenu', () => { it('fires openChange event', () => { const handleOpenChange = jest.fn(); const { container } = render( - - 1 - - 2 - - 3 - - - , + , ); // First fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title')); runAllTimer(); - expect(handleOpenChange).toHaveBeenCalledWith(['tmp_key-1']); + expect(handleOpenChange).toHaveBeenCalledWith(['s1']); // Second fireEvent.mouseEnter( container.querySelectorAll('.rc-menu-submenu-title')[1], ); runAllTimer(); - expect(handleOpenChange).toHaveBeenCalledWith([ - 'tmp_key-1', - 'tmp_key-tmp_key-1-1', - ]); + expect(handleOpenChange).toHaveBeenCalledWith(['s1', 's2']); }); describe('undefined key', () => { - it('warning item', () => { - resetWarned(); - - const errorSpy = jest - .spyOn(console, 'error') - .mockImplementation(() => {}); - - render( - - 1 - , - ); - - expect(errorSpy).toHaveBeenCalledWith( - 'Warning: MenuItem should not leave undefined `key`.', - ); - - errorSpy.mockRestore(); - }); - - it('warning sub menu', () => { - resetWarned(); - - const errorSpy = jest - .spyOn(console, 'error') - .mockImplementation(() => {}); - - render( - - - , - ); - - expect(errorSpy).toHaveBeenCalledWith( - 'Warning: SubMenu should not leave undefined `key`.', - ); - - errorSpy.mockRestore(); - }); - it('should not warning', () => { resetWarned(); - + const errors: any[] = []; const errorSpy = jest .spyOn(console, 'error') - .mockImplementation(() => {}); + .mockImplementation((msg, ...args) => { + // Only collect non-act related warnings + if (!msg.includes('act(...)')) { + errors.push([msg, ...args]); + } + }); render( - - - , + , ); - expect(errorSpy).not.toHaveBeenCalled(); - + // Check if there are any non-act related warnings + expect(errors).toHaveLength(0); errorSpy.mockRestore(); }); }); @@ -336,16 +419,24 @@ describe('SubMenu', () => { const onMouseEnter = jest.fn(); const onMouseLeave = jest.fn(); const { container } = render( - - - 1 - - , + , ); fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title')); expect(onMouseEnter).toHaveBeenCalledTimes(1); @@ -396,15 +487,24 @@ describe('SubMenu', () => { }); it('should take style prop', () => { - const App = () => ( - - - 1 - - + const { container } = render( + , ); - - const { container } = render(); expect(container.querySelector('.rc-menu')).toHaveStyle({ backgroundColor: 'black', }); @@ -412,11 +512,18 @@ describe('SubMenu', () => { it('not pass style into sub menu item', () => { const { container } = render( - - - 1 - - , + , ); expect(container.querySelector('.rc-menu-item')).toHaveStyle({ @@ -428,14 +535,35 @@ describe('SubMenu', () => { const onOpenChange = jest.fn(); const { container } = render( - - - Little - - - Sub - - , + , ); // Disabled @@ -449,11 +577,24 @@ describe('SubMenu', () => { it('popup className should correct', () => { const { container } = render( - - - - - , + , ); runAllTimer(); @@ -469,19 +610,34 @@ describe('SubMenu', () => { it('should support rootClassName', () => { const { container } = render( - - - - submenu7 - - - - 2 - - - 3 - - , + , ); expect(container.children).toMatchSnapshot(); @@ -508,15 +664,22 @@ describe('SubMenu', () => { it('submenu should support popupStyle', () => { const { container } = render( - - - 1 - - , + , ); fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title')); diff --git a/tests/__snapshots__/Menu.spec.tsx.snap b/tests/__snapshots__/Menu.spec.tsx.snap index 633a94e3..3e7344f5 100644 --- a/tests/__snapshots__/Menu.spec.tsx.snap +++ b/tests/__snapshots__/Menu.spec.tsx.snap @@ -134,11 +134,11 @@ HTMLCollection [ role="none" >