Fix tests and stories

Author: djhi

packages/ra-core/src/controller/useReference.spec.tsx

@@ -130,15 +130,19 @@ describe('useReference', () => {
             referenceRecord: undefined,
             isFetching: true,
             isLoading: true,
+            isPaused: false,
             isPending: true,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });
         expect(hookValue.mock.calls[1][0]).toEqual({
             referenceRecord: { id: 1, title: 'foo' },
             isFetching: false,
             isLoading: false,
+            isPaused: false,
             isPending: false,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });
@@ -170,15 +174,19 @@ describe('useReference', () => {
             referenceRecord: { id: 1, title: 'foo' },
             isFetching: true,
             isLoading: false,
+            isPaused: false,
             isPending: false,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });
         expect(hookValue.mock.calls[1][0]).toEqual({
             referenceRecord: { id: 1, title: 'foo' },
             isFetching: false,
             isLoading: false,
+            isPaused: false,
             isPending: false,
+            isPlaceholderData: false,
             error: null,
             refetch: expect.any(Function),
         });

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

@@ -25,6 +25,7 @@ import {
     SXLink,
     SXNoLink,
     SlowAccessControl,
+    ErrorWhileFetching,
 } from './ReferenceField.stories';
 import { TextField } from './TextField';
 
@@ -459,29 +460,8 @@ describe('<ReferenceField />', () => {
 
     it('should display an error icon if the dataProvider call fails', async () => {
         jest.spyOn(console, 'error').mockImplementation(() => {});
-        const dataProvider = testDataProvider({
-            getMany: jest.fn().mockRejectedValue(new Error('boo')),
-        });
-        render(
-            <ThemeProvider theme={theme}>
-                <CoreAdminContext dataProvider={dataProvider}>
-                    <ReferenceField
-                        record={record}
-                        resource="comments"
-                        source="postId"
-                        reference="posts"
-                    >
-                        <TextField source="title" />
-                    </ReferenceField>
-                </CoreAdminContext>
-            </ThemeProvider>
-        );
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const ErrorIcon = screen.queryByRole('presentation', {
-            hidden: true,
-        });
-        expect(ErrorIcon).not.toBeNull();
-        await screen.findByText('boo');
+        render(<ErrorWhileFetching />);
+        await screen.findByText('ra.notification.http_error');
     });
 
     describe('link', () => {

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

@@ -12,11 +12,11 @@ import ErrorIcon from '@mui/icons-material/Error';
 import {
     type LinkToType,
     useGetRecordRepresentation,
-    useTranslate,
     type RaRecord,
     ReferenceFieldBase,
     useReferenceFieldContext,
     useFieldValue,
+    Translate,
 } from 'ra-core';
 import type { UseQueryOptions } from '@tanstack/react-query';
 import clsx from 'clsx';
@@ -68,13 +68,12 @@ export const ReferenceField = <
         name: PREFIX,
     });
     const { emptyText } = props;
-    const translate = useTranslate();
     const id = useFieldValue(props);
 
     if (id == null) {
         return emptyText ? (
             <Typography component="span" variant="body2">
-                {emptyText && translate(emptyText, { _: emptyText })}
+                <Translate i18nKey={emptyText}>{emptyText}</Translate>
             </Typography>
         ) : null;
     }
@@ -124,7 +123,6 @@ export const ReferenceFieldView = <
         useReferenceFieldContext();
 
     const getRecordRepresentation = useGetRecordRepresentation(reference);
-    const translate = useTranslate();
 
     if (error) {
         return (
@@ -135,9 +133,9 @@ export const ReferenceFieldView = <
                     variant="body2"
                     sx={{ color: 'error.main' }}
                 >
-                    {translate('ra.notification.http_error', {
-                        _: 'Server communication error',
-                    })}
+                    <Translate i18nKey="ra.notification.http_error">
+                        Server communication error
+                    </Translate>
                 </Typography>
             </Stack>
         );
@@ -163,7 +161,13 @@ export const ReferenceFieldView = <
                             variant="body2"
                             sx={{ color: 'error.main' }}
                         >
-                            {offline && translate(offline, { _: offline })}
+                            {typeof offline === 'string' ? (
+                                <Translate i18nKey={offline}>
+                                    {offline}
+                                </Translate>
+                            ) : (
+                                offline
+                            )}
                         </Typography>
                     </Stack>
                 );
@@ -173,7 +177,7 @@ export const ReferenceFieldView = <
         }
         return emptyText ? (
             <Typography component="span" variant="body2">
-                {emptyText && translate(emptyText, { _: emptyText })}
+                <Translate i18nKey={emptyText}>{emptyText}</Translate>
             </Typography>
         ) : null;
     }

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

@@ -17,7 +17,7 @@ describe('<ReferenceManyCount />', () => {
     it('should render an error icon when the request fails', async () => {
         jest.spyOn(console, 'error').mockImplementation(() => {});
         render(<ErrorState />);
-        await screen.findByTitle('error');
+        await screen.findByText('Server communication error');
     });
     it('should accept a filter prop', async () => {
         render(<WithFilter />);

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

@@ -6,8 +6,14 @@ import {
     useCreatePath,
     SortPayload,
     RaRecord,
+    Translate,
 } from 'ra-core';
-import { Typography, TypographyProps, CircularProgress } from '@mui/material';
+import {
+    Typography,
+    TypographyProps,
+    CircularProgress,
+    Stack,
+} from '@mui/material';
 import ErrorIcon from '@mui/icons-material/Error';
 
 import { FieldProps } from './types';
@@ -78,11 +84,18 @@ export const ReferenceManyCount = <RecordType extends RaRecord = RaRecord>(
 
     if (error) {
         body = (
-            <ErrorIcon
-                color="error"
-                fontSize="small"
-                titleAccess={error.message}
-            />
+            <Stack direction="row" alignItems="center" gap={1}>
+                <ErrorIcon role="presentation" color="error" fontSize="small" />
+                <Typography
+                    component="span"
+                    variant="body2"
+                    sx={{ color: 'error.main' }}
+                >
+                    <Translate i18nKey="ra.notification.http_error">
+                        Server communication error
+                    </Translate>
+                </Typography>
+            </Stack>
         );
     }
 

packages/ra-ui-materialui/src/input/InPlaceEditor/InPlaceEditor.spec.tsx

@@ -4,6 +4,9 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { Basic } from './InPlaceEditor.stories';
 
 describe('InPlaceEditor', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
     it('should render the field value on mount', async () => {
         render(<Basic delay={0} />);
         await screen.findByText('John Doe');
@@ -24,6 +27,7 @@ describe('InPlaceEditor', () => {
         await screen.findByText('Jane Doe');
     });
     it('should revert to the previous version on error', async () => {
+        jest.spyOn(console, 'error').mockImplementation(() => {});
         render(<Basic delay={0} updateFails />);
         const value = await screen.findByText('John Doe');
         value.click();