niuma-ui 1.0.0

package/src/__tests__/RsTree.spec.ts

@@ -0,0 +1,572 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import RsTree from '../components/RsTree.vue'
+import {
+  collectHalfCheckedKeys,
+  flattenTreeNodeIds,
+  getTreeChildren,
+  getTreeKey,
+  getTreeLabel,
+  resolveTreeFieldNames,
+  resolveTreeFocusKey,
+  splitTreeLabelHighlight,
+} from '../components/tree-utils'
+
+const nodes = [
+  { key: 'root', label: '根节点', children: [{ key: 'child', label: '子节点' }] },
+  { id: 'alt', title: '备用字段' },
+]
+
+/**
+ * jsdom 不做布局，直接给 scrollTop 赋值会被钳成 0，无法模拟滚动。
+ * 覆盖成可写的自有属性后再派发 scroll，组件才能读到真实偏移。
+ */
+async function scrollViewportTo(element: Element, top: number): Promise<void> {
+  Object.defineProperty(element, 'scrollTop', { configurable: true, writable: true, value: top })
+  element.dispatchEvent(new Event('scroll'))
+  await nextTick()
+}
+
+const checkNodes = [
+  {
+    key: 'parent',
+    label: '父节点',
+    children: [
+      { key: 'child-a', label: '子 A' },
+      { key: 'child-b', label: '子 B' },
+    ],
+  },
+]
+
+describe('RsTree', () => {
+  it('renders nodes when defaultExpandAll is true', () => {
+    const wrapper = mount(RsTree, {
+      props: { nodes, defaultExpandAll: true },
+    })
+    expect(wrapper.text()).toContain('根节点')
+    expect(wrapper.text()).toContain('子节点')
+    expect(wrapper.text()).toContain('备用字段')
+  })
+
+  it('hides children until expanded', async () => {
+    const wrapper = mount(RsTree, {
+      props: { nodes: [nodes[0]] },
+    })
+    expect(wrapper.text()).not.toContain('子节点')
+    await wrapper.find('.rs-tree__toggle').trigger('click')
+    expect(wrapper.text()).toContain('子节点')
+  })
+
+  it('selects a single node via v-model', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }],
+        modelValue: '',
+        'onUpdate:modelValue': (value: string | string[]) => wrapper.setProps({ modelValue: value }),
+      },
+    })
+    await wrapper.findAll('.rs-tree__label')[1].trigger('click')
+    expect(wrapper.props('modelValue')).toBe('b')
+    const selected = wrapper.find('.rs-tree__row--selected')
+    expect(selected.exists()).toBe(true)
+    expect(selected.text()).toContain('B')
+  })
+
+  it('highlights multiple selected rows in multiple mode', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }, { key: 'c', label: 'C' }],
+        multiple: true,
+        modelValue: ['a', 'c'],
+      },
+    })
+    expect(wrapper.findAll('.rs-tree__row--selected')).toHaveLength(2)
+  })
+
+  it('supports fieldNames mapping', () => {
+    const apiNodes = [
+      {
+        id: '1',
+        name: '部门',
+        subList: [{ id: '1-1', name: '研发' }],
+      },
+    ]
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: apiNodes,
+        fieldNames: { key: 'id', label: 'name', children: 'subList' },
+        defaultExpandAll: true,
+      },
+    })
+    expect(wrapper.text()).toContain('部门')
+    expect(wrapper.text()).toContain('研发')
+  })
+
+  it('syncs halfCheckedKeys when partially checked', async () => {
+    const updates: string[][] = []
+    mount(RsTree, {
+      props: {
+        nodes: checkNodes,
+        checkable: true,
+        defaultExpandAll: true,
+        checkedKeys: ['child-a'],
+        halfCheckedKeys: [],
+        'onUpdate:halfCheckedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) updates.push(value)
+        },
+      },
+    })
+    await flushPromises()
+    expect(updates.at(-1)).toEqual(expect.arrayContaining(['parent']))
+  })
+
+  it('checks on node click when checkOnClickNode is true', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }],
+        checkable: true,
+        checkOnClickNode: true,
+        selectable: false,
+        checkedKeys: [] as string[],
+        'onUpdate:checkedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) void wrapper.setProps({ checkedKeys: value })
+        },
+      },
+    })
+    await wrapper.find('.rs-tree__label').trigger('click')
+    expect(wrapper.props('checkedKeys')).toEqual(['a'])
+  })
+
+  it('filters nodes with filter prop and highlights matches', () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes,
+        filter: '子节点',
+        autoExpandParent: true,
+      },
+    })
+    expect(wrapper.find('.rs-tree__highlight').exists()).toBe(true)
+    expect(wrapper.text()).not.toContain('备用字段')
+  })
+
+  it('does not render keyword highlight when highlight is false', () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes,
+        filter: '子节点',
+        highlight: false,
+        autoExpandParent: true,
+      },
+    })
+    expect(wrapper.find('.rs-tree__highlight').exists()).toBe(false)
+    expect(wrapper.text()).toContain('子节点')
+  })
+
+  it('shows empty state when filter has no matches', () => {
+    const wrapper = mount(RsTree, {
+      props: { nodes, filter: '不存在的内容' },
+    })
+    expect(wrapper.find('.rs-tree__empty').exists()).toBe(true)
+  })
+
+  it('restores expanded keys after clearing a filter with no matches', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [nodes[0]],
+        autoExpandParent: true,
+        expandedKeys: ['root'] as string[],
+        'onUpdate:expandedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) void wrapper.setProps({ expandedKeys: value })
+        },
+      },
+    })
+    expect(wrapper.props('expandedKeys')).toEqual(['root'])
+    await wrapper.setProps({ filter: '不存在的内容' })
+    expect(wrapper.find('.rs-tree__empty').exists()).toBe(true)
+    expect(wrapper.props('expandedKeys')).toEqual(['root'])
+    await wrapper.setProps({ filter: '' })
+    expect(wrapper.props('expandedKeys')).toEqual(['root'])
+  })
+
+  it('restores pre-filter expanded keys after clearing a matching filter', async () => {
+    const treeNodes = [
+      {
+        key: 'root',
+        label: '根',
+        children: [
+          { key: 'keep', label: '保留', children: [{ key: 'keep-1', label: '保留子' }] },
+          { key: 'hide', label: '隐藏', children: [{ key: 'hide-1', label: '隐藏子' }] },
+        ],
+      },
+    ]
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: treeNodes,
+        autoExpandParent: true,
+        expandedKeys: ['root', 'hide'] as string[],
+        'onUpdate:expandedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) void wrapper.setProps({ expandedKeys: value })
+        },
+      },
+    })
+    await wrapper.setProps({ filter: '保留' })
+    expect(wrapper.props('expandedKeys')).toEqual(expect.arrayContaining(['root', 'keep']))
+    await wrapper.setProps({ filter: '' })
+    expect(wrapper.props('expandedKeys')).toEqual(['root', 'hide'])
+  })
+
+  it('loads children lazily on expand', async () => {
+    const loadData = vi.fn(async (node: { key?: string }) => {
+      if (node.key === 'lazy-root') {
+        ;(node as { children?: unknown[] }).children = [{ key: 'lazy-child', label: '异步子节点' }]
+      }
+    })
+    const lazyNodes = [{ key: 'lazy-root', label: '异步根', isLeaf: false }]
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: lazyNodes,
+        lazy: true,
+        loadData,
+      },
+    })
+    await wrapper.find('.rs-tree__toggle').trigger('click')
+    await vi.waitFor(() => expect(loadData).toHaveBeenCalled())
+    await wrapper.setProps({ nodes: [{ key: 'lazy-root', label: '异步根', children: [{ key: 'lazy-child', label: '异步子节点' }] }] })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('异步子节点')
+  })
+
+  it('supports keyboard navigation', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }],
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const treeEl = wrapper.get('.rs-tree').element as HTMLElement
+    treeEl.focus()
+    treeEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+    await flushPromises()
+    expect(wrapper.find('.rs-tree__row--focused').text()).toContain('B')
+    wrapper.unmount()
+  })
+
+  it('exposes focusNode', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }],
+      },
+    })
+    const vm = wrapper.vm as { focusNode: (key: string) => void }
+    vm.focusNode('b')
+    await flushPromises()
+    expect(wrapper.find('.rs-tree__row--focused').text()).toContain('B')
+  })
+
+  it('collapses siblings in accordion mode', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [
+          {
+            key: 'root',
+            label: '根',
+            children: [
+              { key: 'a', label: 'A', children: [{ key: 'a-1', label: 'A1' }] },
+              { key: 'b', label: 'B', children: [{ key: 'b-1', label: 'B1' }] },
+            ],
+          },
+        ],
+        accordion: true,
+        expandedKeys: ['root', 'a'],
+        'onUpdate:expandedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) void wrapper.setProps({ expandedKeys: value })
+        },
+      },
+    })
+    const toggles = wrapper.findAll('.rs-tree__toggle')
+    await toggles[2].trigger('click')
+    expect(wrapper.props('expandedKeys')).toEqual(expect.arrayContaining(['root', 'b']))
+    expect(wrapper.props('expandedKeys')).not.toContain('a')
+  })
+
+  it('emits node-drop when draggable', async () => {
+    const onDrop = vi.fn()
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }],
+        draggable: true,
+        onNodeDrop: onDrop,
+      },
+      attachTo: document.body,
+    })
+    const dataTransfer = { setData: vi.fn(), effectAllowed: '' }
+    const items = wrapper.findAll('.rs-tree__row')
+    await items[0].trigger('dragstart', { dataTransfer })
+    await items[1].trigger('drop', { dataTransfer, clientY: 20 })
+    expect(onDrop).toHaveBeenCalledWith('a', 'b', expect.any(String))
+    wrapper.unmount()
+  })
+
+  it('blocks dropping a node into its own descendant but allows dropping onto an ancestor', async () => {
+    const onDrop = vi.fn()
+    const allowDrop = vi.fn(() => true)
+    const treeNodes = [
+      {
+        key: 'parent',
+        label: '父',
+        children: [{ key: 'child', label: '子' }],
+      },
+    ]
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: treeNodes,
+        draggable: true,
+        defaultExpandAll: true,
+        allowDrop,
+        onNodeDrop: onDrop,
+      },
+      attachTo: document.body,
+    })
+    const dataTransfer = { setData: vi.fn(), effectAllowed: '' }
+    const rows = wrapper.findAll('.rs-tree__row')
+
+    // 父 → 子：会成环，组件内直接否决，allowDrop 都不该被问到
+    await rows[0].trigger('dragstart', { dataTransfer })
+    await rows[1].trigger('drop', { dataTransfer, clientY: 20 })
+    expect(onDrop).not.toHaveBeenCalled()
+    expect(allowDrop).not.toHaveBeenCalled()
+
+    // 子 → 父：合法（如拖出所在文件夹），交由 allowDrop 裁决
+    await rows[1].trigger('dragstart', { dataTransfer })
+    await rows[0].trigger('drop', { dataTransfer, clientY: 20 })
+    expect(allowDrop).toHaveBeenCalled()
+    expect(onDrop).toHaveBeenCalledWith('child', 'parent', expect.any(String))
+    wrapper.unmount()
+  })
+
+  it('hides drag handle when dragTrigger is row', () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }],
+        draggable: true,
+        dragTrigger: 'row',
+      },
+    })
+    expect(wrapper.find('.rs-tree__drag-handle').exists()).toBe(false)
+    expect(wrapper.classes()).toContain('rs-tree--drag-row')
+  })
+
+  it('auto virtualizes large flat trees', () => {
+    const largeNodes = Array.from({ length: 150 }, (_, index) => ({
+      key: String(index),
+      label: `Node ${index}`,
+    }))
+    const wrapper = mount(RsTree, {
+      props: { nodes: largeNodes, height: 200 },
+    })
+    expect(wrapper.classes()).toContain('rs-tree--virtual')
+    expect(wrapper.findAll('.rs-tree__item').length).toBeLessThan(largeNodes.length)
+  })
+
+  it('reports aria-posinset from the slice offset while scrolled', async () => {
+    const largeNodes = Array.from({ length: 600 }, (_, index) => ({
+      key: `n-${index}`,
+      label: `Node ${index}`,
+    }))
+    const wrapper = mount(RsTree, {
+      props: { nodes: largeNodes, virtual: true, height: 320, itemHeight: 32, overscan: 2 },
+    })
+    const viewport = wrapper.find('.rs-tree__viewport')
+    await scrollViewportTo(viewport.element, 3200)
+    const firstRow = wrapper.find('.rs-tree__row')
+    // scrollTop 3200 / 32 = 第 100 行，减 overscan 2 → 首个渲染行是第 99 项（posinset 从 1 起算）
+    expect(firstRow.attributes('aria-posinset')).toBe('99')
+    expect(firstRow.attributes('aria-setsize')).toBe('600')
+    expect(firstRow.text()).toContain('Node 98')
+  })
+
+  it('keeps virtual rows visible after filtering a scrolled large tree', async () => {
+    const largeNodes = Array.from({ length: 1200 }, (_, index) => ({
+      key: `t-${index}`,
+      label: index === 50 ? 'bas_sku_match' : `TABLE_${index}`,
+    }))
+    const wrapper = mount(RsTree, {
+      props: { nodes: largeNodes, virtual: true, height: 240, itemHeight: 28 },
+    })
+    const viewport = wrapper.find('.rs-tree__viewport')
+    expect(viewport.exists()).toBe(true)
+    // 已滚到列表中部：过滤后内容骤短，若不归零/钳位，切片 start 会越界并渲染出空白
+    await scrollViewportTo(viewport.element, 8000)
+    expect(wrapper.findAll('.rs-tree__item').length).toBeGreaterThan(0)
+    await wrapper.setProps({ filter: 'bas_sku' })
+    await nextTick()
+    await nextTick()
+    expect(wrapper.findAll('.rs-tree__item').length).toBeGreaterThan(0)
+    expect(wrapper.text()).toContain('bas_sku_match')
+    expect(viewport.element.scrollTop).toBe(0)
+  })
+
+  it('expands node on label click when expandOnClickNode is true', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [nodes[0]],
+        expandOnClickNode: true,
+        selectable: false,
+        expandedKeys: [] as string[],
+        'onUpdate:expandedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) void wrapper.setProps({ expandedKeys: value })
+        },
+      },
+    })
+    await wrapper.find('.rs-tree__label').trigger('click')
+    expect(wrapper.props('expandedKeys')).toEqual(['root'])
+  })
+
+  it('renders showLine and blockNode classes', () => {
+    const wrapper = mount(RsTree, {
+      props: { nodes, showLine: true, blockNode: true, defaultExpandAll: true },
+    })
+    expect(wrapper.classes()).toContain('rs-tree--line')
+    expect(wrapper.classes()).toContain('rs-tree--block')
+    expect(wrapper.find('.rs-tree__lines').exists()).toBe(true)
+    expect(wrapper.find('.rs-tree__line-vert').exists()).toBe(true)
+    expect(wrapper.find('.rs-tree__line-horz').exists()).toBe(true)
+  })
+
+  it('applies focused row class to the focused node', async () => {
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }],
+      },
+    })
+    const vm = wrapper.vm as { focusNode: (key: string) => void }
+    vm.focusNode('b')
+    await flushPromises()
+    expect(wrapper.find('.rs-tree__row--focused').text()).toContain('B')
+  })
+
+  it('emits node-dblclick on a row that was not focused before the gesture', async () => {
+    const onNodeDblclick = vi.fn()
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: [{ key: 'a', label: 'A' }, { key: 'b', label: 'B' }],
+        blockNode: true,
+        selectable: false,
+        onNodeDblclick,
+      },
+    })
+    const rows = wrapper.findAll('.rs-tree__row')
+    await rows[0].trigger('click')
+    await rows[1].trigger('dblclick')
+    expect(onNodeDblclick).toHaveBeenCalledTimes(1)
+    expect(onNodeDblclick).toHaveBeenCalledWith(
+      expect.objectContaining({ key: 'b', label: 'B' }),
+      'b',
+    )
+  })
+})
+
+describe('tree-utils basics', () => {
+  it('getTreeKey prefers key then id then label', () => {
+    expect(getTreeKey({ key: 'a' })).toBe('a')
+    expect(getTreeKey({ id: 'b' })).toBe('b')
+    expect(getTreeKey({ label: 'c' })).toBe('c')
+  })
+
+  it('supports custom fieldNames', () => {
+    const fields = resolveTreeFieldNames({ key: 'id', label: 'name', children: 'subList' })
+    expect(getTreeKey({ id: 'x' }, fields)).toBe('x')
+    expect(getTreeLabel({ name: '标题' }, fields)).toBe('标题')
+    expect(getTreeChildren({ subList: [{ id: '1' }] }, fields)).toHaveLength(1)
+  })
+
+  it('splitTreeLabelHighlight marks matched segment', () => {
+    const parts = splitTreeLabelHighlight('Hello World', 'wor')
+    expect(parts.some((part) => part.highlight && part.text === 'Wor')).toBe(true)
+  })
+
+  it('collectHalfCheckedKeys returns parent for partial selection', () => {
+    const index = new Map([
+      ['parent', { node: {}, parentKey: null, childrenKeys: ['child-a', 'child-b'] }],
+      ['child-a', { node: {}, parentKey: 'parent', childrenKeys: [] }],
+      ['child-b', { node: {}, parentKey: 'parent', childrenKeys: [] }],
+    ])
+    expect(collectHalfCheckedKeys(index, new Set(['child-a']), false)).toEqual(['parent'])
+  })
+
+  it('resolveTreeFocusKey moves across flat nodes', () => {
+    const flat = [
+      { key: 'a', node: {}, depth: 0, hasChildren: false, isLast: false, parentKey: null, levelLines: [] },
+      { key: 'b', node: {}, depth: 0, hasChildren: false, isLast: true, parentKey: null, levelLines: [] },
+    ]
+    const index = new Map([
+      ['a', { node: {}, parentKey: null, childrenKeys: [] }],
+      ['b', { node: {}, parentKey: null, childrenKeys: [] }],
+    ])
+    expect(resolveTreeFocusKey(flat, 'a', 'next', index)).toBe('b')
+  })
+
+  it('flattenTreeNodeIds walks the full tree', () => {
+    expect(flattenTreeNodeIds(nodes)).toEqual(['root', 'child', 'alt'])
+  })
+
+  it('onlyCheckLeaf hides parent checkbox and checks leaves only', async () => {
+    const halfUpdates: string[][] = []
+    const wrapper = mount(RsTree, {
+      props: {
+        nodes: checkNodes,
+        checkable: true,
+        onlyCheckLeaf: true,
+        defaultExpandAll: true,
+        checkedKeys: [] as string[],
+        'onUpdate:checkedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) void wrapper.setProps({ checkedKeys: value })
+        },
+        'onUpdate:halfCheckedKeys': (value: string[] | undefined) => {
+          if (value !== undefined) halfUpdates.push(value)
+        },
+      },
+    })
+    expect(wrapper.findAll('.rs-tree__checkbox')).toHaveLength(2)
+    expect(wrapper.find('.rs-tree__checkbox-spacer').exists()).toBe(true)
+    await wrapper.findAll('.rs-tree__checkbox-input')[0].trigger('change')
+    expect(wrapper.props('checkedKeys')).toEqual(['child-a'])
+    await flushPromises()
+    expect(halfUpdates.at(-1)).toEqual(['parent'])
+  })
+
+  it('enables fill-capture layer when height or virtual is set', () => {
+    const withHeight = mount(RsTree, {
+      props: { nodes, height: 200 },
+    })
+    expect(withHeight.classes()).toContain('rs-tree--fill-capture')
+
+    const withVirtual = mount(RsTree, {
+      props: { nodes, virtual: true },
+    })
+    expect(withVirtual.classes()).toContain('rs-tree--fill-capture')
+
+    const plain = mount(RsTree, {
+      props: { nodes },
+    })
+    expect(plain.classes()).not.toContain('rs-tree--fill-capture')
+  })
+
+  it('does not stop contextmenu propagation for parent handlers', async () => {
+    const onContextmenu = vi.fn()
+    const wrapper = mount({
+      components: { RsTree },
+      template: '<div class="host" @contextmenu="onContextmenu"><RsTree :nodes="nodes" :height="200" /></div>',
+      setup() {
+        return {
+          nodes: [{ key: 'only', label: '唯一节点' }],
+          onContextmenu,
+        }
+      },
+    })
+    await wrapper.find('.rs-tree').trigger('contextmenu')
+    expect(onContextmenu).toHaveBeenCalledTimes(1)
+  })
+})