2021-06-03 12:36:43 +08:00
|
|
|
import React = require('react');
|
2022-04-07 14:00:31 +08:00
|
|
|
import {render, cleanup, fireEvent, waitFor} from '@testing-library/react';
|
2022-06-02 10:00:09 +08:00
|
|
|
import '../../../src';
|
|
|
|
import {render as amisRender} from '../../../src';
|
2021-06-03 12:36:43 +08:00
|
|
|
import {makeEnv, wait} from '../../helper';
|
2022-06-02 13:28:23 +08:00
|
|
|
import {clearStoresCache} from '../../../src';
|
2021-06-03 12:36:43 +08:00
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
cleanup();
|
|
|
|
clearStoresCache();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('Form:initData', async () => {
|
|
|
|
const onSubmit = jest.fn();
|
|
|
|
const {container, getByText} = render(
|
|
|
|
amisRender(
|
|
|
|
{
|
|
|
|
type: 'form',
|
|
|
|
title: 'The form',
|
|
|
|
wrapWithPanel: false,
|
|
|
|
body: [
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'a',
|
|
|
|
value: '1'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'b',
|
|
|
|
value: '2'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'submit',
|
|
|
|
label: 'Submit'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
onSubmit
|
|
|
|
},
|
|
|
|
makeEnv()
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(() => {
|
|
|
|
expect(
|
|
|
|
container.querySelector('[name="a"][value="1"]')
|
|
|
|
).toBeInTheDocument();
|
|
|
|
});
|
2021-06-03 12:36:43 +08:00
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
|
|
|
|
fireEvent.click(getByText(/Submit/));
|
|
|
|
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(() => {
|
|
|
|
expect(onSubmit).toBeCalled();
|
|
|
|
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
|
|
|
});
|
2021-06-03 12:36:43 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
test('Form:initData:super', async () => {
|
|
|
|
const onSubmit = jest.fn();
|
|
|
|
const {container, getByText} = render(
|
|
|
|
amisRender(
|
|
|
|
{
|
|
|
|
type: 'page',
|
|
|
|
data: {
|
|
|
|
a: 1,
|
|
|
|
b: 2
|
|
|
|
},
|
|
|
|
body: {
|
|
|
|
type: 'form',
|
|
|
|
title: 'The form',
|
|
|
|
wrapWithPanel: false,
|
|
|
|
onSubmit,
|
|
|
|
body: [
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'a'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'b'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'submit',
|
|
|
|
label: 'Submit'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{},
|
|
|
|
makeEnv()
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
|
|
|
|
fireEvent.click(getByText(/Submit/));
|
|
|
|
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(() => {
|
|
|
|
expect(onSubmit).toBeCalled();
|
2022-09-27 10:20:24 +08:00
|
|
|
expect(onSubmit.mock.calls[0][0]).toMatchInlineSnapshot(`
|
|
|
|
{
|
|
|
|
"a": 1,
|
|
|
|
"b": 2,
|
|
|
|
}
|
|
|
|
`);
|
2022-04-12 14:22:39 +08:00
|
|
|
});
|
2021-06-03 12:36:43 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
test('Form:initData:without-super', async () => {
|
|
|
|
const onSubmit = jest.fn();
|
|
|
|
const {container, getByText} = render(
|
|
|
|
amisRender(
|
|
|
|
{
|
|
|
|
type: 'page',
|
|
|
|
data: {
|
|
|
|
a: 1,
|
|
|
|
b: 2
|
|
|
|
},
|
|
|
|
body: {
|
|
|
|
type: 'form',
|
|
|
|
title: 'The form',
|
|
|
|
wrapWithPanel: false,
|
|
|
|
onSubmit,
|
|
|
|
canAccessSuperData: false,
|
|
|
|
body: [
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'a'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'input-text',
|
|
|
|
name: 'b'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'submit',
|
|
|
|
label: 'Submit'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{},
|
|
|
|
makeEnv()
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
// 这个应该是不能设置上初始值的
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
|
|
|
|
fireEvent.click(getByText(/Submit/));
|
|
|
|
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(() => {
|
|
|
|
expect(onSubmit).toBeCalled();
|
|
|
|
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
|
|
|
});
|
2021-06-03 12:36:43 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
test('Form:initData:remote', async () => {
|
|
|
|
const resultPromise = Promise.resolve({
|
|
|
|
data: {
|
|
|
|
status: 0,
|
|
|
|
msg: 'ok',
|
|
|
|
data: {
|
|
|
|
a: 1,
|
|
|
|
b: 2
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
const onSubmit = jest.fn();
|
|
|
|
const fetcher = jest.fn().mockImplementation(() => resultPromise);
|
|
|
|
const {container, getByText} = render(
|
|
|
|
amisRender(
|
|
|
|
{
|
|
|
|
type: 'form',
|
2022-05-19 10:51:50 +08:00
|
|
|
initApi: '/api/xxx?c=${c}',
|
2021-06-03 12:36:43 +08:00
|
|
|
controls: [
|
|
|
|
{
|
|
|
|
type: 'text',
|
|
|
|
name: 'a',
|
2022-06-02 10:00:09 +08:00
|
|
|
label: 'Label'
|
2022-05-19 10:51:50 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'text',
|
|
|
|
name: 'c',
|
|
|
|
label: 'Label',
|
2021-06-03 12:36:43 +08:00
|
|
|
value: '123'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
title: 'The form',
|
|
|
|
onSubmit,
|
|
|
|
actions: [
|
|
|
|
{
|
|
|
|
type: 'submit',
|
|
|
|
label: 'Submit'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{},
|
|
|
|
makeEnv({
|
|
|
|
fetcher
|
|
|
|
})
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(() => {
|
|
|
|
expect(
|
|
|
|
container.querySelector('[name="a"][value="1"]')
|
|
|
|
).toBeInTheDocument();
|
2022-05-19 10:51:50 +08:00
|
|
|
expect(
|
|
|
|
container.querySelector('[name="c"][value="123"]')
|
|
|
|
).toBeInTheDocument();
|
2022-04-12 14:22:39 +08:00
|
|
|
expect(
|
|
|
|
container.querySelector('[data-testid="spinner"]')
|
|
|
|
).not.toBeInTheDocument();
|
|
|
|
});
|
|
|
|
expect(container).toMatchSnapshot();
|
2021-06-03 12:36:43 +08:00
|
|
|
|
|
|
|
expect(fetcher).toHaveBeenCalled();
|
|
|
|
expect(fetcher.mock.calls[0][0]).toMatchSnapshot();
|
|
|
|
|
|
|
|
fireEvent.click(getByText('Submit'));
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(() => {
|
|
|
|
expect(onSubmit).toBeCalled();
|
|
|
|
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
|
|
|
});
|
2021-06-03 12:36:43 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
// 主要用来测试 form 的 source 接口是否在 initApi 后调用
|
|
|
|
// 并且发送的参数是否可以携带 initApi 返回的数据
|
|
|
|
// 并且 source 接口如果返回了 value 是否可以应用上。
|
|
|
|
test('Form:initData:remote:options:source', async () => {
|
2022-04-12 14:22:39 +08:00
|
|
|
const fetcherinitApi = jest.fn().mockImplementation(() =>
|
|
|
|
Promise.resolve({
|
2021-06-03 12:36:43 +08:00
|
|
|
data: {
|
2022-04-12 14:22:39 +08:00
|
|
|
status: 0,
|
|
|
|
msg: 'ok',
|
|
|
|
data: {
|
|
|
|
id: 1
|
|
|
|
}
|
2021-06-03 12:36:43 +08:00
|
|
|
}
|
2022-04-12 14:22:39 +08:00
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
const fetcherSourceApi = jest.fn().mockImplementation(() =>
|
|
|
|
Promise.resolve({
|
2021-06-03 12:36:43 +08:00
|
|
|
data: {
|
2022-04-12 14:22:39 +08:00
|
|
|
status: 0,
|
|
|
|
msg: 'ok',
|
|
|
|
data: {
|
|
|
|
value: 'b',
|
|
|
|
options: [
|
|
|
|
{
|
|
|
|
label: 'OptionA',
|
|
|
|
value: 'a'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: 'OptionB',
|
|
|
|
value: 'b'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
2021-06-03 12:36:43 +08:00
|
|
|
}
|
2022-04-12 14:22:39 +08:00
|
|
|
})
|
|
|
|
);
|
2021-06-03 12:36:43 +08:00
|
|
|
const onSubmit = jest.fn();
|
|
|
|
const fetcher = (arg1: any, ...rest: Array<any>) => {
|
|
|
|
const api = /\/api\/(\w+)/.test(arg1.url) ? RegExp.$1 : '';
|
|
|
|
const map: any = {
|
|
|
|
initApi: fetcherinitApi,
|
|
|
|
source: fetcherSourceApi
|
|
|
|
};
|
|
|
|
|
|
|
|
return map[api](arg1, ...rest);
|
|
|
|
};
|
|
|
|
const {container, getByText} = render(
|
|
|
|
amisRender(
|
|
|
|
{
|
|
|
|
type: 'form',
|
|
|
|
initApi: '/api/initApi?op=${op}',
|
|
|
|
controls: [
|
|
|
|
{
|
|
|
|
type: 'hidden',
|
|
|
|
name: 'op',
|
|
|
|
value: 'init'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
type: 'select',
|
|
|
|
name: 'a',
|
|
|
|
label: 'Select',
|
|
|
|
source: '/api/source?id=${id}'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
title: 'The form',
|
|
|
|
onSubmit,
|
|
|
|
actions: [
|
|
|
|
{
|
|
|
|
type: 'submit',
|
|
|
|
label: 'Submit'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{},
|
|
|
|
makeEnv({
|
|
|
|
fetcher
|
|
|
|
})
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(async () => {
|
|
|
|
expect(getByText('OptionB')).toBeInTheDocument();
|
2021-06-03 12:36:43 +08:00
|
|
|
|
2022-04-12 14:22:39 +08:00
|
|
|
expect(fetcherinitApi).toHaveBeenCalled();
|
|
|
|
expect(fetcherinitApi.mock.calls[0][0].url).toEqual('/api/initApi?op=init');
|
|
|
|
|
|
|
|
await wait(200); // 只有出现在 waitFor 里面的才有用。
|
|
|
|
});
|
2021-06-03 12:36:43 +08:00
|
|
|
|
|
|
|
fireEvent.click(getByText('Submit'));
|
2022-04-12 14:22:39 +08:00
|
|
|
await waitFor(() => {
|
|
|
|
expect(onSubmit).toBeCalled();
|
|
|
|
expect(onSubmit.mock.calls[0][0]).toMatchObject({
|
|
|
|
id: 1,
|
|
|
|
op: 'init',
|
|
|
|
a: 'b'
|
|
|
|
});
|
2021-06-03 12:36:43 +08:00
|
|
|
});
|
|
|
|
});
|