From 728e87109fab4c8a23ee8e569f9e15094792adcb Mon Sep 17 00:00:00 2001 From: erwanMarmelab Date: Wed, 30 Apr 2025 10:43:14 +0200 Subject: [PATCH 1/5] simplify test --- .../src/input/ArrayInput/ArrayInput.spec.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx index 51b74aa3ad6..e296ddf781e 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx @@ -459,22 +459,25 @@ describe('', () => { }); }); - it('should empty the input on form reset', async () => { - render(); - fireEvent.click(await screen.findByRole('button', { name: 'Add' })); - fireEvent.change(screen.getByLabelText('Name'), { - target: { value: 'Leo Tolstoy' }, - }); - fireEvent.change(screen.getByLabelText('Role'), { - target: { value: 'Writer' }, - }); - fireEvent.click(screen.getByRole('button', { name: 'Reset' })); - await waitFor(() => { - expect(screen.queryByDisplayValue('Leo Tolstoy')).toBeNull(); - expect(screen.queryByDisplayValue('Writer')).toBeNull(); - expect( - screen.queryByRole('button', { name: 'Clear the list' }) - ).toBeNull(); + describe('should empty the input on form reset', () => { + it('should remove a filled line twice', async () => { + render(); + + expect(screen.queryAllByRole('listitem')).toHaveLength(0); + + fireEvent.click(await screen.findByRole('button', { name: 'Add' })); + fireEvent.change(screen.getByLabelText('Name'), { + target: { value: 'Leo Tolstoy' }, + }); + fireEvent.change(screen.getByLabelText('Role'), { + target: { value: 'Writer' }, + }); + + expect(screen.queryAllByRole('listitem')).toHaveLength(1); + fireEvent.click(screen.getByRole('button', { name: 'Reset' })); + await waitFor(() => { + expect(screen.queryAllByRole('listitem')).toHaveLength(0); + }); }); }); }); From c309ab65c5cfd777fb3394a4b00eb28be7c50970 Mon Sep 17 00:00:00 2001 From: erwanMarmelab Date: Wed, 30 Apr 2025 15:02:54 +0200 Subject: [PATCH 2/5] add tests --- .../src/input/ArrayInput/ArrayInput.spec.tsx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx index e296ddf781e..3e9e0bb44ed 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx @@ -478,6 +478,42 @@ describe('', () => { await waitFor(() => { expect(screen.queryAllByRole('listitem')).toHaveLength(0); }); + + fireEvent.click(await screen.findByRole('button', { name: 'Add' })); + fireEvent.change(screen.getByLabelText('Name'), { + target: { value: 'Leo Tolstoy' }, + }); + fireEvent.change(screen.getByLabelText('Role'), { + target: { value: 'Writer' }, + }); + + expect(screen.queryAllByRole('listitem')).toHaveLength(1); + fireEvent.click(screen.getByRole('button', { name: 'Reset' })); + await waitFor(() => { + expect(screen.queryAllByRole('listitem')).toHaveLength(0); // TODO: fix it + }); + }); + + it('should remove an empty line twice', async () => { + render(); + + expect(screen.queryAllByRole('listitem')).toHaveLength(0); + + fireEvent.click(await screen.findByRole('button', { name: 'Add' })); + + expect(screen.queryAllByRole('listitem')).toHaveLength(1); + fireEvent.click(screen.getByRole('button', { name: 'Reset' })); + await waitFor(() => { + expect(screen.queryAllByRole('listitem')).toHaveLength(0); + }); + + fireEvent.click(await screen.findByRole('button', { name: 'Add' })); + + expect(screen.queryAllByRole('listitem')).toHaveLength(1); + fireEvent.click(screen.getByRole('button', { name: 'Reset' })); + await waitFor(() => { + expect(screen.queryAllByRole('listitem')).toHaveLength(0); // TODO: fix it + }); }); }); }); From 14fb192fa8986c1dcf956b258eb47601dca3335c Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Tue, 6 May 2025 10:47:28 +0200 Subject: [PATCH 3/5] Fix multiple reset issue --- .../input/ArrayInput/ArrayInput.stories.tsx | 5 +- .../ArrayInput/SimpleFormIterator.spec.tsx | 28 ++++++---- .../ArrayInput/SimpleFormIterator.stories.tsx | 53 +++++++++++++++++++ .../input/ArrayInput/SimpleFormIterator.tsx | 8 ++- 4 files changed, 75 insertions(+), 19 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx index 759d5efa7e4..8588c226888 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx @@ -12,7 +12,6 @@ import { Resource, testI18nProvider, TestMemoryRouter, - useCreatePath, useSourceContext, } from 'ra-core'; import { Button, InputAdornment, Stack } from '@mui/material'; @@ -970,10 +969,8 @@ const BookCreateReset = () => { }; export const Reset = () => { - const createPath = useCreatePath(); - const initialEntrie = createPath({ resource: 'books', type: 'create' }); return ( - + diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx index 36a01fd89df..277f83f876f 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx @@ -456,16 +456,24 @@ describe('', () => { expect(inputElements.length).toBe(1); }); - expect( - screen - .queryAllByLabelText('Email') - .map(inputElement => (inputElement as HTMLInputElement).value) - ).toEqual(['']); - expect( - screen - .queryAllByLabelText('Name') - .map(inputElement => (inputElement as HTMLInputElement).value) - ).toEqual(['']); + await waitFor(() => { + expect( + screen + .queryAllByLabelText('Email') + .map( + inputElement => (inputElement as HTMLInputElement).value + ) + ).toEqual(['']); + }); + await waitFor(() => { + expect( + screen + .queryAllByLabelText('Name') + .map( + inputElement => (inputElement as HTMLInputElement).value + ) + ).toEqual(['']); + }); expect(screen.queryAllByLabelText('ra.action.remove').length).toBe(1); }); diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx index 03505e4d6fe..d08257a7d09 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx @@ -9,6 +9,11 @@ import { TextInput } from '../TextInput'; import { AdminContext } from '../../AdminContext'; import { defaultTheme } from '../../theme/defaultTheme'; import { useSimpleFormIteratorItem } from './useSimpleFormIteratorItem'; +import { + FormDataConsumer, + ResourceContextProvider, + testDataProvider, +} from 'ra-core'; export default { title: 'ra-ui-materialui/input/SimpleFormIterator' }; @@ -231,3 +236,51 @@ export const UseSimpleFormIteratorItem = () => ( ); + +export const DefaultValue = () => ( + + + + + + + + + + + + +); + +export const DefaultValueWithFormDataConsumer = () => ( + + + + + + + {() => ( + <> + + + + )} + + + + + + +); diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx index b1a677417a4..eab4ca55a1b 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx @@ -66,7 +66,7 @@ export const SimpleFormIterator = (inProps: SimpleFormIteratorProps) => { const [confirmIsOpen, setConfirmIsOpen] = useState(false); const { append, fields, move, remove, replace } = useArrayInput(props); - const { resetField, trigger, getValues } = useFormContext(); + const { trigger, getValues } = useFormContext(); const translate = useTranslate(); const record = useRecordContext(props); const initialDefaultValue = useRef({}); @@ -105,7 +105,7 @@ export const SimpleFormIterator = (inProps: SimpleFormIteratorProps) => { !Children.only(children).props.source && // Make sure it's not a FormDataConsumer // @ts-ignore - !Children.only(children).type !== FormDataConsumer + Children.only(children).type !== FormDataConsumer ) { // ArrayInput used for an array of scalar values // (e.g. tags: ['foo', 'bar']) @@ -128,10 +128,8 @@ export const SimpleFormIterator = (inProps: SimpleFormIteratorProps) => { } } append(defaultValue); - // Make sure the newly added inputs are not considered dirty by react-hook-form - resetField(`${finalSource}.${fields.length}`, { defaultValue }); }, - [append, children, resetField, finalSource, fields.length] + [append, children] ); const handleReorder = useCallback( From 4a8d31e367071dbd1799132212ce5ac8882645c0 Mon Sep 17 00:00:00 2001 From: Gildas <1122076+djhi@users.noreply.github.com> Date: Tue, 6 May 2025 15:19:40 +0200 Subject: [PATCH 4/5] Use stories in tests --- .../ArrayInput/SimpleFormIterator.spec.tsx | 50 +++---------------- 1 file changed, 7 insertions(+), 43 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx index 277f83f876f..280a4d56006 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.spec.tsx @@ -18,7 +18,11 @@ import { SimpleForm } from '../../form'; import { ArrayInput } from './ArrayInput'; import { TextInput } from '../TextInput'; import { SimpleFormIterator } from './SimpleFormIterator'; -import { Basic } from './SimpleFormIterator.stories'; +import { + Basic, + DefaultValue, + DefaultValueWithFormDataConsumer, +} from './SimpleFormIterator.stories'; describe('', () => { // bypass confirm leave form with unsaved changes @@ -418,22 +422,7 @@ describe('', () => { }); it('should not reapply default values set at form level after removing and then re-adding one row', async () => { - render( - - - - - - - - - - - ); + render(); const removeFirstButton = getByLabelText( // @ts-ignore @@ -479,32 +468,7 @@ describe('', () => { }); it('should not reapply default values set at form level after removing and then re-adding one row, even with FormDataConsumer', async () => { - render( - - - - - - {() => ( - <> - - - - )} - - - - - - ); + render(); const removeFirstButton = getByLabelText( // @ts-ignore From 3e026ff7223c7ae42107a220c0a84467a2f2a3e1 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Thu, 15 May 2025 15:36:17 +0200 Subject: [PATCH 5/5] Remove obsolete comments --- .../ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx index 3e9e0bb44ed..1da18ab454b 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.spec.tsx @@ -490,7 +490,7 @@ describe('', () => { expect(screen.queryAllByRole('listitem')).toHaveLength(1); fireEvent.click(screen.getByRole('button', { name: 'Reset' })); await waitFor(() => { - expect(screen.queryAllByRole('listitem')).toHaveLength(0); // TODO: fix it + expect(screen.queryAllByRole('listitem')).toHaveLength(0); }); }); @@ -512,7 +512,7 @@ describe('', () => { expect(screen.queryAllByRole('listitem')).toHaveLength(1); fireEvent.click(screen.getByRole('button', { name: 'Reset' })); await waitFor(() => { - expect(screen.queryAllByRole('listitem')).toHaveLength(0); // TODO: fix it + expect(screen.queryAllByRole('listitem')).toHaveLength(0); }); }); });