mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:58:05 +08:00
补充初始化用例
This commit is contained in:
2betop
parent
6ffcab17a9
commit
82e4c65f16
526
__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
Normal file
526
__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
Normal file
@ -0,0 +1,526 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Form:initData 1`] = `
|
||||
<div>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="a"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="b"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form:initData 2`] = `
|
||||
Object {
|
||||
"a": "1",
|
||||
"b": "2",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`Form:initData:remote 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
<span>
|
||||
The form
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Spinner-overlay in"
|
||||
/>
|
||||
<div
|
||||
class="a-Spinner in a-Spinner--overlay"
|
||||
/>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-control a-TextControl is-disabled"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
disabled=""
|
||||
name="a"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value="123"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-btnToolbar a-Panel-footer"
|
||||
>
|
||||
<div
|
||||
class="a-Button a-Button--default is-disabled"
|
||||
disabled=""
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form:initData:remote 2`] = `
|
||||
Object {
|
||||
"config": Object {
|
||||
"cancelExecutor": [Function],
|
||||
"errorMessage": "fetchFailed",
|
||||
"onSuccess": [Function],
|
||||
"successMessage": undefined,
|
||||
},
|
||||
"method": "get",
|
||||
"query": Object {
|
||||
"a": "123",
|
||||
},
|
||||
"url": "/api/xxx?a=123",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`Form:initData:remote 3`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Panel a-Panel--default a-Panel--form"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-heading"
|
||||
>
|
||||
<h3
|
||||
class="a-Panel-title"
|
||||
>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
<span>
|
||||
The form
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Spinner-overlay"
|
||||
/>
|
||||
<div
|
||||
class="a-Spinner a-Spinner--overlay"
|
||||
/>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<label
|
||||
class="a-Form-label"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="a-TplField"
|
||||
>
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="a"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="a-Panel-footerWrap"
|
||||
>
|
||||
<div
|
||||
class="a-Panel-btnToolbar a-Panel-footer"
|
||||
>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="resize-sensor"
|
||||
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-expand"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-shrink"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
|
||||
>
|
||||
|
||||
|
||||
<div
|
||||
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="resize-sensor-appear"
|
||||
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form:initData:remote 4`] = `
|
||||
Object {
|
||||
"a": 1,
|
||||
"b": 2,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`Form:initData:super 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Page"
|
||||
>
|
||||
<div
|
||||
class="a-Page-content"
|
||||
>
|
||||
<div
|
||||
class="a-Page-main"
|
||||
>
|
||||
<div
|
||||
class="a-Page-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="a"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="b"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form:initData:super 2`] = `Object {}`;
|
||||
|
||||
exports[`Form:initData:without-super 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-Page"
|
||||
>
|
||||
<div
|
||||
class="a-Page-content"
|
||||
>
|
||||
<div
|
||||
class="a-Page-main"
|
||||
>
|
||||
<div
|
||||
class="a-Page-body"
|
||||
>
|
||||
<form
|
||||
class="a-Form a-Form--normal"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="a"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-Form-control a-TextControl"
|
||||
>
|
||||
<div
|
||||
class="a-TextControl-input"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
name="b"
|
||||
placeholder=""
|
||||
size="10"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<input
|
||||
style="display: none;"
|
||||
type="submit"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form:initData:without-super 2`] = `Object {}`;
|
||||
300
__tests__/renderers/Form/initData.test.tsx
Normal file
300
__tests__/renderers/Form/initData.test.tsx
Normal file
@ -0,0 +1,300 @@
|
||||
import React = require('react');
|
||||
import {render, cleanup, fireEvent} from '@testing-library/react';
|
||||
import '../../../src/themes/default';
|
||||
import {render as amisRender} from '../../../src/index';
|
||||
import {makeEnv, wait} from '../../helper';
|
||||
import {clearStoresCache} from '../../../src/factory';
|
||||
|
||||
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()
|
||||
)
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
fireEvent.click(getByText(/Submit/));
|
||||
await wait(300);
|
||||
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
||||
});
|
||||
|
||||
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 wait(300);
|
||||
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
||||
});
|
||||
|
||||
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 wait(300);
|
||||
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
||||
});
|
||||
|
||||
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?a=${a}',
|
||||
controls: [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'a',
|
||||
label: 'Label',
|
||||
value: '123'
|
||||
}
|
||||
],
|
||||
title: 'The form',
|
||||
onSubmit,
|
||||
actions: [
|
||||
{
|
||||
type: 'submit',
|
||||
label: 'Submit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({
|
||||
fetcher
|
||||
})
|
||||
)
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
await wait(100);
|
||||
|
||||
await resultPromise;
|
||||
await wait(100);
|
||||
|
||||
expect(fetcher).toHaveBeenCalled();
|
||||
expect(fetcher.mock.calls[0][0]).toMatchSnapshot();
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
fireEvent.click(getByText('Submit'));
|
||||
await wait(300);
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// 主要用来测试 form 的 source 接口是否在 initApi 后调用
|
||||
// 并且发送的参数是否可以携带 initApi 返回的数据
|
||||
// 并且 source 接口如果返回了 value 是否可以应用上。
|
||||
test('Form:initData:remote:options:source', async () => {
|
||||
const initApiPromise = Promise.resolve({
|
||||
data: {
|
||||
status: 0,
|
||||
msg: 'ok',
|
||||
data: {
|
||||
id: 1
|
||||
}
|
||||
}
|
||||
});
|
||||
const fetcherinitApi = jest.fn().mockImplementation(() => initApiPromise);
|
||||
const sourceApiPromise = Promise.resolve({
|
||||
data: {
|
||||
status: 0,
|
||||
msg: 'ok',
|
||||
data: {
|
||||
value: 'b',
|
||||
options: [
|
||||
{
|
||||
label: 'OptionA',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
label: 'OptionB',
|
||||
value: 'b'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
const fetcherSourceApi = jest.fn().mockImplementation(() => sourceApiPromise);
|
||||
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 initApiPromise;
|
||||
expect(fetcherinitApi).toHaveBeenCalled();
|
||||
expect(fetcherinitApi.mock.calls[0][0].url).toEqual('/api/initApi?op=init');
|
||||
|
||||
await wait(100);
|
||||
|
||||
await sourceApiPromise;
|
||||
expect(fetcherSourceApi).toHaveBeenCalled();
|
||||
expect(fetcherSourceApi.mock.calls[0][0].url).toEqual('/api/source?id=1');
|
||||
|
||||
fireEvent.click(getByText('Submit'));
|
||||
await wait(300);
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchObject({
|
||||
id: 1,
|
||||
op: 'init',
|
||||
a: 'b'
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user