mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 12:29:24 +08:00
fix: 修复 mapping 结合其他组件兜底显示时取值错误 Close: #9613
This commit is contained in:
2betop
parent
85995ded15
commit
2f92d68d79
@ -1,27 +1,23 @@
|
||||
import {render} from '@testing-library/react';
|
||||
import '../../src';
|
||||
import {render as amisRender} from '../../src';
|
||||
import {makeEnv} from '../helper';
|
||||
import {makeEnv, wait} from '../helper';
|
||||
|
||||
const tag = (label: string) => render(
|
||||
amisRender(
|
||||
{type: 'tag', label},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
).container;
|
||||
const tag = (label: string) =>
|
||||
render(amisRender({type: 'tag', label}, {}, makeEnv({}))).container;
|
||||
|
||||
test('Renderer:mapping width object map', async () => {
|
||||
const setup = (value?: any) => render(
|
||||
const setup = (value?: any) =>
|
||||
render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'mapping',
|
||||
map: {
|
||||
1: "漂亮",
|
||||
2: "开心",
|
||||
3: "惊吓",
|
||||
4: "紧张",
|
||||
'*': '其他',
|
||||
1: '漂亮',
|
||||
2: '开心',
|
||||
3: '惊吓',
|
||||
4: '紧张',
|
||||
'*': '其他'
|
||||
},
|
||||
...(value !== undefined ? {value} : {})
|
||||
},
|
||||
@ -30,26 +26,33 @@ test('Renderer:mapping width object map', async () => {
|
||||
)
|
||||
).container;
|
||||
|
||||
const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
|
||||
const noValue = setup().querySelector(
|
||||
'.cxd-MappingField .text-muted'
|
||||
)! as HTMLElement;
|
||||
expect(noValue.innerHTML).toBe('-');
|
||||
|
||||
const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
|
||||
const value1 = setup(1).querySelector(
|
||||
'.cxd-MappingField .cxd-TplField span'
|
||||
)! as HTMLElement;
|
||||
expect(value1.innerHTML).toBe('漂亮');
|
||||
|
||||
const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
|
||||
const value5 = setup(5).querySelector(
|
||||
'.cxd-MappingField .cxd-TplField span'
|
||||
)! as HTMLElement;
|
||||
expect(value5.innerHTML).toBe('其他');
|
||||
});
|
||||
|
||||
test('Renderer:mapping width array map', async () => {
|
||||
const setup = (value?: any) => render(
|
||||
const setup = (value?: any) =>
|
||||
render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'mapping',
|
||||
map: [
|
||||
{1: "漂亮"},
|
||||
{2: "开心"},
|
||||
{3: "惊吓"},
|
||||
{4: "紧张"},
|
||||
{1: '漂亮'},
|
||||
{2: '开心'},
|
||||
{3: '惊吓'},
|
||||
{4: '紧张'},
|
||||
{'*': '其他'}
|
||||
],
|
||||
...(value !== undefined ? {value} : {})
|
||||
@ -59,18 +62,25 @@ test('Renderer:mapping width array map', async () => {
|
||||
)
|
||||
).container;
|
||||
|
||||
const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
|
||||
const noValue = setup().querySelector(
|
||||
'.cxd-MappingField .text-muted'
|
||||
)! as HTMLElement;
|
||||
expect(noValue.innerHTML).toBe('-');
|
||||
|
||||
const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
|
||||
const value1 = setup(1).querySelector(
|
||||
'.cxd-MappingField .cxd-TplField span'
|
||||
)! as HTMLElement;
|
||||
expect(value1.innerHTML).toBe('漂亮');
|
||||
|
||||
const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
|
||||
const value5 = setup(5).querySelector(
|
||||
'.cxd-MappingField .cxd-TplField span'
|
||||
)! as HTMLElement;
|
||||
expect(value5.innerHTML).toBe('其他');
|
||||
});
|
||||
|
||||
test('Renderer:mapping attr: valueField and labelField', async () => {
|
||||
const setup = (value?: any) => render(
|
||||
const setup = (value?: any) =>
|
||||
render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'mapping',
|
||||
@ -97,26 +107,33 @@ test('Renderer:mapping attr: valueField and labelField', async () => {
|
||||
)
|
||||
).container;
|
||||
|
||||
const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
|
||||
const noValue = setup().querySelector(
|
||||
'.cxd-MappingField .text-muted'
|
||||
)! as HTMLElement;
|
||||
expect(noValue.innerHTML).toBe('-');
|
||||
|
||||
const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
|
||||
const value1 = setup(1).querySelector(
|
||||
'.cxd-MappingField .cxd-TplField span'
|
||||
)! as HTMLElement;
|
||||
expect(value1.innerHTML).toBe('漂亮');
|
||||
|
||||
const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
|
||||
const value5 = setup(5).querySelector(
|
||||
'.cxd-MappingField .cxd-TplField span'
|
||||
)! as HTMLElement;
|
||||
expect(value5.innerHTML).toBe('其他');
|
||||
});
|
||||
|
||||
test('Renderer:mapping attr: itemSchema when simple map', async () => {
|
||||
const setup = (value?: any) => render(
|
||||
const setup = (value?: any) =>
|
||||
render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'mapping',
|
||||
map: [
|
||||
{1: "漂亮"},
|
||||
{2: "开心"},
|
||||
{3: "惊吓"},
|
||||
{4: "紧张"},
|
||||
{1: '漂亮'},
|
||||
{2: '开心'},
|
||||
{3: '惊吓'},
|
||||
{4: '紧张'},
|
||||
{'*': '其他'}
|
||||
],
|
||||
valueField: 'name',
|
||||
@ -131,7 +148,9 @@ test('Renderer:mapping attr: itemSchema when simple map', async () => {
|
||||
)
|
||||
).container;
|
||||
|
||||
const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
|
||||
const noValue = setup().querySelector(
|
||||
'.cxd-MappingField .text-muted'
|
||||
)! as HTMLElement;
|
||||
expect(noValue.innerHTML).toBe('-');
|
||||
|
||||
const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
|
||||
@ -142,7 +161,8 @@ test('Renderer:mapping attr: itemSchema when simple map', async () => {
|
||||
});
|
||||
|
||||
test('Renderer:mapping attr: itemSchema when normal map', async () => {
|
||||
const setup = (value?: any) => render(
|
||||
const setup = (value?: any) =>
|
||||
render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'mapping',
|
||||
@ -172,7 +192,9 @@ test('Renderer:mapping attr: itemSchema when normal map', async () => {
|
||||
)
|
||||
).container;
|
||||
|
||||
const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
|
||||
const noValue = setup().querySelector(
|
||||
'.cxd-MappingField .text-muted'
|
||||
)! as HTMLElement;
|
||||
expect(noValue.innerHTML).toBe('-');
|
||||
|
||||
const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
|
||||
@ -204,7 +226,8 @@ test('Renderer:mapping', async () => {
|
||||
});
|
||||
|
||||
test('Renderer:mapping html', async () => {
|
||||
const setup = (value?: any) => render(
|
||||
const setup = (value?: any) =>
|
||||
render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'mapping',
|
||||
@ -228,7 +251,8 @@ test('Renderer:mapping html', async () => {
|
||||
});
|
||||
|
||||
test('Renderer:mapping schema', async () => {
|
||||
const setup = (value?: any) => render(
|
||||
const setup = (value?: any) =>
|
||||
render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'mapping',
|
||||
@ -246,7 +270,9 @@ test('Renderer:mapping schema', async () => {
|
||||
)
|
||||
).container;
|
||||
|
||||
const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
|
||||
const noValue = setup().querySelector(
|
||||
'.cxd-MappingField .text-muted'
|
||||
)! as HTMLElement;
|
||||
expect(noValue.innerHTML).toBe('-');
|
||||
|
||||
const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
|
||||
@ -255,3 +281,68 @@ test('Renderer:mapping schema', async () => {
|
||||
const value5 = setup(5).querySelector('.cxd-MappingField')! as HTMLElement;
|
||||
expect(value5.innerHTML).toBe(tag('其他').innerHTML);
|
||||
});
|
||||
|
||||
// 对应 issue https://github.com/baidu/amis/issues/9613
|
||||
test('Renderer:mapping schema status', async () => {
|
||||
const {container, getByText} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
status: 1,
|
||||
id: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'table',
|
||||
title: '表格',
|
||||
columns: [
|
||||
{
|
||||
name: 'id',
|
||||
label: 'ID'
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
label: '状态2',
|
||||
type: 'mapping',
|
||||
map: {
|
||||
'*': {
|
||||
type: 'status',
|
||||
map: {
|
||||
'0': 'schedule',
|
||||
'1': 'rolling',
|
||||
'2': 'success',
|
||||
'3': 'fail',
|
||||
'4': 'warning'
|
||||
},
|
||||
labelMap: {
|
||||
'2': '任务成功',
|
||||
'1': '处理中',
|
||||
'3': '异常终止',
|
||||
'0': '等待中',
|
||||
'4': '已过期'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await wait(200);
|
||||
|
||||
expect(
|
||||
[].slice
|
||||
.call(container.querySelectorAll('tbody td'))
|
||||
.map((td: any) => td.textContent)
|
||||
).toEqual(['1', '处理中']);
|
||||
});
|
||||
|
||||
@ -253,7 +253,7 @@ export const MappingField = withStore(props =>
|
||||
}
|
||||
|
||||
renderViewValue(value: any) {
|
||||
const {render, itemSchema, data, labelField} = this.props;
|
||||
const {render, itemSchema, data, labelField, name} = this.props;
|
||||
|
||||
if (!itemSchema) {
|
||||
let label = value;
|
||||
@ -265,6 +265,12 @@ export const MappingField = withStore(props =>
|
||||
// object 也没有 type，不能作为schema渲染
|
||||
// 默认取 label 字段
|
||||
label = value['label'];
|
||||
} else {
|
||||
// 不会下发 value 了，所以要把 name 下发一下
|
||||
label = {
|
||||
name,
|
||||
...label
|
||||
};
|
||||
}
|
||||
} else {
|
||||
label = value[labelField || 'label'];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user