ant-design-vue/components/menu/__tests__/index.test.js

import { mount } from '@vue/test-utils';
import { asyncExpect } from '../../../tests/utils';
import Menu from '..';
import { InboxOutlined, PieChartOutlined } from '@ant-design/icons-vue';
import mountTest from '../../../tests/shared/mountTest';
import { ref } from 'vue';

const { SubMenu } = Menu;
function $$(className) {
  return document.body.querySelectorAll(className);
}
describe('Menu', () => {
  window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
  window.cancelAnimationFrame = window.clearTimeout;
  mountTest({
    render() {
      return (
        <div>
          <Menu>
            <Menu.Item />
            <Menu.ItemGroup />
            <Menu.SubMenu />
          </Menu>
        </div>
      );
    },
  });
  beforeEach(() => {
    document.body.innerHTML = '';
    // jest.useFakeTimers()
  });

  afterEach(() => {
    // jest.useRealTimers()
  });
  it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', async () => {
    mount(
      {
        render() {
          return (
            <Menu selectedKeys={['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>
            </Menu>
          );
        },
      },
      { attachTo: 'body', sync: false },
    );
    await asyncExpect(() => {
      expect($$('.ant-menu-submenu-selected').length).toBe(2);
    });
  });
  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(
      {
        render() {
          return (
            <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>
            </Menu>
          );
        },
      },
      { attachTo: 'body', sync: false },
    );
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
    });
  });

  it('should accept openKeys in mode vertical', async () => {
    mount(
      {
        render() {
          return (
            <Menu openKeys={['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');
    }, 100);
  });

  it('horizontal', async () => {
    const wrapper = mount(
      {
        props: {
          openKeys: {
            type: Array,
            default() {
              return ['1'];
            },
          },
        },
        render() {
          return (
            <Menu openKeys={this.openKeys} 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($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
    }, 100);
    wrapper.setProps({ openKeys: [] });
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
    }, 500);

    wrapper.setProps({ openKeys: ['1'] });
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
    }, 100);
  });

  it('inline', async () => {
    const openKeys = ref(['1']);
    // eslint-disable-next-line no-unused-vars
    const wrapper = mount(
      {
        setup() {
          return () => {
            return (
              <Menu openKeys={openKeys.value} 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>
              </Menu>
            );
          };
        },
      },
      { attachTo: 'body', sync: false },
    );
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
    }, 0);
    openKeys.value = [];
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].style.display).toBe('none');
    }, 100);
    openKeys.value = ['1'];
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
    }, 100);
  });

  it('vertical', async () => {
    const wrapper = mount(
      {
        props: {
          openKeys: {
            type: Array,
            default() {
              return ['1'];
            },
          },
        },
        render() {
          return (
            <Menu openKeys={this.openKeys} mode="vertical" openTransitionName="">
              <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');
    }, 100);
    wrapper.setProps({ openKeys: [] });
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
    }, 500);
    wrapper.setProps({ openKeys: ['1'] });
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
    }, 100);
  });

  // 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(
      {
        render() {
          return (
            <Menu mode="horizontal">
              <SubMenu title="submenu">
                <Menu.Item key="1">menu1</Menu.Item>
                <Menu.Item key="2">menu2</Menu.Item>
              </SubMenu>
            </Menu>
          );
        },
      },
      { attachTo: 'body', sync: false },
    );
    wrapper.vm.$forceUpdate();
    // just expect no error emit
  });

  xit('should always follow openKeys when mode is switched', async () => {
    const wrapper = mount(
      {
        props: {
          mode: {
            type: String,
            default: 'inline',
          },
        },
        render() {
          return (
            <Menu openKeys={['1']} mode={this.mode}>
              <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($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
    });
    wrapper.setProps({ mode: 'vertical' });
    await asyncExpect(() => {
      expect($$('ul.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
    }, 0);
    wrapper.setProps({ mode: 'inline' });
    await asyncExpect(() => {
      expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
    }, 0);
  });

  it('should always follow openKeys when inlineCollapsed is switched', async () => {
    const wrapper = mount(
      {
        props: {
          inlineCollapsed: {
            type: Boolean,
            default: false,
          },
        },
        render() {
          return (
            <Menu ref="menu" openKeys={['1']} mode="inline" inlineCollapsed={this.inlineCollapsed}>
              <Menu.Item key="menu1">
                <InboxOutlined />
                <span>Option</span>
              </Menu.Item>
              <SubMenu key="1" title="submenu1">
                <Menu.Item key="submenu1">Option</Menu.Item>
                <Menu.Item key="submenu2">Option</Menu.Item>
              </SubMenu>
            </Menu>
          );
        },
      },
      { attachTo: 'body', sync: false },
    );
    await asyncExpect(() => {
      expect(wrapper.findAll('ul.ant-menu-sub')[0].classes()).toContain('ant-menu-inline');
      expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
    }, 0);
    wrapper.setProps({ inlineCollapsed: true });
    await asyncExpect(() => {
      // 动画完成后的回调
      wrapper.vm.$refs.menu.switchModeFromInline = false;
      wrapper.vm.$forceUpdate();
    });
    // await asyncExpect(() => {
    //   wrapper.trigger('transitionend', { propertyName: 'width' });
    // });
    // await asyncExpect(() => {
    //   expect(wrapper.findAll('ul.ant-menu-root')[0].classes()).toContain('ant-menu-vertical');
    //   expect(wrapper.findAll('ul.ant-menu-sub').length).toBe(0);
    // }, 500);
    wrapper.setProps({ inlineCollapsed: false });
    await asyncExpect(() => {
      expect(wrapper.findAll('ul.ant-menu-sub')[0].classes()).toContain('ant-menu-inline');
      expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
    }, 0);
  });

  xit('inlineCollapsed should works well when specify a not existed default openKeys', async () => {
    const wrapper = mount(
      {
        props: {
          inlineCollapsed: {
            type: Boolean,
            default: false,
          },
        },
        render() {
          return (
            <Menu
              ref="menu"
              openKeys={['not-existed']}
              mode="inline"
              inlineCollapsed={this.inlineCollapsed}
            >
              <Menu.Item key="menu1">
                <InboxOutlined />
                <span>Option</span>
              </Menu.Item>
              <SubMenu key="1" title="submenu1">
                <Menu.Item key="submenu1">Option</Menu.Item>
                <Menu.Item key="submenu2">Option</Menu.Item>
              </SubMenu>
            </Menu>
          );
        },
      },
      { attachTo: 'body', sync: false },
    );
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-menu-sub').length).toBe(1);
    });
    wrapper.setProps({ inlineCollapsed: true });
    // await asyncExpect(() => {
    //   // 动画完成后的回调
    //   wrapper.vm.$refs.menu.switchModeFromInline = false;
    //   wrapper.vm.$forceUpdate();
    // });
    // await asyncExpect(() => {
    //   wrapper.trigger('transitionend', { propertyName: 'width' });
    // });
    await asyncExpect(() => {
      $$('.ant-menu-submenu-title')[0].dispatchEvent(new MouseEvent('mouseenter'));
    });
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain(
        'ant-menu-submenu-vertical',
      );
      expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain('ant-menu-submenu-open');
      expect($$('ul.ant-menu-sub')[0].className).toContain('ant-menu-vertical');
      expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
    }, 500);
  });

  // describe('open submenu when click submenu title', () => {
  //   beforeEach(() => {
  //     document.body.innerHTML = '';
  //   });

  const toggleMenu = (wrapper, index, event) => {
    wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event);
  };

  it('inline', async () => {
    const wrapper = mount(
      {
        render() {
          return (
            <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>
            </Menu>
          );
        },
      },
      { attachTo: 'body', sync: false },
    );
    await asyncExpect(() => {
      expect($$('.ant-menu-sub').length).toBe(1);
      toggleMenu(wrapper, 0, 'click');
    }, 0);
    await asyncExpect(() => {
      expect($$('.ant-menu-sub').length).toBe(1);
      expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
      toggleMenu(wrapper, 0, 'click');
    }, 500);
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].style.display).toBe('none');
    }, 500);
  });

  //   it('vertical', async () => {
  //     const wrapper = mount(
  //       {
  //         render() {
  //           return (
  //             <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>
  //             </Menu>
  //           );
  //         },
  //       },
  //       { attachTo: 'body', sync: false },
  //     );
  //     await asyncExpect(() => {
  //       expect($$('.ant-menu-sub').length).toBe(0);
  //       toggleMenu(wrapper, 0, 'mouseenter');
  //     }, 0);
  //     await asyncExpect(() => {
  //       expect($$('.ant-menu-sub').length).toBe(1);
  //       expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
  //       toggleMenu(wrapper, 0, 'mouseleave');
  //     }, 500);
  //     await asyncExpect(() => {
  //       expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
  //     }, 500);
  //   });

  //   it('horizontal', async () => {
  //     const wrapper = mount(
  //       {
  //         render() {
  //           return (
  //             <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>
  //             </Menu>
  //           );
  //         },
  //       },
  //       { attachTo: 'body', sync: false },
  //     );
  //     await asyncExpect(() => {
  //       expect($$('.ant-menu-sub').length).toBe(0);
  //       toggleMenu(wrapper, 1, 'mouseenter');
  //     }, 100);
  //     await asyncExpect(() => {
  //       expect($$('.ant-menu-sub').length).toBe(1);
  //       expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
  //       toggleMenu(wrapper, 1, 'mouseleave');
  //     }, 500);
  //     await asyncExpect(() => {
  //       expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
  //     }, 500);
  //   });
  // });

  it('inline title', async () => {
    const wrapper = mount(
      {
        render() {
          return (
            <Menu mode="inline" inlineCollapsed>
              <Menu.Item key="1" title="bamboo lucky">
                <PieChartOutlined />
                <span>
                  Option 1
                  <img
                    style={{ width: 20 }}
                    alt="test"
                    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
                  />
                </span>
              </Menu.Item>
            </Menu>
          );
        },
      },
      { sync: false, attachTo: 'body' },
    );

    wrapper.find('.ant-menu-item').trigger('mouseenter');
    await asyncExpect(() => {
      const text = $$('.ant-tooltip-inner')[0].textContent;
      expect(text).toBe('bamboo lucky');
    }, 500);
  });
});