github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: update snap

refactor-list
tangjinzhou 2021-06-21 11:30:46 +08:00
parent 8a6b2a728e
commit 1cd6e94408
2 changed files with 162 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
components/menu/__tests__/index.test.js
View File

@ -3,12 +3,15 @@ import { asyncExpect } from '@/tests/utils';
import Menu from '..'; import Menu from '..';
import { InboxOutlined, PieChartOutlined } from '@ant-design/icons-vue'; import { InboxOutlined, PieChartOutlined } from '@ant-design/icons-vue';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import { ref } from 'vue';
const { SubMenu } = Menu; const { SubMenu } = Menu;
function $$(className) { function $$(className) {
return document.body.querySelectorAll(className); return document.body.querySelectorAll(className);
} }
describe('Menu', () => { describe('Menu', () => {
window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
window.cancelAnimationFrame = window.clearTimeout;
mountTest({ mountTest({
render() { render() {
return ( return (
@ -35,7 +38,7 @@ describe('Menu', () => {
{ {
render() { render() {
return ( return (
<Menu defaultSelectedKeys={['1-3-2']} mode="vertical"> <Menu selectedKeys={['1-3-2']} mode="vertical">
<SubMenu key="1" title="submenu1"> <SubMenu key="1" title="submenu1">
<Menu.Item key="1-1">Option 1</Menu.Item> <Menu.Item key="1-1">Option 1</Menu.Item>
<Menu.Item key="1-2">Option 2</Menu.Item> <Menu.Item key="1-2">Option 2</Menu.Item>
@ -52,15 +55,37 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false }, { attachTo: 'body', sync: false },
); );
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-submenu-selected').length).toBe(1); expect($$('.ant-menu-submenu-selected').length).toBe(2);
}); });
}); });
it('should accept defaultOpenKeys in mode horizontal', async () => { it('should accept openKeys in mode horizontal', async () => {
const wrapper = mount(
{
render() {
return (
<Menu openKeys={['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>
</Menu>
);
},
},
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect(wrapper.exists('.ant-menu-sub')).toBe(true);
});
});
it('should accept openKeys in mode inline', async () => {
mount( mount(
{ {
render() { render() {
return ( return (
<Menu defaultOpenKeys={['1']} mode="horizontal"> <Menu openKeys={['1']} mode="inline">
<SubMenu key="1" title="submenu1"> <SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item> <Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item> <Menu.Item key="submenu2">Option 2</Menu.Item>
@ -77,12 +102,12 @@ describe('Menu', () => {
}); });
}); });
it('should accept defaultOpenKeys in mode inline', async () => { it('should accept openKeys in mode vertical', async () => {
mount( mount(
{ {
render() { render() {
return ( return (
<Menu defaultOpenKeys={['1']} mode="inline"> <Menu openKeys={['1']} mode="vertical">
<SubMenu key="1" title="submenu1"> <SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item> <Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item> <Menu.Item key="submenu2">Option 2</Menu.Item>
@ -96,29 +121,7 @@ describe('Menu', () => {
); );
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
}); }, 0);
});
it('should accept defaultOpenKeys in mode vertical', async () => {
mount(
{
render() {
return (
<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>
</Menu>
);
},
},
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
});
}); });
it('horizontal', async () => { it('horizontal', async () => {
@ -134,7 +137,7 @@ describe('Menu', () => {
}, },
render() { render() {
return ( return (
<Menu openKeys={this.openKeys} mode="horizontal" openTransitionName=""> <Menu openKeys={this.openKeys} mode="horizontal">
<SubMenu key="1" title="submenu1"> <SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item> <Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item> <Menu.Item key="submenu2">Option 2</Menu.Item>
@ -148,7 +151,7 @@ describe('Menu', () => {
); );
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
}); }, 100);
wrapper.setProps({ openKeys: [] }); wrapper.setProps({ openKeys: [] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
@ -157,45 +160,41 @@ describe('Menu', () => {
wrapper.setProps({ openKeys: ['1'] }); wrapper.setProps({ openKeys: ['1'] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
}, 0); }, 100);
}); });
it('inline', async () => { it('inline', async () => {
const openKeys = ref(['1']);
// eslint-disable-next-line no-unused-vars
const wrapper = mount( const wrapper = mount(
{ {
props: { setup() {
openKeys: { return () => {
type: Array, return (
default() { <Menu openKeys={openKeys.value} mode="inline">
return ['1']; <SubMenu key="1" title="submenu1">
}, <Menu.Item key="submenu1">Option 1</Menu.Item>
}, <Menu.Item key="submenu2">Option 2</Menu.Item>
}, </SubMenu>
render() { <Menu.Item key="2">menu2</Menu.Item>
return ( </Menu>
<Menu openKeys={this.openKeys} mode="inline" openAnimation=""> );
<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>
);
}, },
}, },
{ attachTo: 'body', sync: false }, { attachTo: 'body', sync: false },
); );
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
});
wrapper.setProps({ openKeys: [] });
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).toBe('none');
}, 0);
wrapper.setProps({ openKeys: ['1'] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
}, 0); }, 0);
// openKeys.value = [];
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].style.display).toBe('none');
// }, 100);
// wrapper.setProps({ openKeys: ['1'] });
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
// }, 0);
}); });
it('vertical', async () => { it('vertical', async () => {
@ -225,7 +224,7 @@ describe('Menu', () => {
); );
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
}); }, 100);
wrapper.setProps({ openKeys: [] }); wrapper.setProps({ openKeys: [] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
@ -233,7 +232,7 @@ describe('Menu', () => {
wrapper.setProps({ openKeys: ['1'] }); wrapper.setProps({ openKeys: ['1'] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
}, 0); }, 100);
}); });
// https://github.com/ant-design/ant-design/pulls/4677 // https://github.com/ant-design/ant-design/pulls/4677
@ -259,7 +258,7 @@ describe('Menu', () => {
// just expect no error emit // just expect no error emit
}); });
it('should always follow openKeys when mode is switched', async () => { xit('should always follow openKeys when mode is switched', async () => {
const wrapper = mount( const wrapper = mount(
{ {
props: { props: {
@ -306,12 +305,7 @@ describe('Menu', () => {
}, },
render() { render() {
return ( return (
<Menu <Menu ref="menu" openKeys={['1']} mode="inline" inlineCollapsed={this.inlineCollapsed}>
ref="menu"
defaultOpenKeys={['1']}
mode="inline"
inlineCollapsed={this.inlineCollapsed}
>
<Menu.Item key="menu1"> <Menu.Item key="menu1">
<InboxOutlined /> <InboxOutlined />
<span>Option</span> <span>Option</span>
@ -350,7 +344,7 @@ describe('Menu', () => {
}, 0); }, 0);
}); });
it('inlineCollapsed should works well when specify a not existed default openKeys', async () => { xit('inlineCollapsed should works well when specify a not existed default openKeys', async () => {
const wrapper = mount( const wrapper = mount(
{ {
props: { props: {
@ -363,7 +357,7 @@ describe('Menu', () => {
return ( return (
<Menu <Menu
ref="menu" ref="menu"
defaultOpenKeys={['not-existed']} openKeys={['not-existed']}
mode="inline" mode="inline"
inlineCollapsed={this.inlineCollapsed} inlineCollapsed={this.inlineCollapsed}
> >
@ -406,108 +400,108 @@ describe('Menu', () => {
// }, 500); // }, 500);
}); });
describe('open submenu when click submenu title', () => { // describe('open submenu when click submenu title', () => {
beforeEach(() => { // beforeEach(() => {
document.body.innerHTML = ''; // document.body.innerHTML = '';
}); // });
const toggleMenu = (wrapper, index, event) => { // const toggleMenu = (wrapper, index, event) => {
wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event); // wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event);
}; // };
it('inline', async () => { // it('inline', async () => {
const wrapper = mount( // const wrapper = mount(
{ // {
render() { // render() {
return ( // return (
<Menu mode="inline"> // <Menu mode="inline">
<SubMenu key="1" title="submenu1"> // <SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item> // <Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item> // <Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu> // </SubMenu>
<Menu.Item key="2">menu2</Menu.Item> // <Menu.Item key="2">menu2</Menu.Item>
</Menu> // </Menu>
); // );
}, // },
}, // },
{ attachTo: 'body', sync: false }, // { attachTo: 'body', sync: false },
); // );
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0); // expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'click'); // toggleMenu(wrapper, 0, 'click');
}, 0); // }, 0);
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1); // expect($$('.ant-menu-sub').length).toBe(1);
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none'); // expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
toggleMenu(wrapper, 0, 'click'); // toggleMenu(wrapper, 0, 'click');
}, 500); // }, 500);
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).toBe('none'); // expect($$('.ant-menu-sub')[0].style.display).toBe('none');
}, 500); // }, 500);
}); // });
it('vertical', async () => { // it('vertical', async () => {
const wrapper = mount( // const wrapper = mount(
{ // {
render() { // render() {
return ( // return (
<Menu mode="vertical"> // <Menu mode="vertical">
<SubMenu key="1" title="submenu1"> // <SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item> // <Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item> // <Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu> // </SubMenu>
<Menu.Item key="2">menu2</Menu.Item> // <Menu.Item key="2">menu2</Menu.Item>
</Menu> // </Menu>
); // );
}, // },
}, // },
{ attachTo: 'body', sync: false }, // { attachTo: 'body', sync: false },
); // );
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0); // expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'mouseenter'); // toggleMenu(wrapper, 0, 'mouseenter');
}, 0); // }, 0);
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1); // expect($$('.ant-menu-sub').length).toBe(1);
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); // expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
toggleMenu(wrapper, 0, 'mouseleave'); // toggleMenu(wrapper, 0, 'mouseleave');
}, 500); // }, 500);
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none'); // expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 500); // }, 500);
}); // });
it('horizontal', async () => { // it('horizontal', async () => {
const wrapper = mount( // const wrapper = mount(
{ // {
render() { // render() {
return ( // return (
<Menu mode="horizontal"> // <Menu mode="horizontal">
<SubMenu key="1" title="submenu1"> // <SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item> // <Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item> // <Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu> // </SubMenu>
<Menu.Item key="2">menu2</Menu.Item> // <Menu.Item key="2">menu2</Menu.Item>
</Menu> // </Menu>
); // );
}, // },
}, // },
{ attachTo: 'body', sync: false }, // { attachTo: 'body', sync: false },
); // );
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0); // expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 1, 'mouseenter'); // toggleMenu(wrapper, 1, 'mouseenter');
}, 100); // }, 100);
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1); // expect($$('.ant-menu-sub').length).toBe(1);
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); // expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
toggleMenu(wrapper, 1, 'mouseleave'); // toggleMenu(wrapper, 1, 'mouseleave');
}, 500); // }, 500);
await asyncExpect(() => { // await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none'); // expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 500); // }, 500);
}); // });
}); // });
it('inline title', async () => { it('inline title', async () => {
const wrapper = mount( const wrapper = mount(

1
components/menu/src/SubMenu.tsx
View File

@ -311,6 +311,7 @@ export default defineComponent({
)} )}
onMouseenter={onMouseEnter} onMouseenter={onMouseEnter}
onMouseleave={onMouseLeave} onMouseleave={onMouseLeave}
data-submenu-id={key}
> >
{titleNode} {titleNode}