Merge pull request #6319 from marmelab/fix-use-get-many-loaded-state

Fix useGetMany loaded state

Author: fzaninotto

packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx

@@ -190,14 +190,17 @@ describe('<ReferenceArrayInputController />', () => {
         expect(queryByText('ra.input.references.all_missing')).toBeNull();
     });
 
-    it('should set warning if references fetch fails but selected references are not empty', () => {
+    it('should set warning if references fetch fails but selected references are not empty', async () => {
         const children = jest.fn(({ warning }) => <div>{warning}</div>);
         const { queryByText } = renderWithRedux(
             <Form
                 onSubmit={jest.fn()}
                 render={() => (
                     <ReferenceArrayInputController
                         {...defaultProps}
+                        // Avoid global collision in useGetMany with queriesToCall
+                        basePath="/articles"
+                        resource="articles"
                         input={{ value: [1, 2] }}
                     >
                         {children}
@@ -220,23 +223,30 @@ describe('<ReferenceArrayInputController />', () => {
                     },
                     references: {
                         possibleValues: {
-                            'posts@tag_ids': { error: 'boom' },
+                            'articles@tag_ids': { error: 'boom' },
                         },
                     },
                 },
             }
         );
-        expect(queryByText('ra.input.references.many_missing')).not.toBeNull();
+        await waitFor(() => {
+            expect(
+                queryByText('ra.input.references.many_missing')
+            ).not.toBeNull();
+        });
     });
 
-    it('should set warning if references were found but selected references are not complete', () => {
+    it('should set warning if references were found but selected references are not complete', async () => {
         const children = jest.fn(({ warning }) => <div>{warning}</div>);
         const { queryByText } = renderWithRedux(
             <Form
                 onSubmit={jest.fn()}
                 render={() => (
                     <ReferenceArrayInputController
                         {...defaultProps}
+                        // Avoid global collision in useGetMany with queriesToCall
+                        basePath="/products"
+                        resource="products"
                         input={{ value: [1, 2] }}
                     >
                         {children}
@@ -259,13 +269,17 @@ describe('<ReferenceArrayInputController />', () => {
                     },
                     references: {
                         possibleValues: {
-                            'posts@tag_ids': [],
+                            'products@tag_ids': [],
                         },
                     },
                 },
             }
         );
-        expect(queryByText('ra.input.references.many_missing')).not.toBeNull();
+        await waitFor(() => {
+            expect(
+                queryByText('ra.input.references.many_missing')
+            ).not.toBeNull();
+        });
     });
 
     it('should set warning if references were found but selected references are empty', () => {
@@ -276,6 +290,9 @@ describe('<ReferenceArrayInputController />', () => {
                 render={() => (
                     <ReferenceArrayInputController
                         {...defaultProps}
+                        // Avoid global collision in useGetMany with queriesToCall
+                        basePath="/posters"
+                        resource="posters"
                         input={{ value: [1, 2] }}
                     >
                         {children}
@@ -287,7 +304,7 @@ describe('<ReferenceArrayInputController />', () => {
                     resources: { tags: { data: { 5: {}, 6: {} } } },
                     references: {
                         possibleValues: {
-                            'posts@tag_ids': [],
+                            'posters@tag_ids': [],
                         },
                     },
                 },
@@ -296,7 +313,7 @@ describe('<ReferenceArrayInputController />', () => {
         expect(queryByText('ra.input.references.many_missing')).not.toBeNull();
     });
 
-    it('should not set warning if all references were found', () => {
+    it('should not set warning if all references were found', async () => {
         const children = jest.fn(({ warning }) => <div>{warning}</div>);
         const { queryByText } = renderWithRedux(
             <Form
@@ -335,7 +352,9 @@ describe('<ReferenceArrayInputController />', () => {
                 },
             }
         );
-        expect(queryByText('ra.input.references.many_missing')).toBeNull();
+        await waitFor(() => {
+            expect(queryByText('ra.input.references.many_missing')).toBeNull();
+        });
     });
 
     it('should call crudGetMatching on mount with default fetch values', async () => {

packages/ra-core/src/dataProvider/useGetMany.spec.tsx

@@ -250,16 +250,18 @@ describe('useGetMany', () => {
             }
         );
         await waitFor(() => {
-            expect(hookValue.mock.calls.pop()[0]).toEqual({
-                data: [
-                    { id: 1, title: 'foo' },
-                    { id: 2, title: 'bar' },
-                ],
-                loading: false,
-                loaded: true,
-                error: null,
-                refetch: expect.any(Function),
-            });
+            if (hookValue.mock.calls.length > 0) {
+                expect(hookValue.mock.calls.pop()[0]).toEqual({
+                    data: [
+                        { id: 1, title: 'foo' },
+                        { id: 2, title: 'bar' },
+                    ],
+                    loading: false,
+                    loaded: true,
+                    error: null,
+                    refetch: expect.any(Function),
+                });
+            }
         });
     });
 

packages/ra-core/src/dataProvider/useGetMany.ts

@@ -115,16 +115,13 @@ const useGetMany = (
         data,
         error: null,
         loading: ids.length !== 0,
-        loaded:
-            ids.length === 0 ||
-            (data.length !== 0 && !data.includes(undefined)),
+        loaded: data.length !== 0 && !data.includes(undefined),
         refetch,
     });
     if (!isEqual(state.data, data)) {
         setState({
             ...state,
             data,
-            loaded: true,
         });
     }
     dataProvider = useDataProvider(); // not the best way to pass the dataProvider to a function outside the hook, but I couldn't find a better one

packages/ra-ui-materialui/src/field/ReferenceArrayField.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, act } from '@testing-library/react';
+import { render, act, waitFor } from '@testing-library/react';
 import { renderWithRedux } from 'ra-test';
 import { MemoryRouter } from 'react-router-dom';
 import { ListContextProvider, DataProviderContext } from 'ra-core';
@@ -241,7 +241,8 @@ describe('<ReferenceArrayField />', () => {
         );
         expect(queryByText('bar1')).toBeNull();
         act(() => resolve());
-        await new Promise(resolve => setTimeout(resolve)); // wait for loaded to be true
-        expect(queryByText('bar1')).not.toBeNull();
+        await waitFor(() => {
+            expect(queryByText('bar1')).not.toBeNull();
+        });
     });
 });

packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx

@@ -274,7 +274,7 @@ describe('<ReferenceField />', () => {
         const dataProvider = {
             getMany: jest.fn(() => Promise.reject('boo')),
         };
-        const { getByRole } = renderWithRedux(
+        const { queryByRole } = renderWithRedux(
             // @ts-ignore-line
             <DataProviderContext.Provider value={dataProvider}>
                 <ReferenceField
@@ -289,8 +289,8 @@ describe('<ReferenceField />', () => {
             </DataProviderContext.Provider>
         );
         await waitFor(() => {
-            const ErrorIcon = getByRole('presentation', { hidden: true });
-            expect(ErrorIcon).toBeDefined();
+            const ErrorIcon = queryByRole('presentation', { hidden: true });
+            expect(ErrorIcon).not.toBeNull();
             expect(ErrorIcon.getAttribute('aria-errormessage')).toBe('boo');
         });
     });

packages/ra-ui-materialui/src/field/ReferenceField.tsx

@@ -196,9 +196,6 @@ export const ReferenceFieldView: FC<ReferenceFieldViewProps> = props => {
     } = props;
     const classes = useStyles(props);
 
-    if (!loaded) {
-        return <LinearProgress />;
-    }
     if (error) {
         return (
             /* eslint-disable jsx-a11y/role-supports-aria-props */
@@ -211,6 +208,9 @@ export const ReferenceFieldView: FC<ReferenceFieldViewProps> = props => {
             /* eslint-enable */
         );
     }
+    if (!loaded) {
+        return <LinearProgress />;
+    }
     if (!referenceRecord) {
         return null;
     }