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

import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Menu from '..'
import Icon from '../../icon'

jest.mock('mutationobserver-shim', () => {
  global.MutationObserver = function MutationObserver () {
    this.observe = () => {}
    this.disconnect = () => {}
  }
})

const { SubMenu } = Menu
function $$ (className) {
  return document.body.querySelectorAll(className)
}
describe('Menu', () => {
  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 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>
          </Menu>
        )
      },
    }, { attachToDocument: true, sync: false })
    await asyncExpect(() => {
      expect($$('.ant-menu-submenu-selected').length).toBe(1)
    })
  })
  it('should accept defaultOpenKeys in mode horizontal', async () => {
    mount({
      render () {
        return (
          <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>
          </Menu>
        )
      },
    }, { attachToDocument: true, sync: false })
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
    })
  })

  it('should accept defaultOpenKeys in mode inline', async () => {
    mount({
      render () {
        return (
          <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>
          </Menu>
        )
      },
    }, { attachToDocument: true, sync: false })
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
    })
  })

  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>
        )
      },
    }, { attachToDocument: true, sync: false })
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
    })
  })

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

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

  it('inline', async () => {
    const wrapper = mount({
      props: {
        openKeys: {
          type: Array,
          default: function () {
            return ['1']
          },
        },
      },
      render () {
        return (
          <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>
        )
      },
    }, { attachToDocument: true, 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(() => {
      expect($$('.ant-menu-sub')[0].style.display).not.toBe('none')
    }, 0)
  })

  it('vertical', async () => {
    const wrapper = mount({
      props: {
        openKeys: {
          type: Array,
          default: function () {
            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>
        )
      },
    }, { attachToDocument: true, sync: false })
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
    })
    wrapper.setProps({ openKeys: [] })
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none')
    }, 0)
    wrapper.setProps({ openKeys: ['1'] })
    await asyncExpect(() => {
      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none')
    }, 0)
  })

  // 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>
        )
      },
    }, { attachToDocument: true, sync: false })
    wrapper.vm.$forceUpdate()
    // just expect no error emit
  })

  it('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>
        )
      },
    }, { attachToDocument: true, 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' defaultOpenKeys={['1']} mode='inline' inlineCollapsed={this.inlineCollapsed}>
            <Menu.Item key='menu1'>
              <Icon type='inbox' />
              <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>
        )
      },
    }, { attachToDocument: true, sync: false })
    await asyncExpect(() => {
      expect(wrapper.findAll('ul.ant-menu-sub').at(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').at(0).classes()).toContain('ant-menu-vertical')
      expect(wrapper.findAll('ul.ant-menu-sub').length).toBe(0)
    }, 0)
    wrapper.setProps({ inlineCollapsed: false })
    await asyncExpect(() => {
      expect(wrapper.findAll('ul.ant-menu-sub').at(0).classes()).toContain('ant-menu-inline')
      expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none')
    }, 0)
  })

  it('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' defaultOpenKeys={['not-existed']} mode='inline' inlineCollapsed={this.inlineCollapsed}>
            <Menu.Item key='menu1'>
              <Icon type='inbox' />
              <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>
        )
      },
    }, { attachToDocument: true, sync: false })
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-menu-sub').length).toBe(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(() => {
      wrapper.findAll('.ant-menu-submenu-title').at(0).trigger('mouseenter')
    })
    await asyncExpect(() => {
      expect(wrapper.findAll('.ant-menu-submenu').at(0).classes()).toContain('ant-menu-submenu-vertical')
      expect(wrapper.findAll('.ant-menu-submenu').at(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')
    }, 300)
  })

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

    const toggleMenu = (wrapper, index, event) => {
      wrapper.findAll('.ant-menu-submenu-title').at(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>
          )
        },
      }, { attachToDocument: true, sync: false })
      await asyncExpect(() => {
        expect($$('.ant-menu-sub').length).toBe(0)
        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>
          )
        },
      }, { attachToDocument: true, 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>
          )
        },
      }, { attachToDocument: true, sync: false })
      await asyncExpect(() => {
        expect($$('.ant-menu-sub').length).toBe(0)
        toggleMenu(wrapper, 1, 'mouseenter')
      }, 0)
      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'>
              <Icon type='pie-chart' />
              <span>
            Option 1
                <img
                  style={{ width: 20 }}
                  alt='test'
                  src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
                />
              </span>
            </Menu.Item>
          </Menu>
        )
      },
    }, { sync: false, attachToDocument: true })

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