import React, { useState } from 'react'; import { mount } from 'enzyme'; import { MailOutlined, InboxOutlined, AppstoreOutlined, PieChartOutlined, UserOutlined, } from '@ant-design/icons'; import { render, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import { act } from 'react-dom/test-utils'; import Menu from '..'; import Layout from '../../layout'; import Tooltip from '../../tooltip'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import collapseMotion from '../../_util/motion'; globalThis.IS_REACT_ACT_ENVIRONMENT = true; const { SubMenu } = Menu; const noop = () => {}; describe('Menu', () => { function triggerAllTimer() { for (let i = 0; i < 10; i += 1) { act(() => { jest.runAllTimers(); }); } } const expectSubMenuBehavior = (defaultProps, instance, enter = noop, leave = noop) => { const { container } = instance; expect(container.querySelectorAll('ul.ant-menu-sub')).toHaveLength(0); const AnimationClassNames = { horizontal: 'ant-slide-up-leave', inline: 'ant-motion-collapse-leave', vertical: 'ant-zoom-big-leave', }; const mode = defaultProps.mode || 'horizontal'; act(() => { enter(); }); // React concurrent may delay creat this triggerAllTimer(); function getSubMenu() { if (mode === 'inline') { return container.querySelector('ul.ant-menu-sub.ant-menu-inline'); } return container.querySelector('div.ant-menu-submenu-popup'); } expect( getSubMenu().classList.contains('ant-menu-hidden') || getSubMenu().classList.contains(AnimationClassNames[mode]), ).toBeFalsy(); act(() => { leave(); }); // React concurrent may delay creat this triggerAllTimer(); if (getSubMenu()) { expect( getSubMenu().classList.contains('ant-menu-hidden') || getSubMenu().classList.contains(AnimationClassNames[mode]), ).toBeTruthy(); } }; // window.requestAnimationFrame = callback => window.setTimeout(callback, 16); // window.cancelAnimationFrame = window.clearTimeout; beforeEach(() => { jest.useFakeTimers(); jest.clearAllTimers(); }); afterEach(() => { jest.useRealTimers(); }); mountTest(() => ( )); mountTest(() => ( <> {null} {/* eslint-disable-next-line react/jsx-no-useless-fragment */} <> {undefined} {/* eslint-disable-next-line react/jsx-no-useless-fragment */} <> {/* eslint-disable-next-line react/jsx-no-useless-fragment */} <> )); rtlTest(() => ( )); let div; beforeEach(() => { div = document.createElement('div'); document.body.appendChild(div); }); afterEach(() => { document.body.removeChild(div); }); it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', () => { const wrapper = mount( Option 1 Option 2 Option 3 Option 4 menu2 , ); expect(wrapper.find('li.ant-menu-submenu-selected').length).toBe(1); }); it('forceSubMenuRender', () => { const wrapper = mount( , ); expect(wrapper.find('.bamboo').hostNodes()).toHaveLength(0); wrapper.setProps({ forceSubMenuRender: true }); expect(wrapper.find('.bamboo').hostNodes()).toHaveLength(1); }); it('should accept defaultOpenKeys in mode horizontal', () => { const wrapper = mount( Option 1 Option 2 menu2 , ); expect(wrapper.exists('.ant-menu-sub')).toBeFalsy(); }); it('should accept defaultOpenKeys in mode inline', () => { const wrapper = mount( Option 1 Option 2 menu2 , ); expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true); }); it('should accept defaultOpenKeys in mode vertical', () => { const wrapper = mount( Option 1 Option 2 menu2 , ); expect(wrapper.find('PopupTrigger').first().prop('visible')).toBeTruthy(); }); it('should accept openKeys in mode horizontal', () => { const wrapper = mount( Option 1 Option 2 menu2 , ); expect(wrapper.find('PopupTrigger').first().prop('visible')).toBeTruthy(); }); it('should accept openKeys in mode inline', () => { const wrapper = mount( Option 1 Option 2 menu2 , ); expect(wrapper.find('InlineSubMenuList').first().prop('open')).toBeTruthy(); }); it('should accept openKeys in mode vertical', () => { const wrapper = mount( Option 1 Option 2 menu2 , ); expect(wrapper.find('PopupTrigger').first().prop('visible')).toBeTruthy(); }); it('test submenu in mode horizontal', async () => { const defaultProps = { mode: 'horizontal', }; const Demo = props => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => instance.rerender(), () => instance.rerender(), ); instance.rerender(); }); it('test submenu in mode inline', () => { const defaultProps = { mode: 'inline' }; const Demo = props => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => instance.rerender(), () => instance.rerender(), ); }); it('test submenu in mode vertical', () => { const defaultProps = { mode: 'vertical', openTransitionName: '' }; const Demo = props => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => instance.rerender(), () => instance.rerender(), ); }); describe('allows the overriding of theme at the popup submenu level', () => { const menuModesWithPopupSubMenu = ['horizontal', 'vertical']; menuModesWithPopupSubMenu.forEach(menuMode => { it(`when menu is mode ${menuMode}`, () => { const { container } = render( Option 1 Option 2 menu2 , ); act(() => { jest.runAllTimers(); }); expect(container.querySelector('ul.ant-menu-root')).toHaveClass('ant-menu-dark'); expect(container.querySelector('div.ant-menu-submenu-popup')).toHaveClass('ant-menu-light'); }); }); }); // https://github.com/ant-design/ant-design/pulls/4677 // https://github.com/ant-design/ant-design/issues/4692 // TypeError: Cannot read property 'indexOf' of undefined it('pr #4677 and issue #4692', () => { render( menu1 menu2 , ); act(() => { jest.runAllTimers(); }); // just expect no error emit }); it('should always follow openKeys when mode is switched', () => { const Demo = props => ( Option 1 Option 2 menu2 ); const { container, rerender } = render(); expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden'); rerender(); expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden'); rerender(); expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden'); }); it('should always follow openKeys when inlineCollapsed is switched', () => { const wrapper = mount( }> Option Option Option , ); expect(wrapper.find('InlineSubMenuList').prop('open')).toBeTruthy(); // inlineCollapsed wrapper.setProps({ inlineCollapsed: true }); act(() => { jest.runAllTimers(); wrapper.update(); }); expect(wrapper.find('ul.ant-menu-root').hasClass('ant-menu-vertical')).toBeTruthy(); expect(wrapper.find('PopupTrigger').prop('visible')).toBeFalsy(); // !inlineCollapsed wrapper.setProps({ inlineCollapsed: false }); act(() => { jest.runAllTimers(); wrapper.update(); }); expect(wrapper.find('ul.ant-menu-sub').last().hasClass('ant-menu-inline')).toBeTruthy(); expect(wrapper.find('InlineSubMenuList').prop('open')).toBeTruthy(); }); it('inlineCollapsed should works well when specify a not existed default openKeys', () => { const Demo = props => ( }> Option Option Option ); const { container, rerender } = render(); expect(container.querySelectorAll('.ant-menu-sub')).toHaveLength(0); rerender(); act(() => { jest.runAllTimers(); }); const transitionEndEvent = new Event('transitionend'); fireEvent(container.querySelector('ul'), transitionEndEvent); act(() => { jest.runAllTimers(); }); fireEvent.mouseEnter(container.querySelector('.ant-menu-submenu-title')); triggerAllTimer(); expect(container.querySelector('.ant-menu-submenu')).toHaveClass('ant-menu-submenu-vertical'); expect(container.querySelector('.ant-menu-submenu')).toHaveClass('ant-menu-submenu-open'); expect(container.querySelector('ul.ant-menu-sub')).toHaveClass('ant-menu-vertical'); expect(container.querySelector('ul.ant-menu-sub')).not.toHaveClass('ant-menu-hidden'); }); it('inlineCollapsed Menu.Item Tooltip can be removed', () => { const wrapper = mount( node.parentNode} > item item item item item item , ); expect(wrapper.find(Menu.Item).at(0).find(Tooltip).props().title).toBe('item'); expect(wrapper.find(Menu.Item).at(1).find(Tooltip).props().title).toBe('title'); expect(wrapper.find(Menu.Item).at(2).find(Tooltip).props().title).toBe('item'); expect(wrapper.find(Menu.Item).at(3).find(Tooltip).props().title).toBe(null); expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe(''); expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe(''); }); describe('open submenu when click submenu title', () => { const toggleMenu = (instance, index, event) => { fireEvent[event](instance.container.querySelectorAll('.ant-menu-submenu-title')[index]); triggerAllTimer(); }; it('inline', () => { const defaultProps = { mode: 'inline' }; const Demo = props => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => toggleMenu(instance, 0, 'click'), () => toggleMenu(instance, 0, 'click'), ); }); it('inline menu collapseMotion should be triggered', async () => { const cloneMotion = { ...collapseMotion, motionDeadline: 1, }; const onOpenChange = jest.fn(); const onEnterEnd = jest.spyOn(cloneMotion, 'onEnterEnd'); const { container } = render( Option 1 Option 2 menu2 , ); fireEvent.click(container.querySelector('.ant-menu-submenu-title')); triggerAllTimer(); expect(onOpenChange).toHaveBeenCalled(); expect(onEnterEnd).toHaveBeenCalledTimes(1); }); it('vertical with hover(default)', () => { const defaultProps = { mode: 'vertical' }; const Demo = () => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => toggleMenu(instance, 0, 'mouseEnter'), () => toggleMenu(instance, 0, 'mouseLeave'), ); }); it('vertical with click', () => { const defaultProps = { mode: 'vertical', triggerSubMenuAction: 'click' }; const Demo = () => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => toggleMenu(instance, 0, 'click'), () => toggleMenu(instance, 0, 'click'), ); }); it('horizontal with hover(default)', () => { const defaultProps = { mode: 'horizontal' }; const Demo = () => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => toggleMenu(instance, 0, 'mouseEnter'), () => toggleMenu(instance, 0, 'mouseLeave'), ); }); it('horizontal with click', () => { const defaultProps = { mode: 'horizontal', triggerSubMenuAction: 'click' }; const Demo = () => ( Option 1 Option 2 menu2 ); const instance = render(); expectSubMenuBehavior( defaultProps, instance, () => toggleMenu(instance, 0, 'click'), () => toggleMenu(instance, 0, 'click'), ); }); }); it('inline title', () => { const wrapper = mount( }> Option 1 test , ); wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter'); triggerAllTimer(); wrapper.update(); const text = wrapper.find('.ant-tooltip-inner').text(); expect(text).toBe('bamboo lucky'); }); it('render correctly when using with Layout.Sider', () => { class Demo extends React.Component { state = { collapsed: false, }; onCollapse = collapsed => this.setState({ collapsed }); render() { const { collapsed } = this.state; return (
} title="User"> Tom Bill Alex ); } } const wrapper = mount(); expect(wrapper.find(Menu).at(0).getDOMNode().classList.contains('ant-menu-inline')).toBe(true); wrapper.find('.ant-menu-submenu-title').simulate('click'); wrapper.find('.ant-layout-sider-trigger').simulate('click'); triggerAllTimer(); wrapper.update(); expect(wrapper.find(Menu).getDOMNode().classList.contains('ant-menu-inline-collapsed')).toBe( true, ); wrapper.find(Menu).simulate('mouseenter'); expect(wrapper.find(Menu).getDOMNode().classList.contains('ant-menu-inline')).toBe(false); expect(wrapper.find(Menu).getDOMNode().classList.contains('ant-menu-vertical')).toBe(true); }); it('onMouseEnter should work', () => { const onMouseEnter = jest.fn(); const wrapper = mount( Navigation One Navigation Two , ); wrapper.find('ul.ant-menu-root').simulate('mouseenter'); expect(onMouseEnter).toHaveBeenCalled(); }); it('MenuItem should not render Tooltip when inlineCollapsed is false', () => { const wrapper = mount( }> Navigation One }> Navigation Two Navigation Four - Link , { attachTo: div }, ); wrapper.find('li.ant-menu-item').first().simulate('mouseenter'); act(() => { jest.runAllTimers(); wrapper.update(); }); expect(wrapper.find('.ant-tooltip-inner').length).toBe(0); }); it('MenuItem should render icon and icon should be the first child when icon exists', () => { const wrapper = mount( }> Navigation One , ); expect(wrapper.find('.ant-menu-item .anticon').hasClass('anticon-mail')).toBe(true); }); it('should controlled collapse work', () => { const wrapper = mount( }> Option 1 , ); expect(wrapper.render()).toMatchSnapshot(); wrapper.setProps({ inlineCollapsed: true }); expect(wrapper.render()).toMatchSnapshot(); }); it('not title if not collapsed', () => { jest.useFakeTimers(); const wrapper = mount( }> Option 1 , ); wrapper.find('.ant-menu-item').hostNodes().simulate('mouseenter'); jest.runAllTimers(); wrapper.update(); expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy(); jest.useRealTimers(); }); it('props#onOpen and props#onClose do not warn anymore', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const onOpen = jest.fn(); const onClose = jest.fn(); render( Option 1 Option 2 menu2 , ); expect(errorSpy.mock.calls.length).toBe(1); expect(errorSpy.mock.calls[0][0]).not.toContain( '`onOpen` and `onClose` are removed, please use `onOpenChange` instead, see: https://u.ant.design/menu-on-open-change.', ); expect(onOpen).not.toHaveBeenCalled(); expect(onClose).not.toHaveBeenCalled(); }); // https://github.com/ant-design/ant-design/issues/18825 // https://github.com/ant-design/ant-design/issues/8587 it('should keep selectedKeys in state when collapsed to 0px', () => { jest.useFakeTimers(); const wrapper = mount( Option 1 Option 2 Option 4 , ); expect(wrapper.find('li.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 1'); wrapper.find('li.ant-menu-item').at(1).simulate('click'); expect(wrapper.find('li.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2'); wrapper.setProps({ inlineCollapsed: true }); act(() => { jest.runAllTimers(); wrapper.update(); }); expect( wrapper .find('PopupTrigger') .map(node => node.prop('popupVisible')) .findIndex(node => !!node), ).toBe(-1); wrapper.setProps({ inlineCollapsed: false }); expect(wrapper.find('li.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2'); jest.useRealTimers(); }); it('Menu.Item with icon children auto wrap span', () => { const wrapper = mount( }> Navigation One }> Navigation One } title="Navigation One" /> } title={Navigation One} /> , ); expect(wrapper.render()).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/23755 it('should trigger onOpenChange when collapse inline menu', () => { const onOpenChange = jest.fn(); function App() { const [inlineCollapsed, setInlineCollapsed] = useState(false); return ( <> menu menu ); } const wrapper = mount(); wrapper.find('button').simulate('click'); expect(onOpenChange).toHaveBeenCalledWith([]); }); it('Use first char as Icon when collapsed', () => { const wrapper = mount( Bamboo , ); expect(wrapper.find('.ant-menu-inline-collapsed-noicon').first().text()).toEqual('L'); expect(wrapper.find('.ant-menu-inline-collapsed-noicon').last().text()).toEqual('B'); }); it('divider should show', () => { const wrapper = mount( Option 1 Option 2 Option 3 , ); expect(wrapper.find('li.ant-menu-item-divider').length).toBe(2); expect(wrapper.find('li.ant-menu-item-divider-dashed').length).toBe(1); }); it('expandIcon', () => { const wrapper = mount( }> Option 1 , ); expect(wrapper.exists('.bamboo')).toBeTruthy(); }); });