),
+ };
+}
diff --git a/packages/ts/react-form/test/useForm.spec.tsx b/packages/ts/react-form/test/useForm.spec.tsx
index 01f0509c66..09361f65e3 100644
--- a/packages/ts/react-form/test/useForm.spec.tsx
+++ b/packages/ts/react-form/test/useForm.spec.tsx
@@ -6,7 +6,7 @@ import chaiDom from 'chai-dom';
import { useEffect, useState } from 'react';
import sinon from 'sinon';
import sinonChai from 'sinon-chai';
-import { useForm as _useForm, useFormPart } from '../src/index.js';
+import { useForm as _useForm, useFormArrayPart, useFormPart } from '../src/index.js';
import {
type Contract,
EntityModel,
@@ -16,7 +16,6 @@ import {
type PlayerModel,
type Project,
TeamModel,
- type Team,
type Player,
} from './models.js';
@@ -373,131 +372,83 @@ describe('@vaadin/hilla-react-form', () => {
});
});
- function TeamFormPlayer({ model }: { model: PlayerModel }) {
- const { field, value, invalid, ownErrors } = useFormPart(model);
+ describe('arrays', () => {
+ let updatePlayers: (updater: (oldPlayers: Player[]) => Player[]) => void;
+
+ function TeamFormPlayer({ model }: { model: PlayerModel }) {
+ const { field, value, invalid, ownErrors } = useFormPart(model);
+
+ return (
+
+
+
+
+ );
+ }
- return (
-
-
-
-
- );
- }
+ function TeamForm({ initialPlayers }: { initialPlayers: Player[] }) {
+ const { field, model, read } = useForm(TeamModel);
+ const name = useFormPart(model.name);
+ const { items, value, setValue } = useFormArrayPart(model.players);
- function TeamForm({
- testAction,
- }: {
- testAction({
- read,
- value,
- setValue,
- }: {
- read(value: Team | null | undefined): void;
- value: Player[] | undefined;
- setValue(value: Player[] | undefined): void;
- }): void;
- }) {
- const { field, model, read } = useForm(TeamModel);
- const name = useFormPart(model.name);
- const { value, setValue } = useFormPart(model.players);
-
- useEffect(() => {
- testAction({ read, value, setValue });
- }, []);
+ updatePlayers = (updater) => {
+ setValue(updater(value ?? []));
+ };
- return (
- <>
-
-
- {Array.from(model.players, (player) => (
-
- ))}
-
- );
- }
+ useEffect(() => {
+ read({
+ id: 1,
+ name: 'Team 1',
+ players: initialPlayers,
+ });
+ }, []);
+
+ return (
+ <>
+
+
+ {items.map((player, index) => (
+
+ ))}
+
+ );
+ }
- describe('arrays', () => {
const player1 = { id: 10, firstName: 'John', lastName: 'Doe', age: 27 };
const player2 = { id: 20, firstName: 'Jane', lastName: 'Smith', age: 28 };
it('should iterate on array items', async () => {
- const { findByTestId } = render(
- {
- read({
- id: 1,
- name: 'Team 1',
- players: [player1, player2],
- });
- }}
- />,
- );
+ const { findByTestId } = render();
expect(await findByTestId('team.name')).to.have.value('Team 1');
expect(await findByTestId('lastName.10')).to.have.value('Doe');
});
it('should add item to empty array', async () => {
- const { findByTestId } = render(
- {
- read({
- id: 1,
- name: 'Team 1',
- players: [],
- });
- setValue([...value!, player1]);
- }}
- />,
- );
+ const { findByTestId } = render();
+ updatePlayers((oldPlayers) => [...oldPlayers, player1]);
expect(await findByTestId('lastName.10')).to.have.value('Doe');
});
it('should add item to existing array', async () => {
- let val: Player[] | undefined;
- let setVal: ((value: Player[] | undefined) => void) | undefined;
- const { findByTestId } = render(
- {
- val = value;
- setVal = setValue;
- read({
- id: 1,
- name: 'Team 1',
- players: [player1],
- });
- }}
- />,
- );
+ const { findByTestId } = render();
expect(await findByTestId('lastName.10')).to.have.value('Doe');
- setVal!([...val!, player2]);
+ updatePlayers((oldPlayers) => [...oldPlayers, player2]);
expect(await findByTestId('lastName.20')).to.have.value('Smith');
});
it('should remove item from array', async () => {
- let setVal: (value: Player[] | undefined) => void;
- const { findByTestId } = render(
- {
- setVal = setValue;
- read({
- id: 1,
- name: 'Team 1',
- players: [player1, player2],
- });
- }}
- />,
- );
+ const { findByTestId } = render();
const lastName = await findByTestId('lastName.10');
expect(lastName).to.exist;
- setVal!([player2]);
+ updatePlayers(() => [player2]);
await waitForElementToBeRemoved(lastName);
});
});
diff --git a/pom.xml b/pom.xml
index d85b789fdc..05d574ae21 100644
--- a/pom.xml
+++ b/pom.xml
@@ -78,7 +78,7 @@
24.5-SNAPSHOT
2.0.9
3.2.6
- 9.3.0
+ 9.3.1
3.0.2
2.1.1
2.1.2
@@ -255,7 +255,7 @@
commons-io
commons-io
- 2.13.0
+ 2.16.1
junit