75 lines
3.2 KiB
JavaScript
75 lines
3.2 KiB
JavaScript
import { describe, it, expect } from 'vitest'
|
||
import { mount } from '@vue/test-utils'
|
||
import { nextTick } from 'vue'
|
||
import Select from '@/components/ui/select/select.vue'
|
||
|
||
/** 下拉浮层 Teleport 到 body，需从 body 查 */
|
||
function popoverContent() {
|
||
return document.body.querySelector('.popover-content')
|
||
}
|
||
|
||
describe('Select 下拉浮层宽度上限', () => {
|
||
it('浮层内容盒带 select-popover-content 锚点类（:has() 定位浮层加 max-width 用）', async () => {
|
||
// 浮层由 Popover 渲染、Teleport 到 body，不在 Select 的 scoped 作用域内，
|
||
// 只能靠 content-class 传递锚点类，再由全局样式 .popover:has(> .select-popover-content)
|
||
// 把 max-width 上限压到浮层上；锚点类丢失等于宽度上限静默失效
|
||
const wrapper = mount(Select, {
|
||
props: { options: [{ value: 'a', label: '选项' }] },
|
||
})
|
||
await wrapper.find('.select-trigger').trigger('click')
|
||
await nextTick()
|
||
|
||
const content = popoverContent()
|
||
expect(content).not.toBeNull()
|
||
expect(content.classList.contains('select-popover-content')).toBe(true)
|
||
wrapper.unmount()
|
||
})
|
||
})
|
||
|
||
describe('Select 远程分页增强（visible-change / load-more）', () => {
|
||
it('展开时 emit visible-change(true)，供远程选择在打开时加载首页', async () => {
|
||
const wrapper = mount(Select, { props: { options: [{ value: 'a', label: '甲' }] } })
|
||
await wrapper.find('.select-trigger').trigger('click')
|
||
await nextTick()
|
||
|
||
expect(wrapper.emitted('visible-change')?.at(-1)).toEqual([true])
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('选项列表滚动触底 emit load-more', async () => {
|
||
const options = Array.from({ length: 30 }, (_, i) => ({ value: String(i), label: `项${i}` }))
|
||
const wrapper = mount(Select, { props: { options }, attachTo: document.body })
|
||
await wrapper.find('.select-trigger').trigger('click')
|
||
await nextTick()
|
||
|
||
const list = document.body.querySelector('.select-list')
|
||
expect(list).not.toBeNull()
|
||
// jsdom 不做布局，手动造出"已滚到触底"的度量：scrollTop + clientHeight >= scrollHeight - 24
|
||
Object.defineProperty(list, 'scrollHeight', { value: 300, configurable: true })
|
||
Object.defineProperty(list, 'clientHeight', { value: 200, configurable: true })
|
||
Object.defineProperty(list, 'scrollTop', { value: 100, configurable: true })
|
||
list.dispatchEvent(new Event('scroll'))
|
||
await nextTick()
|
||
|
||
expect(wrapper.emitted('load-more')).toBeTruthy()
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('loading 中滚动触底不重复 emit load-more', async () => {
|
||
const options = Array.from({ length: 30 }, (_, i) => ({ value: String(i), label: `项${i}` }))
|
||
const wrapper = mount(Select, { props: { options, loading: true }, attachTo: document.body })
|
||
await wrapper.find('.select-trigger').trigger('click')
|
||
await nextTick()
|
||
|
||
const list = document.body.querySelector('.select-list')
|
||
Object.defineProperty(list, 'scrollHeight', { value: 300, configurable: true })
|
||
Object.defineProperty(list, 'clientHeight', { value: 200, configurable: true })
|
||
Object.defineProperty(list, 'scrollTop', { value: 100, configurable: true })
|
||
list.dispatchEvent(new Event('scroll'))
|
||
await nextTick()
|
||
|
||
expect(wrapper.emitted('load-more')).toBeFalsy()
|
||
wrapper.unmount()
|
||
})
|
||
})
|