mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 20:18:03 +08:00
612 lines
16 KiB
TypeScript
612 lines
16 KiB
TypeScript
import {fireEvent, render, waitFor} from '@testing-library/react';
|
||
import '../../src';
|
||
import {render as amisRender} from '../../src';
|
||
import {makeEnv, wait} from '../helper';
|
||
|
||
test('EventAction:ajax args', async () => {
|
||
const fetcher = jest.fn().mockImplementation(() =>
|
||
Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
age: 18
|
||
}
|
||
}
|
||
})
|
||
);
|
||
const {getByText, container}: any = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
id: 'page_001',
|
||
data: {
|
||
name: 'lll'
|
||
},
|
||
body: [
|
||
{
|
||
type: 'button',
|
||
label: '发送请求',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
actionType: 'ajax',
|
||
args: {
|
||
api: {
|
||
url: '/api/xxx',
|
||
method: 'get'
|
||
},
|
||
messages: {
|
||
success: '成功了！欧耶',
|
||
failed: '失败了呢。。'
|
||
}
|
||
},
|
||
outputVar: 'result'
|
||
},
|
||
{
|
||
actionType: 'setValue',
|
||
componentId: 'page_001',
|
||
args: {
|
||
value: '${event.data.result.responseData}'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'tpl',
|
||
tpl: '${age}岁的天空'
|
||
},
|
||
{
|
||
type: 'button',
|
||
label: '发送请求2',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
actionType: 'ajax',
|
||
args: {
|
||
api: {
|
||
url: '/api/xxx',
|
||
method: 'get'
|
||
},
|
||
messages: {
|
||
success: '成功了！欧耶',
|
||
failed: '失败了呢。。'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
actionType: 'setValue',
|
||
componentId: 'page_001',
|
||
args: {
|
||
value: '${event.data}'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'tpl',
|
||
tpl: '${responseResult.responseData.age}岁的天空，status:${responseResult.responseStatus}，msg:${responseResult.responseMsg}'
|
||
}
|
||
]
|
||
},
|
||
{},
|
||
makeEnv({
|
||
fetcher
|
||
})
|
||
)
|
||
);
|
||
|
||
fireEvent.click(getByText('发送请求'));
|
||
await waitFor(() => {
|
||
expect(getByText('18岁的天空')).toBeInTheDocument();
|
||
});
|
||
|
||
fireEvent.click(getByText('发送请求2'));
|
||
await waitFor(() => {
|
||
expect(getByText('18岁的天空，status:0，msg:ok')).toBeInTheDocument();
|
||
});
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('EventAction:ajax', async () => {
|
||
const fetcher = jest.fn().mockImplementation(() =>
|
||
Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
age: 18
|
||
}
|
||
}
|
||
})
|
||
);
|
||
const {getByText, container}: any = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
id: 'page_001',
|
||
data: {
|
||
name: 'lll'
|
||
},
|
||
body: [
|
||
{
|
||
type: 'button',
|
||
label: '发送请求',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
actionType: 'ajax',
|
||
api: {
|
||
url: '/api/xxx',
|
||
method: 'get'
|
||
},
|
||
messages: {
|
||
success: '成功了！欧耶',
|
||
failed: '失败了呢。。'
|
||
},
|
||
outputVar: 'result'
|
||
},
|
||
{
|
||
actionType: 'setValue',
|
||
componentId: 'page_001',
|
||
args: {
|
||
value: '${event.data.result.responseData}'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'tpl',
|
||
tpl: '${age}岁的天空'
|
||
},
|
||
{
|
||
type: 'button',
|
||
label: '发送请求2',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
actionType: 'ajax',
|
||
api: {
|
||
url: '/api/xxx',
|
||
method: 'get'
|
||
},
|
||
messages: {
|
||
success: '成功了！欧耶',
|
||
failed: '失败了呢。。'
|
||
}
|
||
},
|
||
{
|
||
actionType: 'setValue',
|
||
componentId: 'page_001',
|
||
args: {
|
||
value: '${event.data}'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'tpl',
|
||
tpl: '${responseResult.responseData.age}岁的天空，status:${responseResult.responseStatus}，msg:${responseResult.responseMsg}'
|
||
}
|
||
]
|
||
},
|
||
{},
|
||
makeEnv({
|
||
fetcher
|
||
})
|
||
)
|
||
);
|
||
|
||
fireEvent.click(getByText('发送请求'));
|
||
await waitFor(() => {
|
||
expect(getByText('18岁的天空')).toBeInTheDocument();
|
||
});
|
||
|
||
fireEvent.click(getByText('发送请求2'));
|
||
await waitFor(() => {
|
||
expect(getByText('18岁的天空，status:0，msg:ok')).toBeInTheDocument();
|
||
});
|
||
expect(container).toMatchSnapshot();
|
||
});
|
||
|
||
test('EventAction:ajax data1', async () => {
|
||
const fetcher = jest.fn().mockImplementation(() =>
|
||
Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
name: 'amis',
|
||
age: 18
|
||
}
|
||
}
|
||
})
|
||
);
|
||
const {getByText, container}: any = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
data: {
|
||
name: 'lll'
|
||
},
|
||
body: [
|
||
{
|
||
type: 'button',
|
||
label: '发送请求',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
actionType: 'ajax',
|
||
args: {
|
||
api: {
|
||
url: '/api/xxx?name=${event.data.name}',
|
||
method: 'post',
|
||
data: {
|
||
myname1: '${name}',
|
||
myname2: '\\${name}',
|
||
myname3: '${text}',
|
||
myname4: '\\${text}'
|
||
}
|
||
}
|
||
},
|
||
outputVar: 'result'
|
||
},
|
||
{
|
||
actionType: 'ajax',
|
||
args: {
|
||
api: {
|
||
url: '/api/xxx?q1=${result.responseData.age}',
|
||
method: 'post',
|
||
data: {
|
||
param1: '${event.data.result.responseData.name}',
|
||
param2: '${responseData.name}',
|
||
param3: '${result.name}',
|
||
param4: '${event.data.responseData.name}'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
data: {
|
||
text: '${lll}'
|
||
}
|
||
},
|
||
makeEnv({
|
||
fetcher
|
||
})
|
||
)
|
||
);
|
||
|
||
await waitFor(() => {
|
||
expect(getByText('发送请求')).toBeInTheDocument();
|
||
});
|
||
|
||
fireEvent.click(getByText(/发送请求/));
|
||
|
||
await waitFor(() => {
|
||
expect(fetcher).toHaveBeenCalledTimes(2);
|
||
expect(fetcher.mock.calls[0][0].url).toEqual('/api/xxx?name=lll');
|
||
expect(fetcher.mock.calls[0][0].data).toMatchObject({
|
||
myname1: 'lll',
|
||
myname2: '${name}',
|
||
myname3: '${lll}',
|
||
myname4: '${text}'
|
||
});
|
||
expect(fetcher.mock.calls[1][0].url).toEqual('/api/xxx?q1=18');
|
||
expect(fetcher.mock.calls[1][0].data).toMatchObject({
|
||
param1: 'amis',
|
||
param2: 'amis',
|
||
param3: 'amis',
|
||
param4: 'amis'
|
||
});
|
||
});
|
||
});
|
||
|
||
test('EventAction:ajax data2', async () => {
|
||
const fetcher = jest.fn().mockImplementation(() =>
|
||
Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
name: 'amis',
|
||
age: 18
|
||
}
|
||
}
|
||
})
|
||
);
|
||
const {getByText, container}: any = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
data: {
|
||
name: 'lll'
|
||
},
|
||
body: [
|
||
{
|
||
type: 'button',
|
||
label: '发送请求',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
actionType: 'ajax',
|
||
api: {
|
||
url: '/api/xxx?name=${event.data.name}',
|
||
method: 'post',
|
||
data: {
|
||
myname1: '${name}',
|
||
myname2: '\\${name}',
|
||
myname3: '${text}',
|
||
myname4: '\\${text}'
|
||
}
|
||
},
|
||
outputVar: 'result'
|
||
},
|
||
{
|
||
actionType: 'ajax',
|
||
api: {
|
||
url: '/api/xxx?q1=${result.responseData.age}',
|
||
method: 'post',
|
||
data: {
|
||
param1: '${event.data.result.responseData.name}',
|
||
param2: '${responseData.name}',
|
||
param3: '${result.name}',
|
||
param4: '${event.data.responseData.name}'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
data: {
|
||
text: '${lll}'
|
||
}
|
||
},
|
||
makeEnv({
|
||
fetcher
|
||
})
|
||
)
|
||
);
|
||
|
||
await waitFor(() => {
|
||
expect(getByText('发送请求')).toBeInTheDocument();
|
||
});
|
||
|
||
fireEvent.click(getByText(/发送请求/));
|
||
|
||
await waitFor(() => {
|
||
expect(fetcher).toHaveBeenCalledTimes(2);
|
||
expect(fetcher.mock.calls[0][0].url).toEqual('/api/xxx?name=lll');
|
||
expect(fetcher.mock.calls[0][0].data).toMatchObject({
|
||
myname1: 'lll',
|
||
myname2: '${name}',
|
||
myname3: '${lll}',
|
||
myname4: '${text}'
|
||
});
|
||
expect(fetcher.mock.calls[1][0].url).toEqual('/api/xxx?q1=18');
|
||
expect(fetcher.mock.calls[1][0].data).toMatchObject({
|
||
param1: 'amis',
|
||
param2: 'amis',
|
||
param3: 'amis',
|
||
param4: 'amis'
|
||
});
|
||
});
|
||
});
|
||
|
||
test('EventAction:ajax data3', async () => {
|
||
const fetcher = jest.fn().mockImplementation(() =>
|
||
Promise.resolve({
|
||
data: {
|
||
status: 0,
|
||
msg: 'ok',
|
||
data: {
|
||
name: 'amis',
|
||
age: 18
|
||
}
|
||
}
|
||
})
|
||
);
|
||
const {getByText, container}: any = render(
|
||
amisRender(
|
||
{
|
||
type: 'page',
|
||
body: [
|
||
{
|
||
type: 'button',
|
||
label: '表单外的校验按钮',
|
||
className: 'mb-2',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
componentId: 'form_validate',
|
||
outputVar: 'validateResult',
|
||
actionType: 'validate'
|
||
},
|
||
{
|
||
outputVar: 'responseResult',
|
||
actionType: 'ajax',
|
||
api: {
|
||
method: 'post',
|
||
url: '/api/xxx1',
|
||
data: {
|
||
name: '${name}',
|
||
email: '${email}'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'form',
|
||
id: 'form_validate',
|
||
data: {
|
||
name: 'amis',
|
||
email: 'amis@baidu.com'
|
||
},
|
||
body: [
|
||
{
|
||
type: 'input-text',
|
||
name: 'name',
|
||
label: '姓名：',
|
||
required: true
|
||
},
|
||
{
|
||
name: 'email',
|
||
type: 'input-text',
|
||
label: '邮箱：',
|
||
required: true,
|
||
validations: {
|
||
isEmail: true
|
||
}
|
||
}
|
||
],
|
||
actions: [
|
||
{
|
||
type: 'button',
|
||
label: '表单内的校验按钮',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
componentId: 'form_validate',
|
||
outputVar: 'validateResult',
|
||
actionType: 'validate'
|
||
},
|
||
{
|
||
outputVar: 'responseResult',
|
||
actionType: 'ajax',
|
||
api: {
|
||
method: 'post',
|
||
url: '/api/xxx2',
|
||
data: {
|
||
name: '${name}',
|
||
email: '${email}'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'button',
|
||
label: '无data',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
componentId: 'form_validate',
|
||
outputVar: 'validateResult',
|
||
actionType: 'validate'
|
||
},
|
||
{
|
||
outputVar: 'responseResult',
|
||
actionType: 'ajax',
|
||
api: {
|
||
method: 'post',
|
||
url: '/api/xxx3'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'button',
|
||
label: '字符串api无参数',
|
||
level: 'primary',
|
||
onEvent: {
|
||
click: {
|
||
actions: [
|
||
{
|
||
componentId: 'form_validate',
|
||
outputVar: 'validateResult',
|
||
actionType: 'validate'
|
||
},
|
||
{
|
||
outputVar: 'responseResult',
|
||
actionType: 'ajax',
|
||
api: 'post:/api/xxx4'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{},
|
||
makeEnv({
|
||
fetcher
|
||
})
|
||
)
|
||
);
|
||
|
||
await waitFor(() => {
|
||
expect(getByText('表单外的校验按钮')).toBeInTheDocument();
|
||
expect(getByText('表单内的校验按钮')).toBeInTheDocument();
|
||
expect(getByText('无data')).toBeInTheDocument();
|
||
expect(getByText('字符串api无参数')).toBeInTheDocument();
|
||
});
|
||
|
||
fireEvent.click(getByText(/表单外的校验按钮/));
|
||
fireEvent.click(getByText(/表单内的校验按钮/));
|
||
fireEvent.click(getByText(/无data/));
|
||
fireEvent.click(getByText(/字符串api无参数/));
|
||
|
||
await waitFor(() => {
|
||
expect(fetcher).toHaveBeenCalledTimes(4);
|
||
expect(fetcher.mock.calls[0][0].url).toEqual('/api/xxx1');
|
||
expect(fetcher.mock.calls[0][0].data).toMatchObject({
|
||
name: '',
|
||
email: ''
|
||
});
|
||
expect(fetcher.mock.calls[1][0].url).toEqual('/api/xxx2');
|
||
expect(fetcher.mock.calls[1][0].data).toMatchObject({
|
||
name: 'amis',
|
||
email: 'amis@baidu.com'
|
||
});
|
||
expect(fetcher.mock.calls[2][0].url).toEqual('/api/xxx3');
|
||
expect(fetcher.mock.calls[2][0].data).toMatchObject({});
|
||
expect(fetcher.mock.calls[3][0].url).toEqual('/api/xxx4');
|
||
expect(fetcher.mock.calls[3][0].data).toMatchObject({});
|
||
});
|
||
});
|