test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: Form未设置初始值时reset未生效问题 (#4875)

Browse Source
This commit is contained in:
RUNZE LU 2022-07-14 13:17:43 +08:00 committed by GitHub
parent c2ed461ab8
commit 13ad0233d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 232 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/amis-core/src/renderers/wrapControl.tsx
View File

@ -367,10 +367,7 @@ export function wrapControl<
} else if (model) {
const valueByName = getVariable(props.data, model.name);
if (
valueByName !== undefined &&
isEqual(props.defaultValue, prevProps.defaultValue)
) {
if (isEqual(props.defaultValue, prevProps.defaultValue)) {
// value 非公式表达式时，name 值优先，若 defaultValue 主动变动时，则使用 defaultValue
if (
// 然后才是查看关联的 name 属性值是否变化

171
packages/amis/__tests__/renderers/Form/__snapshots__/index.test.tsx.snap
View File

@ -322,6 +322,177 @@ exports[`Renderer:Form initApi 1`] = `
</div>
`;
exports[`Renderer:Form reset 1`] = `
<div>
<div
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
style="position: relative;"
>
<div
class="cxd-Panel-heading"
>
<h3
class="cxd-Panel-title"
>
<span
class="cxd-TplField"
>
<span>
表单
</span>
</span>
</h3>
</div>
<div
class="cxd-Panel-body"
>
<form
class="cxd-Form cxd-Form--normal"
novalidate=""
>
<input
style="display: none;"
type="submit"
/>
<div
class="cxd-Form-item cxd-Form-item--normal"
data-role="form-item"
>
<label
class="cxd-Form-label"
>
<span>
<span
class="cxd-TplField"
>
<span>
姓名
</span>
</span>
</span>
</label>
<div
class="cxd-Form-control cxd-TextControl"
>
<div
class="cxd-TextControl-input"
>
<input
autocomplete="off"
class=""
name="name"
placeholder=""
size="10"
type="text"
value="username"
/>
</div>
</div>
</div>
<div
class="cxd-Form-item cxd-Form-item--normal"
data-role="form-item"
>
<label
class="cxd-Form-label"
>
<span>
<span
class="cxd-TplField"
>
<span>
邮箱
</span>
</span>
</span>
</label>
<div
class="cxd-Form-control cxd-TextControl"
>
<div
class="cxd-TextControl-input"
>
<input
autocomplete="off"
class=""
name="email"
placeholder=""
size="10"
type="email"
value="user_changed@baidu.com"
/>
</div>
</div>
</div>
</form>
</div>
<div
class="cxd-Panel-footerWrap"
>
<div
class="cxd-Panel-btnToolbar cxd-Panel-footer"
>
<button
class="cxd-Button cxd-Button--default"
type="reset"
>
<span>
ResetButton
</span>
</button>
<button
class="cxd-Button cxd-Button--default"
type="submit"
>
<span>
SubmitBtn
</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[`Renderer:Form sendOn:true 1`] = `
<div>
<div

71
packages/amis/__tests__/renderers/Form/index.test.tsx
View File

@ -1,18 +1,8 @@
import React = require('react');
import PageRenderer from '../../../../amis-core/src/renderers/Form';
import * as renderer from 'react-test-renderer';
import {
render,
fireEvent,
cleanup,
getByText,
waitFor
} from '@testing-library/react';
import {render, fireEvent, cleanup, waitFor} from '@testing-library/react';
import '../../../src';
import {render as amisRender} from '../../../src';
import {wait, makeEnv} from '../../helper';
import {clearStoresCache} from '../../../src';
import {createMemoryHistory} from 'history';
// mock getComputedStyle
Object.defineProperty(window, 'getComputedStyle', {
@ -519,3 +509,62 @@ test('Renderer:Form sendOn:true', async () => {
expect(fetcher).toHaveBeenCalled();
expect(container).toMatchSnapshot();
});
test('Renderer:Form reset', async () => {
const pristineData = {
email: 'user@baidu.com'
};
const onReset = jest.fn();
const {container, getByText} = render(
amisRender(
{
type: 'form',
body: [
{
type: 'input-text',
name: 'name',
label: '姓名'
},
{
type: 'input-email',
name: 'email',
label: '邮箱',
value: pristineData.email
}
],
actions: [
{
type: 'reset',
label: 'ResetButton'
},
{
type: 'submit',
label: 'SubmitBtn'
}
]
},
{onReset},
makeEnv({})
)
);
const textInput = container.querySelector(
'input[name="name"]'
) as HTMLInputElement;
const emailInput = container.querySelector(
'input[name="email"]'
) as HTMLInputElement;
expect(textInput).toBeInTheDocument();
expect(emailInput).toBeInTheDocument();
fireEvent.change(textInput, {target: {value: 'username'}});
fireEvent.change(emailInput, {target: {value: 'user_changed@baidu.com'}});
fireEvent.click(getByText('ResetButton'));
await waitFor(() => {
expect(onReset).toHaveBeenCalled();
expect(onReset).toHaveBeenCalledWith(pristineData);
});
expect(container).toMatchSnapshot();
});