Skip to content

Commit 9c830c5

Browse files
97vack97vack
committed
test: add dymic test
1 parent e112f01 commit 9c830c5

1 file changed

Lines changed: 324 additions & 0 deletions

File tree

‎src/__tests__/react-form-simple.test.tsx‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1100,4 +1100,328 @@ describe('React Form Simple - 完整测试套件', () => {
11001100
expect(email0.value).toBe('user1@example.com');
11011101
});
11021102
});
1103+
describe('dymic array test', async () => {
1104+
test('assignment', async () => {
1105+
const TestDemo = React.forwardRef(({}, ref) => {
1106+
const { render, model, forceUpdate } = useForm<{
1107+
list: Array<{ uid: string; value: string }>;
1108+
}>({ list: [] });
1109+
const renderMapList = model.list.map((v, index) => {
1110+
return (
1111+
<div id={v.uid} key={v.uid}>
1112+
{render(`list.${index}.value`)(
1113+
<input id={`dymic-assignment-${index}-input`} />,
1114+
)}
1115+
</div>
1116+
);
1117+
});
1118+
1119+
useImperativeHandle(ref, () => ({
1120+
getModalData() {
1121+
return model;
1122+
},
1123+
set(arr: any[]) {
1124+
model.list = arr;
1125+
forceUpdate();
1126+
},
1127+
}));
1128+
return (
1129+
<>
1130+
<div id="assign-dymic-wrap">{renderMapList}</div>
1131+
</>
1132+
);
1133+
});
1134+
1135+
const ref = React.createRef() as any;
1136+
const { container } = testRender(<TestDemo ref={ref} />);
1137+
1138+
const arr = [
1139+
{ uid: getUuid(), value: 'name' },
1140+
{ uid: getUuid(), value: 'age' },
1141+
];
1142+
ref.current.set(arr);
1143+
1144+
const getWrap = () =>
1145+
container.querySelector('#assign-dymic-wrap') as HTMLDivElement;
1146+
1147+
const getLen = () => {
1148+
const wrap = getWrap();
1149+
return wrap?.children?.length;
1150+
};
1151+
1152+
const checkWrapChildrenLen = () => {
1153+
const len = getLen();
1154+
if (len === 2) {
1155+
return true;
1156+
}
1157+
return Promise.reject();
1158+
};
1159+
1160+
const getInput = (index: number) => {
1161+
const input = container.querySelector(
1162+
`#dymic-assignment-${index}-input`,
1163+
) as HTMLInputElement;
1164+
return input;
1165+
};
1166+
const getInputValue = (index: number) => {
1167+
const input = getInput(index);
1168+
return input.value;
1169+
};
1170+
1171+
const getModal = () => {
1172+
const model = ref.current?.getModalData?.();
1173+
return model;
1174+
};
1175+
1176+
const getModelListValue = (index: number) => {
1177+
const model = getModal();
1178+
const list = model.list || [];
1179+
return list[index].value;
1180+
};
1181+
1182+
await vi.waitFor(() => checkWrapChildrenLen());
1183+
1184+
Array.from(getWrap().children).forEach((v, index) => {
1185+
const inputValue = getInputValue(index);
1186+
expect(inputValue).toBe(arr[index].value);
1187+
expect(inputValue).toBe(getModelListValue(index));
1188+
});
1189+
1190+
fireEvent.change(getInput(0), { target: { value: 'testtest' } });
1191+
1192+
fireEvent.change(getInput(1), { target: { value: 'testtesttwo' } });
1193+
1194+
expect(getModelListValue(0)).toBe(getInputValue(0));
1195+
1196+
expect(getModelListValue(1)).toBe(getInputValue(1));
1197+
1198+
expect(getModelListValue(0)).not.toBe(getInputValue(1));
1199+
});
1200+
test('remove', async ({ expect }) => {
1201+
const TestDemo = React.forwardRef((props, ref) => {
1202+
const { render, model, forceUpdate } = useForm<{
1203+
list: Array<{ uid: string; value: string }>;
1204+
}>({ list: [] });
1205+
const renderMapList = model.list.map((v, index) => {
1206+
const renderRemoveButton = (
1207+
<button
1208+
id={`remove-item-${index}-button`}
1209+
onClick={() => {
1210+
model.list.splice(index, 1);
1211+
forceUpdate();
1212+
}}
1213+
>
1214+
remove!
1215+
</button>
1216+
);
1217+
return (
1218+
<div id={v.uid} key={v.uid}>
1219+
{render(`list.${index}.value`)(
1220+
<input id={`dymic-remove-${index}-input`} />,
1221+
)}
1222+
{renderRemoveButton}
1223+
</div>
1224+
);
1225+
});
1226+
const renderButton = (
1227+
<button
1228+
id="dymic-remove-add-button"
1229+
onClick={() => {
1230+
model.list.push({
1231+
uid: getUuid(),
1232+
value: `${model.list.length}`,
1233+
});
1234+
forceUpdate();
1235+
}}
1236+
>
1237+
add
1238+
</button>
1239+
);
1240+
useImperativeHandle(ref, () => ({
1241+
getModalData() {
1242+
return model;
1243+
},
1244+
set(arr: any[]) {
1245+
model.list = arr;
1246+
forceUpdate();
1247+
},
1248+
}));
1249+
return (
1250+
<>
1251+
<div id="remove-dymic-wrap">{renderMapList}</div>
1252+
{renderButton}
1253+
</>
1254+
);
1255+
});
1256+
1257+
const demoRef = React.createRef() as any;
1258+
1259+
const { container } = testRender(<TestDemo ref={demoRef} />);
1260+
const addItem = (count: number = 1) => {
1261+
const button = container.querySelector(
1262+
'#dymic-remove-add-button',
1263+
) as HTMLButtonElement;
1264+
Array.from({ length: count }, (x, y) => y).forEach(() => {
1265+
button.click();
1266+
});
1267+
};
1268+
1269+
addItem(2);
1270+
1271+
const getWrap = () =>
1272+
container.querySelector('#remove-dymic-wrap') as HTMLDivElement;
1273+
1274+
const getLen = () => {
1275+
const wrap = getWrap();
1276+
return wrap?.children?.length;
1277+
};
1278+
1279+
const checkWrapChildrenLen = () => {
1280+
const len = getLen();
1281+
if (len === 2) {
1282+
return true;
1283+
}
1284+
return Promise.reject();
1285+
};
1286+
await vi.waitFor(() => checkWrapChildrenLen(), {
1287+
timeout: 100,
1288+
interval: 10,
1289+
});
1290+
1291+
const len = getLen();
1292+
expect(len).toBeGreaterThan(0);
1293+
const getInput = (index: number) => {
1294+
const input = container.querySelector(
1295+
`#dymic-remove-${index}-input`,
1296+
) as HTMLInputElement;
1297+
return input;
1298+
};
1299+
const getInputValue = (index: number) => {
1300+
const input = getInput(index);
1301+
return input.value;
1302+
};
1303+
const checkInputValue = () => {
1304+
const wrap = getWrap();
1305+
const children = wrap.children;
1306+
Array.from(children).forEach((v, index) => {
1307+
const value = getInputValue(index);
1308+
expect(Number(value)).toBe(index);
1309+
});
1310+
};
1311+
checkInputValue();
1312+
const removeAction = async () => {
1313+
const removeButton = container.querySelector(
1314+
'#remove-item-0-button',
1315+
) as HTMLButtonElement;
1316+
1317+
removeButton.click();
1318+
await vi.waitFor(() => {
1319+
const len = getLen();
1320+
if (len === 1) {
1321+
return true;
1322+
}
1323+
return Promise.reject();
1324+
});
1325+
// checkInputValue();
1326+
1327+
addItem();
1328+
1329+
const changeInputValue = (index: number) => {
1330+
const input = getInput(index);
1331+
fireEvent.change(input, { target: { value: 'testtest' } });
1332+
};
1333+
1334+
await vi.waitFor(() => {
1335+
const len = getLen();
1336+
if (len === 2) return true;
1337+
return Promise.reject();
1338+
});
1339+
1340+
changeInputValue(0);
1341+
1342+
expect(getInputValue(0)).toBe('testtest');
1343+
1344+
expect(getInputValue(0)).not.toBe(getInputValue(1));
1345+
const getModal = () => {
1346+
const model = demoRef.current?.getModalData?.();
1347+
return model;
1348+
};
1349+
const getModelListValue = (index: number) => {
1350+
const model = getModal();
1351+
const list = model.list || [];
1352+
return list[index].value;
1353+
};
1354+
1355+
expect(getModelListValue(0)).toBe(getInputValue(0));
1356+
expect(getModelListValue(0)).not.toBe(getModelListValue(1));
1357+
1358+
return Promise.resolve();
1359+
};
1360+
1361+
await removeAction();
1362+
});
1363+
test('add', async ({ expect }) => {
1364+
const TestDemo = React.forwardRef((props, ref) => {
1365+
const { render, model, forceUpdate } = useForm<{
1366+
list: Array<{ uid: string; value: string }>;
1367+
}>({ list: [] });
1368+
const renderMapList = model.list.map((v, index) => {
1369+
return (
1370+
<div key={v.uid} id={v.uid}>
1371+
{render(`list.${index}.value`)(
1372+
<input id={`dymic-${index}-input`} />,
1373+
)}
1374+
</div>
1375+
);
1376+
});
1377+
const renderButton = (
1378+
<button
1379+
id="dymic-add-button"
1380+
onClick={() => {
1381+
model.list.push({
1382+
uid: getUuid(),
1383+
value: `${model.list.length}`,
1384+
});
1385+
forceUpdate();
1386+
}}
1387+
>
1388+
add
1389+
</button>
1390+
);
1391+
useImperativeHandle(ref, () => ({}));
1392+
return (
1393+
<>
1394+
<div id="add-dymic-wrap">{renderMapList}</div>
1395+
{renderButton}
1396+
</>
1397+
);
1398+
});
1399+
const { container } = testRender(<TestDemo />);
1400+
const button = container.querySelector(
1401+
'#dymic-add-button',
1402+
) as HTMLButtonElement;
1403+
button.click();
1404+
await vi.waitFor(
1405+
() => {
1406+
const wrap = container.querySelector(
1407+
'#add-dymic-wrap',
1408+
) as HTMLDivElement;
1409+
if (wrap.children.length > 0) {
1410+
return true;
1411+
}
1412+
return Promise.reject();
1413+
},
1414+
{ timeout: 100, interval: 10 },
1415+
);
1416+
const wrap = container.querySelector('#add-dymic-wrap') as HTMLDivElement;
1417+
expect(wrap.children.length).toBeGreaterThan(0);
1418+
const children = wrap.children;
1419+
Array.from(children).forEach((v, index) => {
1420+
const input = container.querySelector(
1421+
`#dymic-${index}-input`,
1422+
) as HTMLInputElement;
1423+
expect(Number(input.value)).toBe(index);
1424+
});
1425+
});
1426+
});
11031427
});

0 commit comments

Comments
 (0)