20260913231607

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

@@ -158,3 +158,50 @@ describe('Popover 零包裹交互', () => {
     wrapper.unmount()
   })
 })
+
+describe('Popover 浮层宽度跟随触发器', () => {
+  /** jsdom 里 offsetWidth 恒为 0，覆写成真实宽度才能断言下发值 */
+  function stubTriggerWidth(wrapper, width) {
+    const trigger = wrapper.find('span.popover-trigger').element
+    Object.defineProperty(trigger, 'offsetWidth', { value: width, configurable: true })
+  }
+
+  it('开启时触发器宽作为 min-width 下发，而非写死 width（内容更宽仍可撑开）', async () => {
+    const wrapper = mount(Popover, {
+      props: { trigger: 'click', followTriggerWidth: true },
+      slots: {
+        trigger: '<button class="t-btn">触发</button>',
+        content: '<div class="t-content">内容</div>',
+      },
+    })
+    stubTriggerWidth(wrapper, 240)
+    await wrapper.find('button.t-btn').trigger('click')
+    await flush()
+
+    const float = bodyPopover()
+    expect(float.style.minWidth).toBe('240px')
+    // 关键：不写死宽度，浮层才能被更宽的内容撑开；内容靠 CSS 铺满浮层
+    expect(float.style.width).toBe('')
+    expect(float.classList.contains('popover-follow-trigger-width')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('未开启时不下发任何宽度约束（完全由内容撑开）', async () => {
+    const wrapper = mount(Popover, {
+      props: { trigger: 'click' },
+      slots: {
+        trigger: '<button class="t-btn">触发</button>',
+        content: '<div class="t-content">内容</div>',
+      },
+    })
+    stubTriggerWidth(wrapper, 240)
+    await wrapper.find('button.t-btn').trigger('click')
+    await flush()
+
+    const float = bodyPopover()
+    expect(float.style.minWidth).toBe('')
+    expect(float.style.width).toBe('')
+    expect(float.classList.contains('popover-follow-trigger-width')).toBe(false)
+    wrapper.unmount()
+  })
+})