ant-design/components/form/__tests__/ref.test.tsx
二货爱吃白萝卜 91878f82ad
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
refactor: update ref logic (#51952)
* refactor: update ref logic

* chore: clean up

* chore: coverage adjust

* test: coverage

* chore: back of code
2024-12-10 10:58:00 +08:00

115 lines
3.2 KiB
TypeScript

import React from 'react';
import type { FormRef } from 'rc-field-form/lib/interface';
import Form, { FormInstance } from '..';
import { fireEvent, render } from '../../../tests/utils';
import Button from '../../button';
import type { InputRef } from '../../input';
import Input from '../../input';
interface TestProps {
show?: boolean;
onRef: (node: React.ReactNode, originRef: InputRef) => void;
}
describe('Form.Ref', () => {
const Test: React.FC<TestProps> = ({ show, onRef }) => {
const [form] = Form.useForm();
const removeRef = React.useRef<InputRef>(null);
const testRef = React.useRef<InputRef>(null);
const listRef = React.useRef<InputRef>(null);
return (
<Form form={form} initialValues={{ list: ['light'] }}>
{show && (
<Form.Item name="remove" label="remove">
<Input ref={removeRef} />
</Form.Item>
)}
<Form.Item name="test" label="test">
<Input ref={testRef} />
</Form.Item>
<Form.List name="list">
{(fields) =>
fields.map((field) => (
<Form.Item {...field} key={field.key}>
<Input ref={listRef} />
</Form.Item>
))
}
</Form.List>
<Button
className="ref-item"
onClick={() => {
onRef(form.getFieldInstance('test'), testRef.current!);
}}
>
Form.Item
</Button>
<Button
className="ref-list"
onClick={() => {
onRef(form.getFieldInstance(['list', 0]), listRef.current!);
}}
>
Form.List
</Button>
<Button
className="ref-remove"
onClick={() => {
onRef(form.getFieldInstance('remove'), removeRef.current!);
}}
>
Removed
</Button>
</Form>
);
};
it('should ref work', () => {
const onRef = jest.fn();
const { container, rerender } = render(<Test onRef={onRef} show />);
fireEvent.click(container.querySelector('.ref-item')!);
expect(onRef).toHaveBeenCalled();
expect(onRef.mock.calls[0][0]).toBe(onRef.mock.calls[0][1]);
onRef.mockReset();
fireEvent.click(container.querySelector('.ref-list')!);
expect(onRef).toHaveBeenCalled();
expect(onRef.mock.calls[0][0]).toBe(onRef.mock.calls[0][1]);
onRef.mockReset();
rerender(<Test onRef={onRef} show={false} />);
fireEvent.click(container.querySelector('.ref-remove')!);
expect(onRef).toHaveBeenCalledWith(undefined, null);
});
it('should have nativeForm', () => {
const formRef = React.createRef<FormRef>();
const { container } = render(<Form ref={formRef} />);
expect(container.querySelector('.ant-form')).toBe(formRef.current?.nativeElement);
});
// TODO: this is no need to test in React 19
it('not crash if not support Ref', () => {
const NoRefComp = () => <div />;
const formRef = React.createRef<FormInstance>();
render(
<Form ref={formRef}>
<Form.Item name="bamboo" label="Bamboo">
<NoRefComp />
</Form.Item>
</Form>,
);
const ele = formRef.current?.getFieldInstance('bamboo');
expect(ele).toBeFalsy();
});
});