element-plus/packages/components/popover/__tests__/popover.spec.ts

import { ref, nextTick, h, createSlots } from 'vue'
import PopupManager from '@element-plus/utils/popup-manager'
import makeMount from '@element-plus/test-utils/make-mount'
import Popover from '../src/index.vue'

const AXIOM = 'Rem is the best girl'

const mount = makeMount(Popover, {
  slots: {
    default: AXIOM,
  },
  props: {
    appendToBody: false,
  },
})
describe('Popover.vue', () => {
  test('render test', () => {
    const wrapper = mount()
    expect(wrapper.text()).toEqual(AXIOM)
  })

  test('should render with title', () => {
    const title = 'test title'
    const wrapper = mount({
      props: {
        title,
      },
    })

    expect(wrapper.text()).toContain(title)
  })

  test('should modify popover\'s style with width', async () => {
    const wrapper = mount({
      props: {
        width: 200,
      },
    })

    expect(wrapper.find('.el-popover').attributes('style')).toContain('width: 200px')

    await wrapper.setProps({
      width: '100vw',
    })


    expect(wrapper.find('.el-popover').attributes('style')).toContain('width: 100vw')
  })

  test('the content should be overrode by slots', () => {
    const content = 'test content'
    const wrapper = mount({
      props: {
        content,
      },
    })
    expect(wrapper.text()).toContain(AXIOM)
  })

  test('should render content when no slots were passed', () => {

    const content = 'test content'
    const wrapper = makeMount(Popover, {
      props: {
        content,
        appendToBody: false,
      },
    })()

    expect(wrapper.text()).toBe(content)
    wrapper.unmount()
  })

  test('popper z-index should be dynamical', () => {
    const wrapper = mount()

    expect(
      Number.parseInt(
        window.getComputedStyle(wrapper.find('.el-popper').element).zIndex,
      ),
    ).toBeLessThanOrEqual(PopupManager.zIndex)
  })

  test('should render correctly with tabindex', async () => {
    const tabindex = ref(1)

    const Comp = {
      render() {
        const slot = () => [ h('button', { ref: 'btn' }, 'click 激活') ]

        return h(Popover, {
          placement: 'bottom',
          title: '标题',
          width: 200,
          trigger: 'click',
          tabindex: tabindex.value,
          content: '这是一段内容,这是一段内容,这是一段内容,这是一段内容。',
        }, createSlots({}, [{ name: 'reference', fn: slot }]))
      },
    }

    const wrapper = makeMount(Comp, {})()
    const ele = wrapper.vm.$refs.btn
    expect((ele as HTMLElement).getAttribute('tabindex')).toEqual('1')

    tabindex.value = 2

    await nextTick()
    expect((ele as HTMLElement).getAttribute('tabindex')).toEqual('2')
  })
})