Skip to content

Commit b5d16be

Browse files
RylanBotRylanBot
committed
chore: update demo and test
1 parent 5d6ed7d commit b5d16be

File tree

7 files changed

+91
-80
lines changed

7 files changed

+91
-80
lines changed

‎packages/components/form/FormList.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,6 @@ const FormList: React.FC<TdFormListProps> = (props) => {
229229
setFormListValue([]);
230230
setFields([]);
231231
unset(form?.store, fullPath);
232-
formListMapRef.current.clear();
233232
}
234233
},
235234
setValidateMessage: (fieldData) => {

‎packages/components/form/__tests__/form-list.test.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -434,7 +434,7 @@ describe('Form List 组件测试', () => {
434434

435435
// Test setFields
436436
fireEvent.click(queryByText('setFields'));
437-
await mockTimeout(() => true);
437+
await mockTimeout();
438438
expect((getByPlaceholderText('user-name-0') as HTMLInputElement).value).toBe('Alice');
439439
expect((getByPlaceholderText('project-name-0-0') as HTMLInputElement).value).toBe('Website Redesign');
440440
expect((getByPlaceholderText('task-name-0-0-0') as HTMLInputElement).value).toBe('Design mockups');
@@ -444,22 +444,17 @@ describe('Form List 组件测试', () => {
444444

445445
// Test setFieldsValue
446446
fireEvent.click(queryByText('setFieldsValue'));
447-
await mockTimeout(() => true);
447+
await mockTimeout();
448448
expect((getByPlaceholderText('user-name-0') as HTMLInputElement).value).toBe('Bob');
449449
expect((getByPlaceholderText('project-name-0-0') as HTMLInputElement).value).toBe('Mobile App');
450450
expect((getByPlaceholderText('task-name-0-0-0') as HTMLInputElement).value).toBe('API integration');
451451
expect((getByPlaceholderText('task-status-0-0-0') as HTMLInputElement).value).toBe('pending');
452452
expect((getByPlaceholderText('task-name-0-0-1') as HTMLInputElement).value).toBe('UI implementation');
453453
expect((getByPlaceholderText('task-status-0-0-1') as HTMLInputElement).value).toBe('in-progress');
454454

455-
// Wait a bit more to ensure DOM is fully updated before next operation
456-
await mockTimeout(() => true);
457-
458455
// Test addNestedData - multiple users with nested projects and tasks
459456
fireEvent.click(queryByText('addNestedData'));
460-
await mockTimeout(() => true);
461-
// Add another wait to ensure all nested FormLists are fully rendered
462-
await mockTimeout(() => true);
457+
await mockTimeout();
463458

464459
expect((getByPlaceholderText('user-name-0') as HTMLInputElement).value).toBe('Charlie');
465460
expect((getByPlaceholderText('project-name-0-0') as HTMLInputElement).value).toBe('Backend Service');
@@ -480,7 +475,7 @@ describe('Form List 组件测试', () => {
480475
// Test remove nested task - remove first task of Charlie's Backend Service project
481476
const removeTaskBtn = container.querySelector('.test-remove-task-0-0-0');
482477
fireEvent.click(removeTaskBtn);
483-
await mockTimeout(() => true);
478+
await mockTimeout();
484479
expect((getByPlaceholderText('user-name-0') as HTMLInputElement).value).toBe('Charlie');
485480
// After removing first task, the second task (API development) becomes the first one
486481
expect((getByPlaceholderText('task-name-0-0-0') as HTMLInputElement).value).toBe('API development');
@@ -493,32 +488,32 @@ describe('Form List 组件测试', () => {
493488
// Test remove project - remove Charlie's second project (DevOps)
494489
const removeProjectBtn = container.querySelector('.test-remove-project-0-1');
495490
fireEvent.click(removeProjectBtn);
496-
await mockTimeout(() => true);
491+
await mockTimeout();
497492
// After removing DevOps project, only Backend Service should remain for Charlie
498493
expect(container.querySelector('[placeholder="project-name-0-1"]')).toBeFalsy();
499494
expect(container.querySelector('[placeholder="task-name-0-1-0"]')).toBeFalsy();
500495

501496
// Test remove user - remove David
502497
const removeUserBtn = container.querySelector('.test-remove-user-1');
503498
fireEvent.click(removeUserBtn);
504-
await mockTimeout(() => true);
499+
await mockTimeout();
505500
// After removing David, only Charlie should remain
506501
expect(container.querySelector('[placeholder="user-name-1"]')).toBeFalsy();
507502
expect(container.querySelector('[placeholder="project-name-1-0"]')).toBeFalsy();
508503

509504
// Add an empty user to test validation
510505
const addUserBtn = container.querySelector('#test-add-user');
511506
fireEvent.click(addUserBtn);
512-
await mockTimeout(() => true);
507+
await mockTimeout();
513508

514509
// Test validate on nested FormList
515510
fireEvent.click(queryByText('validate'));
516-
await mockTimeout(() => true);
511+
await mockTimeout();
517512
expect(queryByText('用户名必填')).toBeTruthy();
518513

519514
// Test clearValidate
520515
fireEvent.click(queryByText('clearValidate'));
521-
await mockTimeout(() => true);
516+
await mockTimeout();
522517
expect(queryByText('用户名必填')).not.toBeTruthy();
523518
});
524519
});

‎packages/components/form/__tests__/form.test.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable */
2+
import { fireEvent, mockDelay, mockTimeout, render, vi } from '@test/utils';
23
import React, { useEffect, useState } from 'react';
34
import { HelpCircleIcon } from 'tdesign-icons-react';
4-
import { fireEvent, mockDelay, mockTimeout, render, vi } from '@test/utils';
55
import Button from '../../button';
66
import Checkbox from '../../checkbox';
77
import Input from '../../input';
@@ -96,9 +96,11 @@ describe('Form 组件测试', () => {
9696
expect((getByPlaceholderText('input1') as HTMLInputElement).value).toEqual('');
9797
fireEvent.click(getByText('setFields'));
9898
expect((getByPlaceholderText('input1') as HTMLInputElement).value).toEqual('setFields');
99+
await mockTimeout();
99100
expect(fn).toHaveBeenCalled();
100101

101102
fireEvent.click(getByText('setFieldsValue'));
103+
await mockTimeout();
102104
expect((getByPlaceholderText('input1') as HTMLInputElement).value).toEqual('setFieldsValue');
103105
expect(fn).toHaveBeenCalled();
104106

@@ -694,6 +696,7 @@ describe('Form 组件测试', () => {
694696
expect(container.querySelector('.t-is-checked')).toBe(null);
695697
fireEvent.click(getByText('setFields'));
696698
expect((container.querySelector('.t-is-checked input') as HTMLInputElement).value).toEqual('la');
699+
await mockTimeout();
697700
expect(fn).toHaveBeenCalledTimes(1);
698701
fireEvent.click(getByText('setFields'));
699702
expect(fn).toHaveBeenCalledTimes(1);

‎packages/components/form/_example/form-list.tsx‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { Button, Form, Input, Select, Space } from 'tdesign-react';
44

55
const { FormItem, FormList } = Form;
66

7-
const cityOptions = [
8-
{ label: '北京', value: 'bj' },
9-
{ label: '上海', value: 'sh' },
10-
{ label: '广州', value: 'gz' },
11-
{ label: '深圳', value: 'sz' },
7+
const taskTypeOptions = [
8+
{ label: '需求评审', value: 'review' },
9+
{ label: '交互设计', value: 'ui' },
10+
{ label: '开发任务', value: 'dev' },
11+
{ label: '功能测试', value: 'test' },
1212
];
1313

1414
export default function BaseForm() {
@@ -23,43 +23,38 @@ export default function BaseForm() {
2323
<Form
2424
form={form}
2525
onSubmit={onSubmit}
26-
initialData={{
27-
address: [
28-
{ city: 'bj', area: '海淀区' },
29-
{ city: 'sh', area: '浦东区' },
30-
],
31-
}}
26+
initialData={{ task: [{ type: 'review' }, { type: 'ui' }] }}
3227
onValuesChange={(change, all) => {
3328
console.log('change:', change, JSON.stringify(change));
3429
console.log('all:', all, JSON.stringify(all));
3530
}}
3631
resetType="initial"
3732
>
38-
<FormList name="address">
33+
<FormList name="task">
3934
{(fields, { add, remove, move }) => (
4035
<>
4136
{fields.map(({ key, name, ...restField }, index) => (
4237
<FormItem key={key}>
43-
<FormItem name={[name, 'city']} label="城市" rules={[{ required: true, type: 'error' }]} {...restField}>
44-
<Select options={cityOptions} />
38+
<FormItem name={[name, 'type']} label="类型" {...restField}>
39+
<Select options={taskTypeOptions} />
4540
</FormItem>
4641

47-
<FormItem name={[name, 'area']} label="地区" rules={[{ required: true, type: 'error' }]} {...restField}>
42+
<FormItem name={[name, 'notes']} label="备注" initialData="排期中" {...restField}>
4843
<Input />
4944
</FormItem>
5045

5146
<FormItem>
5247
<Space>
5348
<MinusCircleIcon
54-
size="20px"
5549
style={{ cursor: 'pointer', marginRight: 12 }}
50+
size="20px"
5651
onClick={() => remove(name)}
5752
/>
5853
<Button
54+
style={{ marginRight: 8 }}
5955
size="small"
6056
disabled={index === 0}
6157
onClick={() => move(index, index - 1)}
62-
style={{ marginRight: 8 }}
6358
>
6459
上移
6560
</Button>
@@ -70,25 +65,22 @@ export default function BaseForm() {
7065
</FormItem>
7166
</FormItem>
7267
))}
68+
7369
<FormItem style={{ marginLeft: 100 }}>
7470
<Space>
75-
<Button theme="default" variant="dashed" onClick={() => add({ city: 'sz', area: '南山区' })}>
76-
新增指定项
77-
</Button>
78-
<Button theme="default" variant="dashed" onClick={() => add()}>
79-
新增空白项
80-
</Button>
71+
<Button onClick={() => add({ taskType: 'dev', notes: '已交付' })}>新增指定项</Button>
72+
<Button onClick={() => add()}>新增默认项</Button>
8173
</Space>
8274
</FormItem>
8375
</>
8476
)}
8577
</FormList>
8678

8779
<FormItem style={{ marginLeft: 100 }}>
88-
<Button type="submit" theme="primary">
80+
<Button type="submit" theme="default">
8981
提交
9082
</Button>
91-
<Button type="reset" style={{ marginLeft: 12 }}>
83+
<Button type="reset" theme="default" style={{ marginLeft: 12 }}>
9284
重置
9385
</Button>
9486
</FormItem>

‎packages/components/form/hooks/useFormItemInitialData.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export default function useFormItemInitialData(name: NamePath, fullPath: NamePat
6565
}
6666
}
6767

68-
// 动态表单场景
6968
if (formListName && Array.isArray(fullPath)) {
7069
const pathPrefix = fullPath.slice(0, -1);
7170
const pathExisted = has(form.store, pathPrefix);
@@ -81,7 +80,7 @@ export default function useFormItemInitialData(name: NamePath, fullPath: NamePat
8180
return initialData;
8281
}
8382

84-
if (name && formListInitialData?.length) {
83+
if (name && formListInitialData.length) {
8584
const defaultInitialData = get(formListInitialData, name);
8685
if (typeof defaultInitialData !== 'undefined') return defaultInitialData;
8786
}

0 commit comments

Comments
 (0)