Skip to content

fix: change not trigger on Date #734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 1 commit into from
Nov 13, 2024
Merged

fix: change not trigger on Date #734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,7 +620,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
if (normalize) {
newValue = normalize(newValue, value, getFieldsValue(true));
}
if (!isEqual(newValue, value)) {
if (newValue !== value) {
dispatch({
type: 'updateValue',
namePath,
Expand Down
14 changes: 0 additions & 14 deletions tests/control.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,4 @@ describe('Form.Control', () => {
await changeValue(getInput(container), ['bamboo', '']);
matchError(container, "'test' is required");
});

it('value no change', async () => {
const fn = jest.fn();
const { container } = render(
<Form onFieldsChange={fn}>
<InfoField name="test" normalize={value => value?.replace(/\D/g, '') || undefined} />
</Form>,
);

await changeValue(getInput(container), 'bamboo');
expect(fn).toHaveBeenCalledTimes(0);
Copy link
Contributor

@crazyair crazyair Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

为啥把，执行 onChange，不调用 onValueChange 的 test 给删了？

Copy link
Member Author

@zombieJ zombieJ Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

挪了一个位置，这个测试用例之前放错地方了

await changeValue(getInput(container), '1');
expect(fn).toHaveBeenCalledTimes(1);
});
});
38 changes: 37 additions & 1 deletion tests/field.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import React from 'react';
import Form, { Field } from '../src';
import type { FormInstance } from '../src';
import { render } from '@testing-library/react';
import { act, fireEvent, render } from '@testing-library/react';
import { Input } from './common/InfoField';
import { getInput } from './common';
import timeout from './common/timeout';

describe('Form.Field', () => {
it('field remount should trigger constructor again', () => {
Expand Down Expand Up @@ -37,4 +40,37 @@ describe('Form.Field', () => {
// expect((wrapper.find('Field').instance() as any).cancelRegisterFunc).toBeTruthy();
expect(formRef.getFieldsValue()).toEqual({ light: 'bamboo' });
});

// https://github.com/ant-design/ant-design/issues/51611
it('date type as change', async () => {
const onValuesChange = jest.fn();

const MockDateInput = (props: { onChange?: (val: Date) => void }) => (
<button
onClick={() => {
props.onChange?.(new Date());
}}
>
Mock
</button>
);

const { container } = render(
<Form onValuesChange={onValuesChange}>
<Field name="date">
<MockDateInput />
</Field>
</Form>,
);

// Trigger
for (let i = 0; i < 3; i += 1) {
fireEvent.click(container.querySelector('button'));
await act(async () => {
await timeout();
});
expect(onValuesChange).toHaveBeenCalled();
onValuesChange.mockReset();
}
});
});
46 changes: 31 additions & 15 deletions tests/legacy/field-props.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import type { FormInstance } from '../../src';
import Form, { Field } from '../../src';
import { Input } from '../common/InfoField';
import InfoField, { Input } from '../common/InfoField';
import { changeValue, getInput, matchArray } from '../common';
import { render } from '@testing-library/react';

Expand Down Expand Up @@ -55,22 +55,38 @@ describe('legacy.field-props', () => {
expect(form.current?.getFieldValue('normal')).toBe('21');
});

it('normalize', async () => {
const form = React.createRef<FormInstance>();
const { container } = render(
<div>
<Form ref={form}>
<Field name="normal" normalize={v => v && v.toUpperCase()}>
<Input />
</Field>
</Form>
</div>,
);
describe('normalize', () => {
it('basic', async () => {
const form = React.createRef<FormInstance>();
const { container } = render(
<div>
<Form ref={form}>
<Field name="normal" normalize={v => v && v.toUpperCase()}>
<Input />
</Field>
</Form>
</div>,
);

await changeValue(getInput(container), 'a');
await changeValue(getInput(container), 'a');

expect(form.current?.getFieldValue('normal')).toBe('A');
expect(getInput(container).value).toBe('A');
});
Comment on lines +58 to +75
Copy link

@coderabbitai coderabbitai bot Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

建议补充Date对象规范化（normalize）的测试用例

经检查，项目中已有基本的Date对象变更检测测试（在field.test.tsx中），但缺少针对Date对象规范化的测试场景。建议添加以下测试场景：

  • Date对象的格式转换
  • 无效日期的处理
  • 日期范围的规范化
🔗 Analysis chain

测试用例结构清晰，建议补充Date对象相关测试

测试用例很好地验证了基本的值规范化功能。考虑到此PR主要解决Date对象的变更检测问题，建议添加专门针对Date对象的测试用例。

运行以下脚本检查是否存在其他Date相关的测试：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 搜索项目中与Date对象相关的测试
rg -t tsx -t ts "new Date\(" "test"

Length of output: 63

Script:

#!/bin/bash
# 搜索项目中与Date对象相关的测试，使用正确的文件类型参数
rg "new Date\(" tests/

Length of output: 85

Script:

#!/bin/bash
# 搜索测试文件中可能包含日期相关的测试用例
rg -i "date|moment" tests/

Length of output: 13344

Script:

#!/bin/bash
# 查找测试目录下所有测试文件
fd -e ts -e tsx -e js -e jsx . tests/

Length of output: 816

Script:

#!/bin/bash
# 查看field.test.tsx中的Date相关测试用例的具体实现
rg -A 10 "date type as change" tests/field.test.tsx

Length of output: 336

🧰 Tools
🪛 Biome

[error] 64-64: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


it('value no change', async () => {
const fn = jest.fn();
const { container } = render(
<Form onFieldsChange={fn}>
<InfoField name="test" normalize={value => value?.replace(/\D/g, '') || undefined} />
</Form>,
);

expect(form.current?.getFieldValue('normal')).toBe('A');
expect(getInput(container).value).toBe('A');
await changeValue(getInput(container), 'bamboo');
expect(fn).toHaveBeenCalledTimes(0);
await changeValue(getInput(container), '1');
expect(fn).toHaveBeenCalledTimes(1);
});
});

it('support jsx message', async () => {
Expand Down