workspace/code/fms/fms-vue/tests/unit/module-fields-panel-participation.spec.js

/**
 * 字段定义面板参与勾选接线测试：
 * - 虚拟字段 __form/__list/__query 由配置草稿物化（内置 checkbox 的勾选态）
 * - change 事件按列路由：参与列 → updateXxxConfig（携带 toggle 后的配置），普通列 → update（字段）
 * - update 事件剥离 __ 虚拟字段，不污染字段草稿
 */
import { mount } from '@vue/test-utils'
import { beforeAll, describe, expect, it, vi } from 'vitest'
import { createPinia, setActivePinia } from 'pinia'
import { nextTick } from 'vue'
import { registerFeature, useAreaSelection } from 'stk-table-vue'
import ModuleFieldsPanel from '@/views/system/module-management/components/ModuleFieldsPanel.vue'

// 与 main.js 一致：注册 stk-table 的按需 feature
registerFeature(useAreaSelection)

// jsdom 无布局，容器 clientWidth 为 0 时 StkTable 走默认宽度并启用虚拟列裁剪，
// 只渲染首列——patch 成宽容器让全部列（含参与勾选列）真实渲染
beforeAll(() => {
  Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
    configurable: true,
    get() {
      return 5000
    },
  })
})

vi.mock('@/services/api', () => ({
  loadDataApi: vi.fn(),
  saveObjectApi: vi.fn(),
  nextIdApi: vi.fn(),
  describeApi: vi.fn(),
}))

const fields = [
  { b_id: '10', b_field: 'amount', b_name: '金额', b_type: 'money', b_canuse: 1, b_i18n: null },
  { b_id: '11', b_field: 'remark', b_name: '备注', b_type: 'textarea', b_canuse: 1, b_i18n: null },
]

const listConfig = [
  { b_id: 'v1', b_field_id: '10', b_visible: 1 },
  { b_id: 'v2', b_field_id: '11', b_visible: 0 }, // 大文本默认隐藏
]
const editConfig = [{ b_id: 'e1', b_field_id: '10', b_visible: 1 }]
const queryConfig = [] // 均未生成查询行

// 行内 checkbox 顺序 = 参与三列 + 启用列（普通编辑列不渲染 checkbox）
const FORM = 0
const LIST = 1
const QUERY = 2

function mountPanel(props = {}) {
  return mount(ModuleFieldsPanel, {
    props: {
      moduleId: 'm1',
      moduleCode: 'demo',
      fields: fields.map((f) => ({ ...f })),
      editConfig: editConfig.map((r) => ({ ...r })),
      listConfig: listConfig.map((r) => ({ ...r })),
      queryConfig: queryConfig.map((r) => ({ ...r })),
      moduleType: 'data',
      loading: false,
      ...props,
    },
    attachTo: document.body,
  })
}

async function settle() {
  await nextTick()
  await new Promise((r) => setTimeout(r, 100))
}

function rowCheckboxes(wrapper, rowIndex) {
  return wrapper.findAll('.stk-tbody-main tr')[rowIndex].findAll('input[type="checkbox"]')
}

describe('ModuleFieldsPanel 参与勾选', () => {
  it('虚拟字段按配置草稿物化：amount 表单/列表参与、查询未配置', async () => {
    setActivePinia(createPinia())
    const wrapper = mountPanel()
    await settle()
    const boxes = rowCheckboxes(wrapper, 0)
    expect(boxes.length).toBe(4) // __form / __list / __query / b_canuse
    expect(boxes[FORM].element.checked).toBe(true)
    expect(boxes[LIST].element.checked).toBe(true)
    expect(boxes[QUERY].element.checked).toBe(false)
    wrapper.unmount()
  })

  it('勾选查询列 → emit updateQueryConfig，生成默认查询行（b_canuse=1）', async () => {
    setActivePinia(createPinia())
    const wrapper = mountPanel()
    await settle()
    await rowCheckboxes(wrapper, 0)[QUERY].setValue(true)
    const events = wrapper.emitted('updateQueryConfig')
    expect(events).toHaveLength(1)
    const rows = events[0][0]
    expect(rows).toHaveLength(1)
    expect(rows[0].b_field_id).toBe('10')
    expect(rows[0].b_canuse).toBe(1)
    expect(rows[0].b_component).toBe('number')
    wrapper.unmount()
  })

  it('普通列 change → emit update，且剥离 __ 虚拟字段', async () => {
    setActivePinia(createPinia())
    const wrapper = mountPanel()
    await settle()
    const table = wrapper.findComponent({ name: 'FmsTable' })
    table.vm.$emit(
      'change',
      { ...fields[0], __form: 1, __list: 1, __query: 0 },
      { dataIndex: 'b_name' },
      '新名称',
    )
    await nextTick()
    const events = wrapper.emitted('update')
    expect(events).toBeTruthy()
    const emitted = events.at(-1)[0]
    expect(emitted[0].b_id).toBe('10')
    expect('__form' in emitted[0]).toBe(false)
    expect('__list' in emitted[0]).toBe(false)
    expect('__query' in emitted[0]).toBe(false)
    wrapper.unmount()
  })
})