amis2/packages/amis/__tests__/renderers/Form/initData.test.tsx

329 lines
6.9 KiB
TypeScript
Raw Normal View History

2021-06-03 12:36:43 +08:00
import React = require('react');
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()
)
);
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/));
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/));
await waitFor(() => {
expect(onSubmit).toBeCalled();
expect(onSubmit.mock.calls[0][0]).toMatchInlineSnapshot(`
{
"a": 1,
"b": 2,
}
`);
});
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/));
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',
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'
},
{
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
})
)
);
await waitFor(() => {
expect(
container.querySelector('[name="a"][value="1"]')
).toBeInTheDocument();
expect(
container.querySelector('[name="c"][value="123"]')
).toBeInTheDocument();
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'));
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 () => {
const fetcherinitApi = jest.fn().mockImplementation(() =>
Promise.resolve({
2021-06-03 12:36:43 +08:00
data: {
status: 0,
msg: 'ok',
data: {
id: 1
}
2021-06-03 12:36:43 +08:00
}
})
);
const fetcherSourceApi = jest.fn().mockImplementation(() =>
Promise.resolve({
2021-06-03 12:36:43 +08:00
data: {
status: 0,
msg: 'ok',
data: {
value: 'b',
options: [
{
label: 'OptionA',
value: 'a'
},
{
label: 'OptionB',
value: 'b'
}
]
}
2021-06-03 12:36:43 +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
})
)
);
await waitFor(async () => {
expect(getByText('OptionB')).toBeInTheDocument();
2021-06-03 12:36:43 +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'));
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
});
});