20260913231607

code/fms/fms-vue/tests/components/select.spec.js

@@ -0,0 +1,74 @@
+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()
+  })
+})