20260915170028

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

@@ -88,3 +88,30 @@ describe('Tree 右键菜单', () => {
     wrapper.unmount()
   })
 })
+
+describe('Tree 行内元素顺序', () => {
+  /**
+   * 回归点：箭头槽（非叶为真箭头、叶子为等宽占位）必须排在拖拽手柄之前。
+   * 放到手柄之后时，叶子行的手柄与标题之间会空出一整个箭头宽，读起来像多余空隙；
+   * 排在前面则这段空白归入左侧缩进带，手柄紧跟标题（见 tree-node.vue 模板注释）。
+   */
+  const rowClasses = (row) => [...row.element.children].map((el) => el.className)
+
+  it('拖拽开启时：箭头槽在拖拽手柄之前', () => {
+    const wrapper = mount(Tree, { props: { treeData, fieldNames, draggable: true } })
+    const parentRow = wrapper.findAll('.tree-node')[0]
+    expect(rowClasses(parentRow)).toEqual(['tree-node-switcher', 'tree-node-grip', 'tree-node-content'])
+  })
+
+  it('叶子行的占位与手柄顺序一致，保证标题横坐标与非叶兄弟相同', () => {
+    const wrapper = mount(Tree, {
+      props: { treeData, fieldNames, draggable: true, defaultExpandedKeys: ['1'] },
+    })
+    const childRow = wrapper.findAll('.tree-node')[1]
+    expect(rowClasses(childRow)).toEqual([
+      'tree-node-switcher is-placeholder',
+      'tree-node-grip',
+      'tree-node-content',
+    ])
+  })
+})