diff --git a/src/form/__tests__/form.test.tsx b/src/form/__tests__/form.test.tsx index fd737621d3..f6e82c6ebf 100644 --- a/src/form/__tests__/form.test.tsx +++ b/src/form/__tests__/form.test.tsx @@ -1,10 +1,11 @@ /* eslint-disable */ -import { render, fireEvent } from '@test/utils'; -import React from 'react'; +import { render, fireEvent, mockDelay } from '@test/utils'; +import React, { useEffect } from 'react'; import Form from '../index'; import Input from '../../input'; import Button from '../../button'; +import { HelpCircleIcon } from 'tdesign-icons-react'; const { FormItem } = Form; @@ -49,4 +50,195 @@ describe('Form 组件测试', () => { // @ts-ignore expect(getByPlaceholderText('input2').value).toEqual('value2'); }); + + test('Form.reset works fine', async () => { + const TestForm = () => { + return ( +
+ + + + + + +
+ ); + }; + + const { getByPlaceholderText, getByText } = render(); + fireEvent.change(getByPlaceholderText('input1'), { target: { value: 'value1' } }); + expect((getByPlaceholderText('input1') as HTMLInputElement).value).toEqual('value1'); + + fireEvent.click(getByText('reset')); + + expect((getByPlaceholderText('input1') as HTMLInputElement).value).toEqual(''); + }); + + test('Form.setValidateMessage works fine', () => { + const TestForm = () => { + const [form] = Form.useForm(); + + useEffect(() => { + form.setValidateMessage({ + notArray: { + //@ts-ignore + type: 'error', + message: 'not array message', + }, + empty: [], + username: [ + { + type: 'error', + message: 'custom error message', + }, + ], + password: [ + { + type: 'warning', + message: 'custom warning message', + }, + ], + }); + }, []); + + return ( +
+ + + + + + + + + + + + +
+ ); + }; + + const { container } = render(); + expect(container.querySelector('.not-array .t-input__extra')).toBeNull(); + expect(container.querySelector('.empty .t-input__extra')).toBeNull(); + expect(container.querySelector('.username .t-input__extra').innerHTML).toBe('custom error message'); + expect(container.querySelector('.password .t-input__extra').innerHTML).toBe('custom warning message'); + }); + + test('Form disabled `input` keydown enter submit form', async () => { + const TestForm = () => { + return ( +
+ + + +
+ ); + }; + + const { container, getByPlaceholderText } = render(); + fireEvent.keyDown(getByPlaceholderText('username'), { key: 'Enter' }); + await mockDelay(); + expect(container.querySelector('.t-input__extra')).toBeNull(); + }); + + test('FormItem without icon works fine', async () => { + const TestForm = () => { + return ( +
+ + + + + + +
+ ); + }; + + const { container, getByText } = render(); + fireEvent.click(getByText('submit')); + await mockDelay(); + expect(container.querySelector('.t-form__status')).toBeNull(); + }); + + test('FormItem preset icon works fine', async () => { + const TestForm = () => { + return ( +
+ + + + + + + + + + } + rules={[{ required: true, message: '请输入帮助' }]} + > + + + + + +
+ ); + }; + + const { container, getByText } = render(); + expect(container.querySelector('.help .t-icon-help-circle')).toBeTruthy(); + fireEvent.click(getByText('submit')); + await mockDelay(); + expect(container.querySelector('.username .t-icon-check-circle-filled')).toBeTruthy(); + expect(container.querySelector('.email .t-icon-error-circle-filled')).toBeTruthy(); + expect(container.querySelector('.phone .t-icon-close-circle-filled')).toBeTruthy(); + expect(container.querySelector('.help .t-icon-help-circle')).toBeTruthy(); + }); + + test('FormItem.props.name can be array', () => { + const mockName = 'name'; + const mockBirtyday = '1996-01-24'; + const TestForm = () => { + return ( +
+ + + + + + +
+ ); + }; + + const { getByPlaceholderText } = render(); + expect((getByPlaceholderText('name') as HTMLInputElement).value).toBe(mockName); + expect((getByPlaceholderText('birthday') as HTMLInputElement).value).toBe(mockBirtyday); + }); });