fix: 修复前端登录体验和API调用问题
- 修复路由守卫：未登录时直接跳转，不显示提示信息 - 修复API拦截器：401错误直接跳转，无需确认 - 移除不必要的ElMessageBox确认框 - 优化Token过期处理逻辑 - 修复文件管理API引入路径和URL前缀 - 修复调拨/回收管理API端点不匹配问题 - 修复通知管理API方法不匹配问题 - 统一系统配置API路径为单数形式 影响文件： - src/router/index.ts - src/api/request.ts - src/api/file.ts - src/api/index.ts 测试状态： - 前端构建通过 - 所有API路径已验证 - 登录流程测试通过 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude
823
tests/unit/components/form/DynamicFieldRenderer.test.ts
Normal file
823
tests/unit/components/form/DynamicFieldRenderer.test.ts
Normal file
@@ -0,0 +1,823 @@
|
||||
/**
|
||||
* DynamicFieldRenderer 组件测试
|
||||
*
|
||||
* 测试范围:
|
||||
* - 基础渲染 (10+用例)
|
||||
* - 不同字段类型渲染 (15+用例)
|
||||
* - 数据绑定 (10+用例)
|
||||
* - 验证功能 (10+用例)
|
||||
* - 依赖处理 (5+用例)
|
||||
*
|
||||
* 总计: 40+ 用例
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount, VueWrapper } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
import DynamicFieldRenderer from '@/components/form/DynamicFieldRenderer.vue'
|
||||
import { FieldConfig, FieldType } from '@/types/form'
|
||||
|
||||
describe('DynamicFieldRenderer 组件测试', () => {
|
||||
// 测试数据
|
||||
const mockFieldConfig: FieldConfig = {
|
||||
field_id: 'test_field_1',
|
||||
field_name: '测试字段',
|
||||
field_type: FieldType.TEXT,
|
||||
is_required: true,
|
||||
placeholder: '请输入测试字段',
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'length',
|
||||
rule_value: { min: 1, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const mockModelValue = ref('')
|
||||
|
||||
// 基础渲染测试 (10+用例)
|
||||
describe('基础渲染', () => {
|
||||
it('应该正确渲染组件', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: mockModelValue.value
|
||||
}
|
||||
})
|
||||
expect(wrapper.exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该显示字段标签', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.text()).toContain('测试字段')
|
||||
})
|
||||
|
||||
it('应该显示必填标记', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.required-mark').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('不应该显示非必填字段的必填标记', () => {
|
||||
const config = { ...mockFieldConfig, is_required: false }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.required-mark').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('应该显示字段提示信息', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
help_text: '这是字段的帮助文本'
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.text()).toContain('这是字段的帮助文本')
|
||||
})
|
||||
|
||||
it('应该应用自定义CSS类', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: '',
|
||||
customClass: 'custom-field-class'
|
||||
}
|
||||
})
|
||||
expect(wrapper.classes()).toContain('custom-field-class')
|
||||
})
|
||||
|
||||
it('应该显示字段描述', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
description: '字段详细描述'
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.text()).toContain('字段详细描述')
|
||||
})
|
||||
|
||||
it('应该在禁用状态下渲染', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: '',
|
||||
disabled: true
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
expect(input.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('应该在只读状态下渲染', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test value',
|
||||
readonly: true
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
expect(input.attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('应该响应字段配置变化', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.setProps({
|
||||
fieldConfig: {
|
||||
...mockFieldConfig,
|
||||
field_name: '更新后的字段名'
|
||||
}
|
||||
})
|
||||
|
||||
await nextTick()
|
||||
expect(wrapper.text()).toContain('更新后的字段名')
|
||||
})
|
||||
})
|
||||
|
||||
// 不同字段类型渲染测试 (15+用例)
|
||||
describe('不同字段类型渲染', () => {
|
||||
it('应该渲染文本输入框', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.TEXT }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('input[type="text"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染数字输入框', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.NUMBER }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 0
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('input[type="number"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染日期选择器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.DATE }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.date-picker').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染下拉选择框', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.SELECT,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('select').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染多选框', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.MULTI_SELECT,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.multi-select').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染单选框组', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.RADIO,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.radio-group').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染复选框', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.CHECKBOX }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: false
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染文本域', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.TEXTAREA }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('textarea').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染富文本编辑器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.RICH_TEXT }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.rich-text-editor').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染文件上传组件', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.FILE_UPLOAD }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.file-upload').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染日期时间选择器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.DATETIME }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.datetime-picker').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染时间选择器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.TIME }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.time-picker').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染滑块', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.SLIDER,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'range',
|
||||
rule_value: { min: 0, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 50
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.slider').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染开关', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.SWITCH }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: false
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.switch').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染级联选择器', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.CASCADER,
|
||||
options: [
|
||||
{
|
||||
label: '级别1',
|
||||
value: '1',
|
||||
children: [
|
||||
{ label: '级别2-1', value: '1-1' },
|
||||
{ label: '级别2-2', value: '1-2' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.cascader').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
// 数据绑定测试 (10+用例)
|
||||
describe('数据绑定', () => {
|
||||
it('应该正确绑定modelValue', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'initial value'
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('initial value')
|
||||
})
|
||||
|
||||
it('应该在输入时触发update:modelValue事件', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
await input.setValue('new value')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value'])
|
||||
})
|
||||
|
||||
it('应该响应modelValue的变化', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'initial'
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.setProps({ modelValue: 'updated' })
|
||||
await nextTick()
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('updated')
|
||||
})
|
||||
|
||||
it('应该正确处理数字类型的值', async () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.NUMBER }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 0
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
await input.setValue('123')
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([123])
|
||||
})
|
||||
|
||||
it('应该正确处理布尔类型的值', async () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.CHECKBOX }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: false
|
||||
}
|
||||
})
|
||||
|
||||
const checkbox = wrapper.find('input[type="checkbox"]')
|
||||
await checkbox.setChecked()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([true])
|
||||
})
|
||||
|
||||
it('应该正确处理数组类型的值', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.MULTI_SELECT,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
|
||||
// 模拟选择操作
|
||||
wrapper.vm.handleSelect('option1')
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('应该正确处理日期类型的值', async () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.DATE }
|
||||
const dateValue = '2025-01-24'
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.vm.handleDateChange(dateValue)
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([dateValue])
|
||||
})
|
||||
|
||||
it('应该在清空时触发正确的事件', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test'
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.clearValue()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([''])
|
||||
})
|
||||
|
||||
it('应该正确处理空值', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: null
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('')
|
||||
})
|
||||
|
||||
it('应该正确处理未定义的值', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: undefined
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
// 验证功能测试 (10+用例)
|
||||
describe('验证功能', () => {
|
||||
it('应该验证必填字段', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该通过必填字段的验证', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test value'
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(true)
|
||||
})
|
||||
|
||||
it('应该验证最小长度', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'length',
|
||||
rule_value: { min: 5, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 'abc'
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该验证最大长度', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'length',
|
||||
rule_value: { min: 1, max: 10 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 'a'.repeat(20)
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该验证数字范围', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.NUMBER,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'range',
|
||||
rule_value: { min: 1, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 150
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该验证正则表达式', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'regex',
|
||||
rule_value: '^[A-Z0-9]+$'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 'invalid-value'
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该显示验证错误信息', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.validate()
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('.error-message').exists()).toBe(true)
|
||||
expect(wrapper.text()).toContain('必填')
|
||||
})
|
||||
|
||||
it('应该支持自定义验证规则', async () => {
|
||||
const customValidator = vi.fn().mockResolvedValue(false)
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test',
|
||||
customValidator
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(customValidator).toHaveBeenCalled()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该在值变化时触发验证', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: '',
|
||||
validateOnBlur: true
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
await input.trigger('blur')
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.vm.error).toBeTruthy()
|
||||
})
|
||||
|
||||
it('应该清除验证错误', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.validate()
|
||||
expect(wrapper.vm.error).toBeTruthy()
|
||||
|
||||
await wrapper.vm.clearError()
|
||||
expect(wrapper.vm.error).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
// 依赖处理测试 (5+用例)
|
||||
describe('依赖处理', () => {
|
||||
it('应该根据依赖条件显示/隐藏字段', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'equals',
|
||||
value: 'show'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'hide' }
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(false)
|
||||
|
||||
await wrapper.setProps({
|
||||
formData: { parent_field: 'show' }
|
||||
})
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(true)
|
||||
})
|
||||
|
||||
it('应该根据依赖条件启用/禁用字段', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'equals',
|
||||
value: 'enable',
|
||||
action: 'disable'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'disable' }
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('应该根据依赖条件更新字段值', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'equals',
|
||||
value: 'auto',
|
||||
action: 'set_value',
|
||||
target_value: 'automatic value'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'auto' }
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.handleDependencies()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual(['automatic value'])
|
||||
})
|
||||
|
||||
it('应该支持多个依赖条件', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'field1',
|
||||
condition: 'equals',
|
||||
value: 'value1'
|
||||
},
|
||||
{
|
||||
field_id: 'field2',
|
||||
condition: 'equals',
|
||||
value: 'value2',
|
||||
operator: 'AND'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { field1: 'value1', field2: 'value2' }
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(true)
|
||||
})
|
||||
|
||||
it('应该处理复杂的依赖逻辑', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'in',
|
||||
value: ['option1', 'option2', 'option3']
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'option2' }
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(true)
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user