wot-design-uni/tests/components/wd-popover.test.ts

import { mount } from '@vue/test-utils'
import WdPopover from '@/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue'
import { describe, expect, test, vi } from 'vitest'
import { nextTick } from 'vue'

describe('弹出框组件', () => {
  test('基本渲染', async () => {
    const wrapper = mount(WdPopover)
    expect(wrapper.classes()).toContain('wd-popover')
  })

  test('显示状态', async () => {
    const wrapper = mount(WdPopover, {
      props: {
        modelValue: true
      }
    })
    expect(wrapper.find('.wd-popover__container').exists()).toBeTruthy()

    // 直接调用 close 方法
    await (wrapper.vm as any).close()
    await nextTick()

    // 验证事件
    const emitted = wrapper.emitted() as Record<string, any[]>
    expect(emitted['update:modelValue']).toBeTruthy()
    expect(emitted['update:modelValue'][0][0]).toBe(false)
  })

  test('内容显示 - 普通模式', async () => {
    const content = '这是弹出内容'
    const wrapper = mount(WdPopover, {
      props: {
        content,
        modelValue: true,
        mode: 'normal'
      }
    })
    expect(wrapper.find('.wd-popover__inner').text()).toBe(content)
  })

  test('菜单模式', async () => {
    const content = [
      { content: '选项1', iconClass: 'read' },
      { content: '选项2', iconClass: 'delete' }
    ]
    const wrapper = mount(WdPopover, {
      props: {
        content,
        mode: 'menu',
        modelValue: true
      },
      // 使用浅渲染，避免渲染子组件
      shallow: true
    })
    expect(wrapper.find('.wd-popover__menu').exists()).toBeTruthy()

    // 直接调用 menuClick 方法
    await (wrapper.vm as any).menuClick(0)

    // 验证事件
    const emitted = wrapper.emitted() as Record<string, any[]>
    expect(emitted['menuclick']).toBeTruthy()
    expect(emitted['menuclick'][0][0].index).toBe(0)
    expect(emitted['menuclick'][0][0].item).toEqual(content[0])
    expect(emitted['update:modelValue']).toBeTruthy()
    expect(emitted['update:modelValue'][0][0]).toBe(false)
  })

  test('位置设置', async () => {
    const wrapper = mount(WdPopover, {
      props: {
        placement: 'top',
        modelValue: true
      }
    })

    // 验证箭头类名包含 'top'
    expect(wrapper.find('.wd-popover__arrow').exists()).toBeTruthy()
    // 由于无法直接访问内部状态，我们检查DOM是否正确渲染
    expect(wrapper.find('.wd-popover__arrow').classes().join(' ')).toContain('wd-popover__arrow')
  })

  test('偏移设置', async () => {
    const offset = 10
    const wrapper = mount(WdPopover, {
      props: {
        offset,
        modelValue: true
      }
    })

    // 由于无法直接访问内部状态，我们验证属性是否正确传递
    expect(wrapper.props('offset')).toBe(offset)
  })

  test('箭头显示控制', async () => {
    const wrapper = mount(WdPopover, {
      props: {
        visibleArrow: false,
        modelValue: true
      }
    })
    expect(wrapper.find('.wd-popover__arrow').exists()).toBeFalsy()
  })

  test('点击触发', async () => {
    const wrapper = mount(WdPopover)
    await wrapper.find('.wd-popover__target').trigger('click')
    const emitted = wrapper.emitted() as Record<string, any[]>
    expect(emitted['open']).toBeTruthy()
    expect(emitted['update:modelValue']).toBeTruthy()
    expect(emitted['update:modelValue'][0][0]).toBe(true)
  })

  test('禁用状态', async () => {
    const wrapper = mount(WdPopover, {
      props: {
        disabled: true
      }
    })
    await wrapper.find('.wd-popover__target').trigger('click')
    const emitted = wrapper.emitted() as Record<string, any[]> | undefined
    expect(emitted?.['update:modelValue']).toBeFalsy()
  })

  test('自定义类名和样式', async () => {
    const wrapper = mount(WdPopover, {
      props: {
        customClass: 'custom-popover',
        customStyle: 'background: red;'
      }
    })
    expect(wrapper.classes()).toContain('custom-popover')
    expect(wrapper.attributes('style')).toBe('background: red;')
  })

  test('自定义箭头和弹出层类名', async () => {
    const wrapper = mount(WdPopover, {
      props: {
        customArrow: 'custom-arrow',
        customPop: 'custom-pop',
        modelValue: true
      }
    })
    expect(wrapper.find('.wd-popover__arrow').classes()).toContain('custom-arrow')
    expect(wrapper.find('.wd-popover__container').classes()).toContain('custom-pop')
  })

  test('默认插槽内容', async () => {
    const wrapper = mount(WdPopover, {
      slots: {
        default: '<div class="custom-content">自定义内容</div>'
      },
      props: {
        modelValue: true
      }
    })
    expect(wrapper.find('.custom-content').exists()).toBeTruthy()
    expect(wrapper.find('.custom-content').text()).toBe('自定义内容')
  })

  test('内容插槽', async () => {
    const wrapper = mount(WdPopover, {
      slots: {
        content: '<div class="custom-slot-content">自定义内容插槽</div>'
      },
      props: {
        useContentSlot: true,
        modelValue: true
      }
    })
    expect(wrapper.find('.custom-slot-content').exists()).toBeTruthy()
    expect(wrapper.find('.custom-slot-content').text()).toBe('自定义内容插槽')
  })

  test('关闭事件', async () => {
    const wrapper = mount(WdPopover, {
      props: {
        modelValue: true,
        showClose: true
      }
    })

    // 手动触发 close 方法
    await (wrapper.vm as any).close()
    await nextTick()

    // 验证事件
    const emitted = wrapper.emitted() as Record<string, any[]>
    // 检查 update:modelValue 事件
    expect(emitted['update:modelValue']).toBeTruthy()
    expect(emitted['update:modelValue'][0][0]).toBe(false)
  })

  test('暴露的方法', async () => {
    const wrapper = mount(WdPopover)

    // 调用 open 方法
    ;(wrapper.vm as any).open()

    const emitted = wrapper.emitted() as Record<string, any[]>
    expect(emitted['update:modelValue']).toBeTruthy()
    expect(emitted['update:modelValue'][0][0]).toBe(true)

    // 调用 close 方法
    ;(wrapper.vm as any).close()

    expect(emitted['update:modelValue'][1][0]).toBe(false)
  })
})