20260923165454
This commit is contained in:
oneao committed
1 parent
0abe3706c8
commit
e6935b8fa4
173 files changed
+14975
-2295
No files matched your search
@@ -2,15 +2,16 @@ import { mount } from '@vue/test-utils'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
|
||||
import FmsQueryControl from '@/components/fms-module-list/FmsQueryControl.vue'
|
||||
import FmsQueryToolbar from '@/components/fms-module-list/FmsQueryToolbar.vue'
|
||||
import FmsAdvancedQueryPanel from '@/components/fms-module-list/FmsAdvancedQueryPanel.vue'
|
||||
import FmsQuickFilters from '@/components/fms-module-list/FmsQuickFilters.vue'
|
||||
import FmsKeywordSearch from '@/components/fms-module-list/FmsKeywordSearch.vue'
|
||||
import FmsActiveFilterPills from '@/components/fms-module-list/FmsActiveFilterPills.vue'
|
||||
import FmsField from '@/components/fms-field/FmsField.vue'
|
||||
import { resetUIConfig, setUIConfig } from '@/components/ui'
|
||||
|
||||
/** 构造一个查询条件项（字段 + 配置），供工具栏布局用例复用 */
|
||||
const queryItem = (field) => ({
|
||||
field: { b_field: field, b_type: 'input' },
|
||||
config: { b_operator: 'like', b_component: 'input' },
|
||||
/** 构造一个查询条件项（字段 + 配置），供用例复用 */
|
||||
const queryItem = (field, overrides = {}) => ({
|
||||
field: { b_field: field, b_name: field, b_type: 'input' },
|
||||
config: { b_operator: 'like', b_component: 'input', ...overrides },
|
||||
})
|
||||
|
||||
/** 构造一个区间条件项：字段类型决定两端控件的形态 */
|
||||
@@ -36,24 +37,18 @@ describe('fms-module-list components', () => {
|
||||
expect(wrapper.find('input').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('mounts an empty toolbar without legacy Ant components', () => {
|
||||
const wrapper = mount(FmsQueryToolbar)
|
||||
expect(wrapper.find('.fms-query-toolbar').exists()).toBe(true)
|
||||
expect(wrapper.html()).not.toContain('<a-')
|
||||
})
|
||||
|
||||
it('条件字段用 FormItem 渲染，label 排版跟随全局布局配置', () => {
|
||||
const mountToolbar = () =>
|
||||
mount(FmsQueryToolbar, {
|
||||
it('快捷筛选条件字段用 FormItem 渲染，label 排版跟随全局布局配置', () => {
|
||||
const mountFilters = () =>
|
||||
mount(FmsQuickFilters, {
|
||||
props: {
|
||||
queryItems: [queryItem('b_name')],
|
||||
queryLayout: { area: { b_name: 'quick' }, order: { b_name: 10 } },
|
||||
items: [queryItem('b_name')],
|
||||
modelValue: {},
|
||||
},
|
||||
})
|
||||
|
||||
// 中文（默认）：横排，label 在左
|
||||
const zh = mountToolbar()
|
||||
const item = zh.find('.query-field')
|
||||
const zh = mountFilters()
|
||||
const item = zh.find('.quick-field')
|
||||
expect(item.classes()).toContain('fms-form-item')
|
||||
expect(item.classes()).not.toContain('fms-form-item-vertical')
|
||||
expect(item.find('.fms-form-item-label').text()).toBe('b_name')
|
||||
@@ -63,74 +58,64 @@ describe('fms-module-list components', () => {
|
||||
|
||||
// 切到非中文：竖排，label 在上
|
||||
setUIConfig({ form: { layout: 'vertical' } })
|
||||
const en = mountToolbar()
|
||||
expect(en.find('.query-field').classes()).toContain('fms-form-item-vertical')
|
||||
const en = mountFilters()
|
||||
expect(en.find('.quick-field').classes()).toContain('fms-form-item-vertical')
|
||||
en.unmount()
|
||||
})
|
||||
|
||||
it('查询条件网格列数按条件数收缩（只有一个条件时不占 4 列宽）', () => {
|
||||
const one = mount(FmsQueryToolbar, {
|
||||
props: {
|
||||
queryItems: [queryItem('b_name')],
|
||||
queryLayout: { area: { b_name: 'quick' }, order: { b_name: 10 } },
|
||||
},
|
||||
it('快捷筛选网格列数按条件数收缩（只有一个条件时不占 4 列宽）', () => {
|
||||
const one = mount(FmsQuickFilters, {
|
||||
props: { items: [queryItem('b_name')], modelValue: {} },
|
||||
})
|
||||
expect(one.find('.query-grid').element.style.gridTemplateColumns).toBe(
|
||||
expect(one.find('.quick-grid').element.style.gridTemplateColumns).toBe(
|
||||
'repeat(1, minmax(0, 288px))',
|
||||
)
|
||||
one.unmount()
|
||||
|
||||
const four = mount(FmsQueryToolbar, {
|
||||
const four = mount(FmsQuickFilters, {
|
||||
props: {
|
||||
queryItems: [queryItem('a'), queryItem('b'), queryItem('c'), queryItem('d')],
|
||||
queryLayout: {
|
||||
area: { a: 'quick', b: 'quick', c: 'quick', d: 'quick' },
|
||||
order: {},
|
||||
},
|
||||
items: [queryItem('a'), queryItem('b'), queryItem('c'), queryItem('d')],
|
||||
modelValue: {},
|
||||
},
|
||||
})
|
||||
expect(four.find('.query-grid').element.style.gridTemplateColumns).toBe(
|
||||
expect(four.find('.quick-grid').element.style.gridTemplateColumns).toBe(
|
||||
'repeat(4, minmax(0, 288px))',
|
||||
)
|
||||
four.unmount()
|
||||
})
|
||||
|
||||
it('高级查询行间连接符表达行与行的连接：≥2 项才出现，点击切换后一项的 join', async () => {
|
||||
const state = {
|
||||
nodes: [
|
||||
{ id: 'n1', join: 'and', field: 'name', operator: 'like', value: 'a' },
|
||||
{ id: 'n2', join: 'and', field: 'name', operator: 'like', value: 'b' },
|
||||
],
|
||||
groups: [],
|
||||
}
|
||||
const wrapper = mount(FmsAdvancedQueryPanel, {
|
||||
props: { open: true, items: [], modelValue: state },
|
||||
it('快捷筛选「查询」提交草稿、「重置」交给页面处理', async () => {
|
||||
const wrapper = mount(FmsQuickFilters, {
|
||||
props: { items: [queryItem('b_name')], modelValue: { b_name: 'abc' } },
|
||||
})
|
||||
|
||||
const pill = wrapper.find('.filter-joiner .joiner-pill')
|
||||
expect(pill.exists()).toBe(true)
|
||||
expect(pill.text()).toBe('且')
|
||||
|
||||
await pill.trigger('click')
|
||||
expect(state.nodes[1].join).toBe('or')
|
||||
expect(wrapper.find('.filter-joiner .joiner-pill').text()).toBe('或')
|
||||
await wrapper.find('button[type="button"]').trigger('click')
|
||||
const emitted = wrapper.emitted('search')
|
||||
expect(emitted).toHaveLength(1)
|
||||
await wrapper.findAll('button').find((b) => b.text().includes('重置')).trigger('click')
|
||||
expect(wrapper.emitted('reset')).toHaveLength(1)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('只有 1 个条件时不显示行间连接符（没有连接对象），条件行直接可见', () => {
|
||||
const wrapper = mount(FmsAdvancedQueryPanel, {
|
||||
props: {
|
||||
open: true,
|
||||
items: [],
|
||||
modelValue: {
|
||||
logic: 'and',
|
||||
nodes: [{ id: 'n1', field: 'name', operator: 'like', value: '' }],
|
||||
groups: [],
|
||||
},
|
||||
},
|
||||
it('日期字段开启预设后先选语义区间，选「自定义」才落到两端控件', async () => {
|
||||
const wrapper = mount(FmsQueryControl, {
|
||||
props: { item: rangeQueryItem('date'), modelValue: { preset: 'this_month' }, datePresets: true },
|
||||
})
|
||||
expect(wrapper.find('.filter-joiner').exists()).toBe(false)
|
||||
expect(wrapper.find('.filter-row').exists()).toBe(true)
|
||||
const fields = wrapper.findAllComponents(FmsField)
|
||||
// 预设态：只有一个下拉，没有两端日期
|
||||
expect(fields).toHaveLength(1)
|
||||
const presetField = fields[0]
|
||||
expect(presetField.props('controlProps').options.map((o) => o.value)).toEqual([
|
||||
'today',
|
||||
'this_week',
|
||||
'this_month',
|
||||
'recent_3_months',
|
||||
'custom',
|
||||
])
|
||||
// 切到自定义：值变区间、两端日期控件出现
|
||||
presetField.vm.$emit('update:modelValue', 'custom')
|
||||
expect(wrapper.emitted('update:modelValue').at(-1)[0]).toEqual(['', ''])
|
||||
await wrapper.setProps({ modelValue: ['', ''] })
|
||||
expect(wrapper.findAllComponents(FmsField)).toHaveLength(3)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
@@ -200,4 +185,56 @@ describe('fms-module-list components', () => {
|
||||
expect(wrapper.find('.fms-query-control__separator').exists()).toBe(true)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('关键词：回车立即查询，清空立即查询，防抖自动查询', async () => {
|
||||
vi.useFakeTimers()
|
||||
try {
|
||||
const wrapper = mount(FmsKeywordSearch, {
|
||||
props: { modelValue: '', placeholder: '搜索' },
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
// 输入触发防抖
|
||||
await input.setValue('东方')
|
||||
expect(wrapper.emitted('search')).toBeUndefined()
|
||||
await vi.advanceTimersByTimeAsync(400)
|
||||
expect(wrapper.emitted('search').at(-1)[0]).toBe('东方')
|
||||
// 回车立即查询（不等防抖）
|
||||
await input.setValue('东方国际')
|
||||
await input.trigger('keydown.enter')
|
||||
expect(wrapper.emitted('search').at(-1)[0]).toBe('东方国际')
|
||||
// 清空立即查询
|
||||
await input.setValue('')
|
||||
expect(wrapper.emitted('search').at(-1)[0]).toBe('')
|
||||
wrapper.unmount()
|
||||
} finally {
|
||||
vi.useRealTimers()
|
||||
}
|
||||
})
|
||||
|
||||
it('条件回显：逐条展示并上抛删除与清除全部', async () => {
|
||||
const wrapper = mount(FmsActiveFilterPills, {
|
||||
props: {
|
||||
pills: [
|
||||
{ key: 'keyword', text: '关键词 东方' },
|
||||
{ key: 'quick:b_status', text: '状态 属于 待处理' },
|
||||
],
|
||||
},
|
||||
})
|
||||
const pills = wrapper.findAll('.active-filter-pill')
|
||||
expect(pills).toHaveLength(2)
|
||||
expect(pills[0].text()).toContain('关键词 东方')
|
||||
|
||||
await pills[1].find('.active-filter-pill__remove').trigger('click')
|
||||
expect(wrapper.emitted('remove')[0][0]).toBe('quick:b_status')
|
||||
|
||||
await wrapper.find('.active-filter-clear').trigger('click')
|
||||
expect(wrapper.emitted('clear')).toHaveLength(1)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('无条件时条件回显区不渲染', () => {
|
||||
const wrapper = mount(FmsActiveFilterPills, { props: { pills: [] } })
|
||||
expect(wrapper.find('.fms-active-filters').exists()).toBe(false)
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
Reference in new issue
Block a user