Skip to content

Commit a08b495

Browse files
97vack97vack
committed
docs: add test case
1 parent 3545084 commit a08b495

File tree

1 file changed

+328
-0
lines changed

1 file changed

+328
-0
lines changed

‎src/__tests__/useForm.test.tsx

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
waitFor,
55
} from '@testing-library/react';
66
import React, { useEffect, useImperativeHandle } from 'react';
7+
import { getUuid } from 'react-form-simple/utils/util';
78
import { describe, expect, test, vi } from 'vitest';
89
import useForm from '../use/useForm';
910

@@ -178,3 +179,330 @@ describe.concurrent('watch or subscribe', () => {
178179
);
179180
});
180181
});
182+
183+
describe.concurrent('dymic form', () => {
184+
test('add', async ({ expect }) => {
185+
const TestDemo = React.forwardRef((props, ref) => {
186+
const { render, model, forceUpdate } = useForm<{
187+
list: Array<{ uid: string; value: string }>;
188+
}>({ list: [] });
189+
const renderMapList = model.list.map((v, index) => {
190+
return (
191+
<div id={v.uid}>
192+
{render(`list.${index}.value`)(
193+
<input id={`dymic-${index}-input`} />,
194+
)}
195+
</div>
196+
);
197+
});
198+
const renderButton = (
199+
<button
200+
id="dymic-add-button"
201+
onClick={() => {
202+
model.list.push({
203+
uid: getUuid(),
204+
value: `${model.list.length}`,
205+
});
206+
forceUpdate();
207+
}}
208+
>
209+
add
210+
</button>
211+
);
212+
useImperativeHandle(ref, () => ({}));
213+
return (
214+
<>
215+
<div id="add-dymic-wrap">{renderMapList}</div>
216+
{renderButton}
217+
</>
218+
);
219+
});
220+
const { container } = testRender(<TestDemo />);
221+
const button = container.querySelector(
222+
'#dymic-add-button',
223+
) as HTMLButtonElement;
224+
button.click();
225+
await vi.waitFor(
226+
() => {
227+
const wrap = container.querySelector(
228+
'#add-dymic-wrap',
229+
) as HTMLDivElement;
230+
if (wrap.children.length > 0) {
231+
return true;
232+
}
233+
return Promise.reject();
234+
},
235+
{ timeout: 100, interval: 10 },
236+
);
237+
const wrap = container.querySelector('#add-dymic-wrap') as HTMLDivElement;
238+
expect(wrap.children.length).toBeGreaterThan(0);
239+
const children = wrap.children;
240+
Array.from(children).forEach((v, index) => {
241+
const input = container.querySelector(
242+
`#dymic-${index}-input`,
243+
) as HTMLInputElement;
244+
expect(Number(input.value)).toBe(index);
245+
});
246+
});
247+
248+
test('remove', async ({ expect }) => {
249+
const TestDemo = React.forwardRef((props, ref) => {
250+
const { render, model, forceUpdate } = useForm<{
251+
list: Array<{ uid: string; value: string }>;
252+
}>({ list: [] });
253+
const renderMapList = model.list.map((v, index) => {
254+
const renderRemoveButton = (
255+
<button
256+
id={`remove-item-${index}-button`}
257+
onClick={() => {
258+
model.list.splice(index, 1);
259+
forceUpdate();
260+
}}
261+
>
262+
remove!
263+
</button>
264+
);
265+
return (
266+
<div id={v.uid}>
267+
{render(`list.${index}.value`)(
268+
<input id={`dymic-remove-${index}-input`} />,
269+
)}
270+
{renderRemoveButton}
271+
</div>
272+
);
273+
});
274+
const renderButton = (
275+
<button
276+
id="dymic-remove-add-button"
277+
onClick={() => {
278+
model.list.push({
279+
uid: getUuid(),
280+
value: `${model.list.length}`,
281+
});
282+
forceUpdate();
283+
}}
284+
>
285+
add
286+
</button>
287+
);
288+
useImperativeHandle(ref, () => ({
289+
getModalData() {
290+
return model;
291+
},
292+
set(arr: any[]) {
293+
model.list = arr;
294+
forceUpdate();
295+
},
296+
}));
297+
return (
298+
<>
299+
<div id="remove-dymic-wrap">{renderMapList}</div>
300+
{renderButton}
301+
</>
302+
);
303+
});
304+
305+
const demoRef = React.createRef() as any;
306+
307+
const { container, unmount } = testRender(<TestDemo ref={demoRef} />);
308+
const addItem = (count: number = 1) => {
309+
const button = container.querySelector(
310+
'#dymic-remove-add-button',
311+
) as HTMLButtonElement;
312+
Array.from({ length: count }, (x, y) => y).forEach((v) => {
313+
button.click();
314+
});
315+
};
316+
317+
addItem(2);
318+
319+
const getWrap = () =>
320+
container.querySelector('#remove-dymic-wrap') as HTMLDivElement;
321+
322+
const getLen = () => {
323+
const wrap = getWrap();
324+
return wrap?.children?.length;
325+
};
326+
327+
const checkWrapChildrenLen = () => {
328+
const len = getLen();
329+
if (len === 2) {
330+
return true;
331+
}
332+
return Promise.reject();
333+
};
334+
await vi.waitFor(() => checkWrapChildrenLen(), {
335+
timeout: 100,
336+
interval: 10,
337+
});
338+
339+
const len = getLen();
340+
expect(len).toBeGreaterThan(0);
341+
const getInput = (index: number) => {
342+
const input = container.querySelector(
343+
`#dymic-remove-${index}-input`,
344+
) as HTMLInputElement;
345+
return input;
346+
};
347+
const getInputValue = (index: number) => {
348+
const input = getInput(index);
349+
return input.value;
350+
};
351+
const checkInputValue = () => {
352+
const wrap = getWrap();
353+
const children = wrap.children;
354+
Array.from(children).forEach((v, index) => {
355+
const value = getInputValue(index);
356+
expect(Number(value)).toBe(index);
357+
});
358+
};
359+
checkInputValue();
360+
const removeAction = async () => {
361+
const removeButton = container.querySelector(
362+
'#remove-item-0-button',
363+
) as HTMLButtonElement;
364+
365+
removeButton.click();
366+
await vi.waitFor(() => {
367+
const len = getLen();
368+
if (len === 1) {
369+
return true;
370+
}
371+
return Promise.reject();
372+
});
373+
// checkInputValue();
374+
375+
addItem();
376+
377+
const changeInputValue = (index: number) => {
378+
const input = getInput(index);
379+
fireEvent.change(input, { target: { value: 'testtest' } });
380+
};
381+
382+
await vi.waitFor(() => {
383+
const len = getLen();
384+
if (len === 2) return true;
385+
return Promise.reject();
386+
});
387+
388+
changeInputValue(0);
389+
390+
expect(getInputValue(0)).toBe('testtest');
391+
392+
expect(getInputValue(0)).not.toBe(getInputValue(1));
393+
const getModal = () => {
394+
const model = demoRef.current?.getModalData?.();
395+
return model;
396+
};
397+
const getModelListValue = (index: number) => {
398+
const model = getModal();
399+
const list = model.list || [];
400+
return list[index].value;
401+
};
402+
403+
expect(getModelListValue(0)).toBe(getInputValue(0));
404+
expect(getModelListValue(0)).not.toBe(getModelListValue(1));
405+
406+
return Promise.resolve();
407+
};
408+
409+
await removeAction();
410+
});
411+
412+
test('assignment', async () => {
413+
const TestDemo = React.forwardRef((props, ref) => {
414+
const { render, model, forceUpdate } = useForm<{
415+
list: Array<{ uid: string; value: string }>;
416+
}>({ list: [] });
417+
const renderMapList = model.list.map((v, index) => {
418+
return (
419+
<div id={v.uid}>
420+
{render(`list.${index}.value`)(
421+
<input id={`dymic-assignment-${index}-input`} />,
422+
)}
423+
</div>
424+
);
425+
});
426+
427+
useImperativeHandle(ref, () => ({
428+
getModalData() {
429+
return model;
430+
},
431+
set(arr: any[]) {
432+
model.list = arr;
433+
forceUpdate();
434+
},
435+
}));
436+
return (
437+
<>
438+
<div id="assign-dymic-wrap">{renderMapList}</div>
439+
</>
440+
);
441+
});
442+
443+
const ref = React.createRef() as any;
444+
const { container } = testRender(<TestDemo ref={ref} />);
445+
446+
const arr = [
447+
{ uid: getUuid(), value: 'name' },
448+
{ uid: getUuid(), value: 'age' },
449+
];
450+
ref.current.set(arr);
451+
452+
const getWrap = () =>
453+
container.querySelector('#assign-dymic-wrap') as HTMLDivElement;
454+
455+
const getLen = () => {
456+
const wrap = getWrap();
457+
return wrap?.children?.length;
458+
};
459+
460+
const checkWrapChildrenLen = () => {
461+
const len = getLen();
462+
if (len === 2) {
463+
return true;
464+
}
465+
return Promise.reject();
466+
};
467+
468+
const getInput = (index: number) => {
469+
const input = container.querySelector(
470+
`#dymic-assignment-${index}-input`,
471+
) as HTMLInputElement;
472+
return input;
473+
};
474+
const getInputValue = (index: number) => {
475+
const input = getInput(index);
476+
return input.value;
477+
};
478+
479+
const getModal = () => {
480+
const model = ref.current?.getModalData?.();
481+
return model;
482+
};
483+
484+
const getModelListValue = (index: number) => {
485+
const model = getModal();
486+
const list = model.list || [];
487+
return list[index].value;
488+
};
489+
490+
await vi.waitFor(() => checkWrapChildrenLen());
491+
492+
Array.from(getWrap().children).forEach((v, index) => {
493+
const inputValue = getInputValue(index);
494+
expect(inputValue).toBe(arr[index].value);
495+
expect(inputValue).toBe(getModelListValue(index));
496+
});
497+
498+
fireEvent.change(getInput(0), { target: { value: 'testtest' } });
499+
500+
fireEvent.change(getInput(1), { target: { value: 'testtesttwo' } });
501+
502+
expect(getModelListValue(0)).toBe(getInputValue(0));
503+
504+
expect(getModelListValue(1)).toBe(getInputValue(1));
505+
506+
expect(getModelListValue(0)).not.toBe(getInputValue(1));
507+
});
508+
});

0 commit comments

Comments
 (0)