20260821230656

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

@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest'
+import { h, nextTick, ref } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import Form from '@/components/ui/form/form.vue'
+import FormItem from '@/components/ui/form/form-item.vue'
+
+const model = () =>
+  ref({
+    code: 'a',
+    name: 'b',
+    note: 'c',
+  })
+
+function mountForm(columns = 1, extraProps = {}) {
+  return mount(Form, {
+    props: { model: model().value, columns, ...extraProps },
+    slots: {
+      default: () => [
+        h(FormItem, { name: 'code', label: '编码' }, { default: () => h('input') }),
+        h(FormItem, { name: 'name', label: '名称' }, { default: () => h('input') }),
+        h(FormItem, { name: 'note', label: '备注', span: 2 }, { default: () => h('input') }),
+      ],
+    },
+  })
+}
+
+describe('Form 多列网格布局', () => {
+  it('columns=1 时保持原布局（无网格 class）', () => {
+    const wrapper = mountForm()
+    expect(wrapper.classes()).not.toContain('fms-form-grid')
+    expect(wrapper.attributes('style')).toBeUndefined()
+  })
+
+  it('columns>1 时启用网格并生成列模板', () => {
+    const wrapper = mountForm(2)
+    expect(wrapper.classes()).toContain('fms-form-grid')
+    expect(wrapper.element.style.gridTemplateColumns).toBe('repeat(2, minmax(0, 1fr))')
+  })
+
+  it('span>1 的 FormItem 跨列', () => {
+    const wrapper = mountForm(2)
+    const items = wrapper.findAllComponents(FormItem)
+    const noteItem = items.find((i) => i.props('name') === 'note')
+    expect(noteItem.element.style.gridColumn).toBe('span 2')
+    const codeItem = items.find((i) => i.props('name') === 'code')
+    expect(codeItem.element.style.gridColumn).toBe('')
+  })
+
+  it('span 超过列数时取整行', () => {
+    const wrapper = mount(Form, {
+      props: { model: model().value, columns: 3 },
+      slots: {
+        default: () => [
+          h(FormItem, { name: 'code', label: '编码', span: 5 }, { default: () => h('input') }),
+        ],
+      },
+    })
+    const item = wrapper.findComponent(FormItem)
+    expect(item.element.style.gridColumn).toBe('span 3')
+  })
+
+  it('maxWidth 数字按 px 处理', () => {
+    const wrapper = mountForm(2, { maxWidth: 720 })
+    expect(wrapper.element.style.maxWidth).toBe('720px')
+  })
+
+  it('vertical 布局下 label 在上', () => {
+    const wrapper = mountForm(2, { layout: 'vertical' })
+    const item = wrapper.findComponent(FormItem)
+    expect(item.classes()).toContain('fms-form-item-vertical')
+    expect(item.find('.fms-form-label-vertical').exists()).toBe(true)
+  })
+})
+
+describe('Form 必填校验与 FormItem 错误展示', () => {
+  function mountRequiredForm(rules, modelValue = { code: '' }) {
+    const model = ref(modelValue)
+    const wrapper = mount(Form, {
+      props: { model: model.value, rules },
+      slots: {
+        default: () => [h(FormItem, { name: 'code', label: '编码' }, { default: () => h('input') })],
+      },
+    })
+    return { wrapper, model }
+  }
+
+  it('必填为空时提交：FormItem 下方显示错误并标红', async () => {
+    const { wrapper } = mountRequiredForm({ code: [{ required: true, message: '请填写编码' }] })
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+    const item = wrapper.findComponent(FormItem)
+    expect(item.classes()).toContain('fms-form-item-error')
+    const help = item.find('.fms-form-item-help-error')
+    expect(help.exists()).toBe(true)
+    expect(help.text()).toBe('请填写编码')
+    expect(wrapper.emitted('submitFailed')).toHaveLength(1)
+  })
+
+  it('message 为函数时按校验时求值（动态文案）', async () => {
+    const { wrapper } = mountRequiredForm({ code: [{ required: true, message: () => '请填写分类编码' }] })
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+    const help = wrapper.findComponent(FormItem).find('.fms-form-item-help-error')
+    expect(help.text()).toBe('请填写分类编码')
+  })
+
+  it('validateAll 暴露并返回带错误的字段列表', async () => {
+    const { wrapper } = mountRequiredForm({ code: [{ required: true, message: '请填写编码' }] })
+    const errors = await wrapper.vm.validateAll()
+    expect(errors).toHaveLength(1)
+    expect(errors[0].name).toBe('code')
+    expect(errors[0].errors).toEqual(['请填写编码'])
+  })
+
+  it('修正必填值后错误清除', async () => {
+    const { wrapper, model } = mountRequiredForm({ code: [{ required: true, message: '请填写编码' }] })
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+    expect(wrapper.findComponent(FormItem).classes()).toContain('fms-form-item-error')
+    model.value.code = 'abc'
+    await nextTick()
+    await flushPromises()
+    const item = wrapper.findComponent(FormItem)
+    expect(item.classes()).not.toContain('fms-form-item-error')
+    expect(item.find('.fms-form-item-help-error').exists()).toBe(false)
+  })
+})

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

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Tree from '@/components/ui/tree/tree.vue'
+
+const treeData = [{ b_id: '1', b_name: '根节点', children: [{ b_id: '2', b_name: '子节点' }] }]
+const fieldNames = { key: 'b_id', title: 'b_name', children: 'children' }
+
+describe('Tree 右键菜单', () => {
+  it('节点右键发出 contextmenu 事件（携带 node 与 key）', async () => {
+    const wrapper = mount(Tree, { props: { treeData, fieldNames } })
+    await wrapper.find('.tree-node-content').trigger('contextmenu')
+    const emitted = wrapper.emitted('contextmenu')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0][0].node.b_id).toBe('1')
+    expect(emitted[0][0].key).toBe('1')
+    expect(emitted[0][0].event).toBeTruthy()
+  })
+
+  it('节点右键不会重复触发树空白处右键逻辑', async () => {
+    const wrapper = mount(Tree, { props: { treeData, fieldNames } })
+    await wrapper.find('.tree-node-content').trigger('contextmenu')
+    expect(wrapper.emitted('contextmenu')).toHaveLength(1)
+  })
+
+  it('空白区域右键发出 contextmenu 事件（node 为 null）', async () => {
+    const wrapper = mount(Tree, { props: { treeData, fieldNames } })
+    await wrapper.find('.tree').trigger('contextmenu')
+    const emitted = wrapper.emitted('contextmenu')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0][0].node).toBeNull()
+    expect(emitted[0][0].key).toBeNull()
+  })
+
+  it('传入 contextMenu 时按节点渲染菜单（Teleport 到 body）并发出 contextMenuClick', async () => {
+    const contextMenu = vi.fn((node) =>
+      node
+        ? [
+            { key: 'add', label: '新增子项' },
+            { divider: true },
+            { key: 'delete', label: '删除', danger: true },
+          ]
+        : [{ key: 'add-root', label: '新增顶级' }],
+    )
+    const wrapper = mount(Tree, { props: { treeData, fieldNames, contextMenu } })
+
+    // 节点右键：渲染节点菜单
+    await wrapper.find('.tree-node-content').trigger('contextmenu')
+    expect(contextMenu).toHaveBeenCalled()
+    expect(contextMenu.mock.calls[0][0].b_id).toBe('1')
+
+    let menu = document.body.querySelector('.tree-context-menu')
+    expect(menu).toBeTruthy()
+    expect(menu.textContent).toContain('新增子项')
+    const divider = menu.querySelector('.tree-context-menu__divider')
+    expect(divider).toBeTruthy()
+
+    menu.querySelector('.tree-context-menu__item').click()
+    expect(wrapper.emitted('contextMenuClick')).toHaveLength(1)
+    expect(wrapper.emitted('contextMenuClick')[0][0].item.key).toBe('add')
+    expect(wrapper.emitted('contextMenuClick')[0][0].node.b_id).toBe('1')
+    // 点击后菜单关闭（等待离开动画结束）
+    await new Promise((r) => setTimeout(r, 150))
+    expect(document.body.querySelector('.tree-context-menu')).toBeNull()
+
+    // 空白右键：渲染顶级菜单
+    await wrapper.find('.tree').trigger('contextmenu')
+    menu = document.body.querySelector('.tree-context-menu')
+    expect(menu.textContent).toContain('新增顶级')
+  })
+
+  it('disabled 菜单项点击不发出 contextMenuClick', async () => {
+    const contextMenu = () => [{ key: 'x', label: '禁用项', disabled: true }]
+    const wrapper = mount(Tree, { props: { treeData, fieldNames, contextMenu } })
+    await wrapper.find('.tree-node-content').trigger('contextmenu')
+    const menu = document.body.querySelector('.tree-context-menu')
+    menu.querySelector('.tree-context-menu__item').click()
+    expect(wrapper.emitted('contextMenuClick')).toBeUndefined()
+  })
+
+  it('点击菜单外部关闭菜单', async () => {
+    const contextMenu = () => [{ key: 'x', label: '项目' }]
+    const wrapper = mount(Tree, { props: { treeData, fieldNames, contextMenu } })
+    await wrapper.find('.tree-node-content').trigger('contextmenu')
+    expect(document.body.querySelector('.tree-context-menu')).toBeTruthy()
+    document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await new Promise((r) => setTimeout(r, 0))
+    expect(document.body.querySelector('.tree-context-menu')).toBeNull()
+    wrapper.unmount()
+  })
+})