268 lines
10 KiB
JavaScript
268 lines
10 KiB
JavaScript
import { describe, it, expect, beforeEach } from 'vitest'
|
||
import { mount } from '@vue/test-utils'
|
||
import { createPinia, setActivePinia } from 'pinia'
|
||
import { nextTick } from 'vue'
|
||
import { registerFeature, useAreaSelection, StkTable } from 'stk-table-vue'
|
||
import FmsTable from '@/components/fms-table/FmsTable.vue'
|
||
|
||
// 与 main.js 一致：注册 stk-table 的按需 feature（行编辑依赖 area-selection）
|
||
registerFeature(useAreaSelection)
|
||
|
||
const COLS = 20
|
||
function makeColumns() {
|
||
const cols = []
|
||
for (let i = 0; i < COLS; i++) {
|
||
cols.push({ title: `列 ${i}`, dataIndex: `c${i}`, width: 120, editor: { type: 'input' } })
|
||
}
|
||
return cols
|
||
}
|
||
function makeRows(n) {
|
||
return Array.from({ length: n }, (_, i) => {
|
||
const row = { id: i + 1 }
|
||
for (let j = 0; j < COLS; j++) row[`c${j}`] = `${i + 1}-${j}`
|
||
return row
|
||
})
|
||
}
|
||
|
||
describe('fms-table 虚拟滚动验证', () => {
|
||
beforeEach(() => setActivePinia(createPinia()))
|
||
|
||
it('5000 行时仅渲染可视区行数（虚拟滚动切片生效）', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: { columns: makeColumns(), dataSource: makeRows(5000), rowKey: 'id', seq: false },
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
const trCount = wrapper.findAll('.stk-tbody-main tr').length
|
||
console.log('=== 5000 行时 DOM 实际渲染的 <tr> 数量:', trCount)
|
||
expect(trCount).toBeGreaterThan(0)
|
||
expect(trCount).toBeLessThan(100)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('20 行时全量渲染（数据量小于阈值关闭虚拟滚动，不再吞掉最后一行）', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: { columns: makeColumns(), dataSource: makeRows(20), rowKey: 'id', seq: false },
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
const trCount = wrapper.findAll('.stk-tbody-main tr').length
|
||
console.log('=== 20 行时 DOM 实际渲染的 <tr> 数量:', trCount)
|
||
expect(trCount).toBe(20)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('数据量从 20 行增长到 5000 行后，DOM 行数保持为可视区行数', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: { columns: makeColumns(), dataSource: makeRows(20), rowKey: 'id', seq: false },
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
const before = wrapper.findAll('.stk-tbody-main tr').length
|
||
|
||
await wrapper.setProps({ dataSource: makeRows(5000) })
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
const after = wrapper.findAll('.stk-tbody-main tr').length
|
||
console.log(`=== 20 行时渲染 ${before} 行，改为 5000 行后渲染 ${after} 行`)
|
||
|
||
expect(before).toBeGreaterThan(0)
|
||
expect(after).toBeGreaterThan(0)
|
||
// 核心断言：5000 行数据时 DOM 只保留可视区行数，不会渲染全部 5000 行
|
||
expect(after).toBeLessThan(100)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
// 性能优化回归（item #1）：非编辑态下可编辑列/纯展示列走 StkTable 原生 td 渲染，
|
||
// 不注入 customCell 函数式组件；只有进入编辑后才挂载编辑器。
|
||
it('非编辑态：全部单元格走原生 table-cell-wrapper 渲染，零编辑器组件', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: { columns: makeColumns(), dataSource: makeRows(20), rowKey: 'id', seq: false },
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
|
||
const tds = wrapper.findAll('.stk-tbody-main td[data-col-key]')
|
||
expect(tds.length).toBeGreaterThan(0)
|
||
// 没有活动编辑行 → 不注入任何编辑器渲染
|
||
expect(wrapper.find('.fms-cell-editor-root').exists()).toBe(false)
|
||
// 每个数据单元格都走库原生 table-cell-wrapper 路径（无 fms-cell-display 包裹）
|
||
const nativeWrappers = wrapper.findAll('.stk-tbody-main .table-cell-wrapper')
|
||
expect(nativeWrappers.length).toBe(tds.length)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
// 性能优化回归（item #1）：进入编辑后仅活动编辑行挂载编辑器，其余行保持原生渲染
|
||
it('进入编辑后：仅活动编辑行挂载编辑器，其余行保持原生渲染', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: { columns: makeColumns(), dataSource: makeRows(20), rowKey: 'id', seq: false },
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
|
||
const trs = wrapper.findAll('.stk-tbody-main tr')
|
||
const td = trs[1].find('td[data-col-key]')
|
||
await td.trigger('mousedown', { button: 0 })
|
||
await nextTick()
|
||
await td.trigger('mouseup')
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
|
||
const editingRow = wrapper.findAll('.stk-tbody-main tr')[1]
|
||
const editorCountInEditingRow = editingRow.findAll('.fms-cell-editor-root').length
|
||
expect(editorCountInEditingRow).toBeGreaterThan(0)
|
||
expect(editorCountInEditingRow).toBeLessThanOrEqual(makeColumns().length)
|
||
|
||
// 其余行不挂载编辑器（保持原生渲染，滚动时行间切换不重建整表）
|
||
trs.forEach((tr, index) => {
|
||
if (index === 1) return
|
||
expect(tr.findAll('.fms-cell-editor-root').length).toBe(0)
|
||
})
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('点击单元格进入单行编辑（area-selection 注册后生效，编辑器渲染）', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: { columns: makeColumns(), dataSource: makeRows(20), rowKey: 'id', seq: false },
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
|
||
// 点击第 2 行第 1 个数据列（跳过 virtualX 的占位 td，选中带 data-col-key 的单元格）
|
||
const trs = wrapper.findAll('.stk-tbody-main tr')
|
||
const td = trs[1].find('td[data-col-key]')
|
||
console.log('=== td outerHTML:', td.element.outerHTML.slice(0, 200))
|
||
await td.trigger('mousedown', { button: 0 })
|
||
await nextTick()
|
||
console.log('=== mousedown 后 td data-cs-s:', td.attributes()['data-cs-s'])
|
||
await td.trigger('mouseup')
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
|
||
const editor = wrapper.find('.fms-cell-editor-root')
|
||
console.log('=== 点击后编辑器是否渲染:', editor.exists())
|
||
expect(editor.exists()).toBe(true)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
// 列宽/列序拖拽依赖 v-model:columns 回写：未绑定的父组件（如 dashboard 单向 :columns）
|
||
// 拖了松手就回弹，因此未绑定时直接关闭这两个功能（不渲染把手），绑定时保持开启。
|
||
it('未绑定 v-model:columns 时关闭列宽拖拽与列头拖拽（无处回写）', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: { columns: makeColumns(), dataSource: makeRows(20), rowKey: 'id', seq: false },
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
const stkTable = wrapper.findComponent(StkTable)
|
||
expect(stkTable.props('colResizable')).toBe(false)
|
||
expect(stkTable.props('headerDrag')).toBe(false)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('绑定 v-model:columns 时列宽拖拽与列头拖拽保持开启', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: {
|
||
columns: makeColumns(),
|
||
dataSource: makeRows(20),
|
||
rowKey: 'id',
|
||
seq: false,
|
||
// 模拟 v-model:columns：提供 update:columns 监听器
|
||
'onUpdate:columns': () => {},
|
||
},
|
||
attachTo: document.body,
|
||
})
|
||
await nextTick()
|
||
await new Promise((r) => setTimeout(r, 100))
|
||
const stkTable = wrapper.findComponent(StkTable)
|
||
// 开启时统一传 { disabled } 回调（库只支持这种按列控制方式）：普通列可拖，
|
||
// 列上显式写 resizable: false 的（操作列 / 展开列）不拖
|
||
const colResizable = stkTable.props('colResizable')
|
||
expect(colResizable).toMatchObject({ disabled: expect.any(Function) })
|
||
expect(colResizable.disabled({ dataIndex: 'c0', width: 120 })).toBe(false)
|
||
expect(colResizable.disabled({ dataIndex: '__actions__', resizable: false })).toBe(true)
|
||
expect(stkTable.props('headerDrag')).toBeTruthy()
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('autoFitWidth 默认关闭表格自动铺满宽度', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: {
|
||
columns: makeColumns(),
|
||
dataSource: makeRows(20),
|
||
rowKey: 'id',
|
||
seq: false,
|
||
'onUpdate:columns': () => {},
|
||
},
|
||
})
|
||
await nextTick()
|
||
|
||
expect(wrapper.find('.fms-table').classes()).not.toContain('fms-table--auto-fit-width')
|
||
expect(wrapper.findComponent(StkTable).props('colResizable')).toMatchObject({
|
||
disabled: expect.any(Function),
|
||
})
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('autoFitWidth=true 时关闭列宽拖拽并使用自适应布局', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: {
|
||
columns: makeColumns(),
|
||
dataSource: makeRows(20),
|
||
rowKey: 'id',
|
||
autoFitWidth: true,
|
||
'onUpdate:columns': () => {},
|
||
},
|
||
})
|
||
await nextTick()
|
||
|
||
expect(wrapper.find('.fms-table').classes()).toContain('fms-table--auto-fit-width')
|
||
expect(wrapper.findComponent(StkTable).props('colResizable')).toBe(false)
|
||
wrapper.unmount()
|
||
})
|
||
|
||
it('序号列和复选框列允许调整宽度且回写后保持', async () => {
|
||
const wrapper = mount(FmsTable, {
|
||
props: {
|
||
columns: [{ title: '名称', dataIndex: 'name', width: 120 }],
|
||
dataSource: [{ id: 1, name: '测试' }],
|
||
rowKey: 'id',
|
||
rowSelection: { selectedRowKeys: [], onChange: () => {} },
|
||
'onUpdate:columns': () => {},
|
||
},
|
||
})
|
||
await nextTick()
|
||
|
||
const table = wrapper.findComponent(StkTable)
|
||
const columns = table.props('columns')
|
||
const seq = columns.find((column) => column.type === 'seq')
|
||
const selection = columns.find((column) => column.__fmsSelection)
|
||
expect(seq?.headerAlign).toBe('center')
|
||
expect(seq?.resizable).not.toBe(false)
|
||
expect(selection?.resizable).not.toBe(false)
|
||
|
||
await table.vm.$emit(
|
||
'update:columns',
|
||
columns.map((column) =>
|
||
column.type === 'seq'
|
||
? { ...column, width: '72px' }
|
||
: column.__fmsSelection
|
||
? { ...column, width: '56px' }
|
||
: column,
|
||
),
|
||
)
|
||
await nextTick()
|
||
|
||
const updated = wrapper.findComponent(StkTable).props('columns')
|
||
expect(updated.find((column) => column.type === 'seq')?.width).toBe(72)
|
||
expect(updated.find((column) => column.__fmsSelection)?.width).toBe(56)
|
||
wrapper.unmount()
|
||
})
|
||
})
|