2020-05-03 00:10:21 +08:00
|
|
|
import React, { useState } from 'react';
|
2017-01-16 21:13:59 +08:00
|
|
|
import { mount } from 'enzyme';
|
2020-04-26 23:16:15 +08:00
|
|
|
import {
|
|
|
|
MailOutlined,
|
|
|
|
InboxOutlined,
|
|
|
|
AppstoreOutlined,
|
|
|
|
PieChartOutlined,
|
|
|
|
UserOutlined,
|
|
|
|
} from '@ant-design/icons';
|
2017-01-16 21:13:59 +08:00
|
|
|
import Menu from '..';
|
2019-03-14 21:04:13 +08:00
|
|
|
import Layout from '../../layout';
|
2020-03-13 19:43:10 +08:00
|
|
|
import Tooltip from '../../tooltip';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2017-01-16 21:13:59 +08:00
|
|
|
|
2017-10-09 13:23:20 +08:00
|
|
|
const { SubMenu } = Menu;
|
2017-01-16 21:13:59 +08:00
|
|
|
|
|
|
|
describe('Menu', () => {
|
2019-08-29 23:41:46 +08:00
|
|
|
mountTest(() => (
|
|
|
|
<Menu>
|
|
|
|
<Menu.Item />
|
|
|
|
<Menu.ItemGroup />
|
|
|
|
<Menu.SubMenu />
|
|
|
|
</Menu>
|
2020-01-02 19:10:16 +08:00
|
|
|
));
|
|
|
|
|
|
|
|
rtlTest(() => (
|
|
|
|
<Menu>
|
|
|
|
<Menu.Item />
|
|
|
|
<Menu.ItemGroup />
|
|
|
|
<Menu.SubMenu />
|
|
|
|
</Menu>
|
2019-08-29 23:41:46 +08:00
|
|
|
));
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2017-11-16 17:12:36 +08:00
|
|
|
beforeEach(() => {
|
|
|
|
jest.useFakeTimers();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
jest.useRealTimers();
|
|
|
|
});
|
|
|
|
|
2018-06-01 18:09:11 +08:00
|
|
|
it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu defaultSelectedKeys={['1-3-2']} mode="vertical">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="1-1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="1-2">Option 2</Menu.Item>
|
|
|
|
<SubMenu key="1-3" title="submenu1-3">
|
|
|
|
<Menu.Item key="1-3-1">Option 3</Menu.Item>
|
|
|
|
<Menu.Item key="1-3-2">Option 4</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2018-06-01 18:09:11 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-submenu-selected').length).toBe(1);
|
|
|
|
});
|
|
|
|
|
2017-01-16 21:13:59 +08:00
|
|
|
it('should accept defaultOpenKeys in mode horizontal', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu defaultOpenKeys={['1']} mode="horizontal">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-01-16 21:13:59 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
2017-01-16 21:13:59 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should accept defaultOpenKeys in mode inline', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu defaultOpenKeys={['1']} mode="inline">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-01-16 21:13:59 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
2017-01-16 21:13:59 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should accept defaultOpenKeys in mode vertical', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu defaultOpenKeys={['1']} mode="vertical">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-01-16 21:13:59 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
2017-01-16 21:13:59 +08:00
|
|
|
});
|
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
it('horizontal', () => {
|
2017-01-16 21:13:59 +08:00
|
|
|
const wrapper = mount(
|
2017-02-15 18:00:20 +08:00
|
|
|
<Menu openKeys={['1']} mode="horizontal" openTransitionName="">
|
2017-01-16 21:13:59 +08:00
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-01-16 21:13:59 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-02-15 18:00:20 +08:00
|
|
|
wrapper.setProps({ openKeys: [] });
|
2017-09-20 16:26:18 +08:00
|
|
|
wrapper.update();
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
|
2017-02-15 18:00:20 +08:00
|
|
|
wrapper.setProps({ openKeys: ['1'] });
|
2018-08-24 12:28:51 +08:00
|
|
|
wrapper.update();
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-01-16 21:13:59 +08:00
|
|
|
});
|
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
it('inline', () => {
|
2017-01-16 21:13:59 +08:00
|
|
|
const wrapper = mount(
|
2017-02-15 18:00:20 +08:00
|
|
|
<Menu openKeys={['1']} mode="inline" openAnimation="">
|
2017-01-16 21:13:59 +08:00
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-01-16 21:13:59 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-02-15 18:00:20 +08:00
|
|
|
wrapper.setProps({ openKeys: [] });
|
2017-09-20 16:26:18 +08:00
|
|
|
wrapper.update();
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
|
2017-02-15 18:00:20 +08:00
|
|
|
wrapper.setProps({ openKeys: ['1'] });
|
2018-08-24 12:28:51 +08:00
|
|
|
wrapper.update();
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-01-16 21:13:59 +08:00
|
|
|
});
|
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
it('vertical', () => {
|
2017-01-16 21:13:59 +08:00
|
|
|
const wrapper = mount(
|
2017-02-15 18:00:20 +08:00
|
|
|
<Menu openKeys={['1']} mode="vertical" openTransitionName="">
|
2017-01-16 21:13:59 +08:00
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-01-16 21:13:59 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-02-15 18:00:20 +08:00
|
|
|
wrapper.setProps({ openKeys: [] });
|
2017-09-20 16:26:18 +08:00
|
|
|
wrapper.update();
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
|
2017-02-15 18:00:20 +08:00
|
|
|
wrapper.setProps({ openKeys: ['1'] });
|
2018-08-24 12:28:51 +08:00
|
|
|
wrapper.update();
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-01-16 21:13:59 +08:00
|
|
|
});
|
2017-01-23 19:10:50 +08:00
|
|
|
|
|
|
|
// 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', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="horizontal">
|
|
|
|
<SubMenu title="submenu">
|
|
|
|
<Menu.Item key="1">menu1</Menu.Item>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
|
|
|
</SubMenu>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-01-23 19:10:50 +08:00
|
|
|
);
|
|
|
|
wrapper.update();
|
|
|
|
// just expect no error emit
|
|
|
|
});
|
2017-02-15 16:24:56 +08:00
|
|
|
|
|
|
|
it('should always follow openKeys when mode is switched', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu openKeys={['1']} mode="inline">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-02-15 16:24:56 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
2017-02-15 16:24:56 +08:00
|
|
|
wrapper.setProps({ mode: 'vertical' });
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
2017-02-15 16:24:56 +08:00
|
|
|
wrapper.setProps({ mode: 'inline' });
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
2017-02-15 16:24:56 +08:00
|
|
|
});
|
2017-06-30 23:08:11 +08:00
|
|
|
|
2018-04-29 23:01:58 +08:00
|
|
|
it('should always follow openKeys when inlineCollapsed is switched', () => {
|
2017-06-30 23:08:11 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Menu defaultOpenKeys={['1']} mode="inline">
|
|
|
|
<Menu.Item key="menu1">
|
2020-04-26 23:16:15 +08:00
|
|
|
<InboxOutlined />
|
2017-06-30 23:08:11 +08:00
|
|
|
<span>Option</span>
|
|
|
|
</Menu.Item>
|
|
|
|
<SubMenu key="1" title="submenu1">
|
2018-12-07 16:17:45 +08:00
|
|
|
<Menu.Item key="submenu1">Option</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option</Menu.Item>
|
2017-06-30 23:08:11 +08:00
|
|
|
</SubMenu>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-06-30 23:08:11 +08:00
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
|
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
2017-07-07 19:45:59 +08:00
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
wrapper.setProps({ inlineCollapsed: true });
|
|
|
|
// 动画结束后套样式;
|
|
|
|
jest.runAllTimers();
|
2017-09-20 16:26:18 +08:00
|
|
|
wrapper.update();
|
2018-10-30 15:09:40 +08:00
|
|
|
wrapper.simulate('transitionEnd', { propertyName: 'width' });
|
2017-07-07 16:51:06 +08:00
|
|
|
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('ul.ant-menu-root').at(0).hasClass('ant-menu-vertical')).toBe(true);
|
2018-04-29 23:01:58 +08:00
|
|
|
expect(wrapper.find('ul.ant-menu-sub').length).toBe(0);
|
2017-11-11 00:07:03 +08:00
|
|
|
|
|
|
|
wrapper.setProps({ inlineCollapsed: false });
|
|
|
|
jest.runAllTimers();
|
2017-09-20 16:26:18 +08:00
|
|
|
wrapper.update();
|
2017-11-11 00:07:03 +08:00
|
|
|
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
|
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
2017-07-07 16:51:06 +08:00
|
|
|
});
|
|
|
|
|
2017-12-17 18:54:31 +08:00
|
|
|
it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu defaultOpenKeys={['not-existed']} mode="inline">
|
|
|
|
<Menu.Item key="menu1">
|
2020-04-26 23:16:15 +08:00
|
|
|
<InboxOutlined />
|
2017-12-17 18:54:31 +08:00
|
|
|
<span>Option</span>
|
|
|
|
</Menu.Item>
|
|
|
|
<SubMenu key="1" title="submenu1">
|
2018-12-07 16:17:45 +08:00
|
|
|
<Menu.Item key="submenu1">Option</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option</Menu.Item>
|
2017-12-17 18:54:31 +08:00
|
|
|
</SubMenu>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-12-17 18:54:31 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
|
|
|
wrapper.setProps({ inlineCollapsed: true });
|
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
2018-10-30 15:09:40 +08:00
|
|
|
wrapper.simulate('transitionEnd', { propertyName: 'width' });
|
2020-04-26 23:16:15 +08:00
|
|
|
wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter');
|
2017-12-17 18:54:31 +08:00
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true);
|
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true);
|
|
|
|
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
2017-12-17 18:54:31 +08:00
|
|
|
});
|
|
|
|
|
2020-03-13 19:43:10 +08:00
|
|
|
it('inlineCollapsed Menu.Item Tooltip can be removed', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu
|
|
|
|
defaultOpenKeys={['not-existed']}
|
|
|
|
mode="inline"
|
|
|
|
inlineCollapsed
|
|
|
|
getPopupContainer={node => node.parentNode}
|
|
|
|
>
|
2020-03-29 10:39:46 +08:00
|
|
|
<Menu.Item key="menu1">item</Menu.Item>
|
2020-03-13 19:43:10 +08:00
|
|
|
<Menu.Item key="menu2" title="title">
|
|
|
|
item
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item key="menu3" title={undefined}>
|
|
|
|
item
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item key="menu4" title={null}>
|
|
|
|
item
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item key="menu5" title="">
|
|
|
|
item
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item key="menu6" title={false}>
|
|
|
|
item
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
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('');
|
2020-03-13 19:43:10 +08:00
|
|
|
});
|
|
|
|
|
2017-11-11 00:07:03 +08:00
|
|
|
describe('open submenu when click submenu title', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
jest.useFakeTimers();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
jest.useRealTimers();
|
|
|
|
});
|
|
|
|
|
|
|
|
const toggleMenu = (wrapper, index, event) => {
|
2020-04-26 23:16:15 +08:00
|
|
|
wrapper.find('.ant-menu-submenu-title').at(index).simulate(event);
|
2017-11-11 00:07:03 +08:00
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
};
|
|
|
|
|
|
|
|
it('inline', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="inline">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-11-11 00:07:03 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
|
|
|
toggleMenu(wrapper, 0, 'click');
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-11-11 00:07:03 +08:00
|
|
|
toggleMenu(wrapper, 0, 'click');
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-11-11 00:07:03 +08:00
|
|
|
});
|
|
|
|
|
2020-06-28 22:41:59 +08:00
|
|
|
it('vertical with hover(default)', () => {
|
2017-11-11 00:07:03 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="vertical">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-11-11 00:07:03 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
|
|
|
toggleMenu(wrapper, 0, 'mouseenter');
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-11-11 00:07:03 +08:00
|
|
|
toggleMenu(wrapper, 0, 'mouseleave');
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-11-11 00:07:03 +08:00
|
|
|
});
|
|
|
|
|
2020-06-28 22:41:59 +08:00
|
|
|
it('vertical with click', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="vertical" triggerSubMenuAction="click">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
|
|
|
toggleMenu(wrapper, 0, 'click');
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
toggleMenu(wrapper, 0, 'click');
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('horizontal with hover(default)', () => {
|
2017-11-11 00:07:03 +08:00
|
|
|
jest.useFakeTimers();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="horizontal">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2017-11-11 00:07:03 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
|
|
|
toggleMenu(wrapper, 0, 'mouseenter');
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-11-11 00:07:03 +08:00
|
|
|
toggleMenu(wrapper, 0, 'mouseleave');
|
2020-04-26 23:16:15 +08:00
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
|
|
|
true,
|
|
|
|
);
|
2017-11-11 00:07:03 +08:00
|
|
|
});
|
2020-06-28 22:41:59 +08:00
|
|
|
|
|
|
|
it('horizontal with click', () => {
|
|
|
|
jest.useFakeTimers();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="horizontal" triggerSubMenuAction="click">
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
|
|
|
toggleMenu(wrapper, 0, 'click');
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
toggleMenu(wrapper, 0, 'click');
|
|
|
|
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
|
|
|
true,
|
|
|
|
);
|
|
|
|
});
|
2017-07-07 16:51:06 +08:00
|
|
|
});
|
2018-11-20 23:26:40 +08:00
|
|
|
|
|
|
|
it('inline title', () => {
|
|
|
|
jest.useFakeTimers();
|
|
|
|
const wrapper = mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Menu mode="inline" inlineCollapsed>
|
2018-11-20 23:26:40 +08:00
|
|
|
<Menu.Item key="1" title="bamboo lucky">
|
2020-04-26 23:16:15 +08:00
|
|
|
<PieChartOutlined />
|
2018-11-20 23:26:40 +08:00
|
|
|
<span>
|
|
|
|
Option 1
|
|
|
|
<img
|
|
|
|
style={{ width: 20 }}
|
|
|
|
alt="test"
|
|
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</Menu.Item>
|
2018-12-07 16:17:45 +08:00
|
|
|
</Menu>,
|
2018-11-20 23:26:40 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('.ant-menu-item').simulate('mouseenter');
|
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
|
|
|
|
const text = wrapper.find('.ant-tooltip-inner').text();
|
|
|
|
expect(text).toBe('bamboo lucky');
|
2019-04-08 22:20:18 +08:00
|
|
|
|
|
|
|
jest.useRealTimers();
|
2018-11-20 23:26:40 +08:00
|
|
|
});
|
2019-03-14 21:04:13 +08:00
|
|
|
|
|
|
|
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 (
|
|
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
|
|
<Layout.Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
|
|
|
|
<div className="logo" />
|
|
|
|
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
|
|
|
|
<SubMenu
|
|
|
|
key="sub1"
|
|
|
|
title={
|
|
|
|
<span>
|
2020-04-26 23:16:15 +08:00
|
|
|
<UserOutlined />
|
2019-03-14 21:04:13 +08:00
|
|
|
<span>User</span>
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Menu.Item key="3">Tom</Menu.Item>
|
|
|
|
<Menu.Item key="4">Bill</Menu.Item>
|
|
|
|
<Menu.Item key="5">Alex</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
</Menu>
|
|
|
|
</Layout.Sider>
|
|
|
|
</Layout>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const wrapper = mount(<Demo />);
|
|
|
|
wrapper.find('.ant-menu-submenu-title').simulate('click');
|
|
|
|
wrapper.find('.ant-layout-sider-trigger').simulate('click');
|
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('.ant-menu-submenu-popup').length).toBe(0);
|
|
|
|
});
|
2019-03-25 19:07:22 +08:00
|
|
|
|
2019-03-09 11:53:17 +08:00
|
|
|
it('onMouseEnter should work', () => {
|
2019-03-15 21:56:41 +08:00
|
|
|
const onMouseEnter = jest.fn();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu onMouseEnter={onMouseEnter} defaultSelectedKeys={['test1']}>
|
|
|
|
<Menu.Item key="test1">Navigation One</Menu.Item>
|
|
|
|
<Menu.Item key="test2">Navigation Two</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
wrapper.find('Menu').at(1).simulate('mouseenter');
|
2019-03-15 21:56:41 +08:00
|
|
|
expect(onMouseEnter).toHaveBeenCalled();
|
2019-03-09 11:53:17 +08:00
|
|
|
});
|
|
|
|
|
2019-03-28 09:24:16 +08:00
|
|
|
it('MenuItem should not render Tooltip when inlineCollapsed is false', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
|
|
|
|
<Menu.Item key="mail">
|
2020-04-26 23:16:15 +08:00
|
|
|
<MailOutlined />
|
2019-03-28 09:24:16 +08:00
|
|
|
Navigation One
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item key="app">
|
2020-04-26 23:16:15 +08:00
|
|
|
<AppstoreOutlined />
|
2019-03-28 09:24:16 +08:00
|
|
|
Navigation Two
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item key="alipay">
|
|
|
|
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
|
|
|
|
Navigation Four - Link
|
|
|
|
</a>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
2020-04-26 23:16:15 +08:00
|
|
|
wrapper.find('MenuItem').first().simulate('mouseenter');
|
2019-03-28 09:24:16 +08:00
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('.ant-tooltip-inner').length).toBe(0);
|
|
|
|
});
|
2019-04-05 16:15:01 +08:00
|
|
|
|
2020-04-26 23:16:15 +08:00
|
|
|
it('MenuItem should render icon and icon should be the first child when icon exists', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu>
|
|
|
|
<Menu.Item key="mail" icon={<MailOutlined />}>
|
|
|
|
Navigation One
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-item .anticon').hasClass('anticon-mail')).toBe(true);
|
|
|
|
});
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
it('should controlled collapse work', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="inline" inlineCollapsed={false}>
|
|
|
|
<Menu.Item key="1">
|
2020-04-26 23:16:15 +08:00
|
|
|
<PieChartOutlined />
|
2019-04-05 16:15:01 +08:00
|
|
|
<span>Option 1</span>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
|
|
|
|
wrapper.setProps({ inlineCollapsed: true });
|
|
|
|
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
});
|
2019-04-08 22:20:18 +08:00
|
|
|
|
|
|
|
it('not title if not collapsed', () => {
|
|
|
|
jest.useFakeTimers();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu mode="inline" inlineCollapsed={false}>
|
|
|
|
<Menu.Item key="1">
|
2020-04-26 23:16:15 +08:00
|
|
|
<PieChartOutlined />
|
2019-04-08 22:20:18 +08:00
|
|
|
<span>Option 1</span>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper.find('.ant-menu-item').simulate('mouseenter');
|
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
|
|
|
|
|
|
|
expect(wrapper.find('.ant-tooltip-inner').length).toBeFalsy();
|
|
|
|
|
|
|
|
jest.useRealTimers();
|
|
|
|
});
|
2019-07-09 11:46:21 +08:00
|
|
|
|
|
|
|
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();
|
|
|
|
mount(
|
|
|
|
<Menu defaultOpenKeys={['1']} mode="inline" onOpen={onOpen} onClose={onClose}>
|
|
|
|
<SubMenu key="1" title="submenu1">
|
|
|
|
<Menu.Item key="submenu1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="submenu2">Option 2</Menu.Item>
|
|
|
|
</SubMenu>
|
|
|
|
<Menu.Item key="2">menu2</Menu.Item>
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
|
|
|
|
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();
|
|
|
|
});
|
2019-09-23 10:08:32 +08:00
|
|
|
|
2019-09-19 22:04:24 +08:00
|
|
|
// 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(
|
|
|
|
<Menu
|
|
|
|
mode="inline"
|
|
|
|
inlineCollapsed={false}
|
|
|
|
defaultSelectedKeys={['1']}
|
|
|
|
collapsedWidth={0}
|
|
|
|
openKeys={['3']}
|
|
|
|
>
|
2019-09-23 10:08:32 +08:00
|
|
|
<Menu.Item key="1">Option 1</Menu.Item>
|
|
|
|
<Menu.Item key="2">Option 2</Menu.Item>
|
2019-09-19 22:04:24 +08:00
|
|
|
<Menu.SubMenu key="3" title="Option 3">
|
2019-09-23 10:08:32 +08:00
|
|
|
<Menu.Item key="4">Option 4</Menu.Item>
|
2019-09-19 22:04:24 +08:00
|
|
|
</Menu.SubMenu>
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 1');
|
2020-04-26 23:16:15 +08:00
|
|
|
wrapper.find('.ant-menu-item').at(1).simulate('click');
|
2019-09-19 22:04:24 +08:00
|
|
|
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
|
|
|
|
wrapper.setProps({ inlineCollapsed: true });
|
|
|
|
jest.runAllTimers();
|
|
|
|
wrapper.update();
|
2019-12-05 16:15:10 +08:00
|
|
|
expect(
|
|
|
|
wrapper
|
|
|
|
.find('Trigger')
|
|
|
|
.map(node => node.prop('popupVisible'))
|
|
|
|
.findIndex(node => !!node),
|
|
|
|
).toBe(-1);
|
2019-09-19 22:04:24 +08:00
|
|
|
wrapper.setProps({ inlineCollapsed: false });
|
|
|
|
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
|
|
|
|
jest.useRealTimers();
|
|
|
|
});
|
2020-04-26 23:16:15 +08:00
|
|
|
|
|
|
|
it('Menu.Item with icon children auto wrap span', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Menu>
|
|
|
|
<Menu.Item key="1" icon={<MailOutlined />}>
|
|
|
|
Navigation One
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item key="2" icon={<MailOutlined />}>
|
|
|
|
<span>Navigation One</span>
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.SubMenu key="3" icon={<MailOutlined />} title="Navigation One" />
|
|
|
|
<Menu.SubMenu key="4" icon={<MailOutlined />} title={<span>Navigation One</span>} />
|
|
|
|
</Menu>,
|
|
|
|
);
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
});
|
2020-05-03 00:10:21 +08:00
|
|
|
|
|
|
|
// 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 (
|
|
|
|
<>
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={() => {
|
|
|
|
setInlineCollapsed(!inlineCollapsed);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
collapse menu
|
|
|
|
</button>
|
|
|
|
<Menu mode="inline" onOpenChange={onOpenChange} inlineCollapsed={inlineCollapsed}>
|
|
|
|
<Menu.SubMenu key="1" title="menu">
|
|
|
|
<Menu.Item key="1-1">menu</Menu.Item>
|
|
|
|
<Menu.Item key="1-2">menu</Menu.Item>
|
|
|
|
</Menu.SubMenu>
|
|
|
|
</Menu>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
const wrapper = mount(<App />);
|
|
|
|
wrapper.find('button').simulate('click');
|
|
|
|
expect(onOpenChange).toHaveBeenCalledWith([]);
|
|
|
|
});
|
2017-01-16 21:13:59 +08:00
|
|
|
});
|