Add unit tests for all themed inputs.

Madeorsk · Madeorsk · commit b2e1a50bf52a · 2025-06-12T11:15:43.000+02:00
diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.spec.tsx b/packages/ra-ui-materialui/src/input/BooleanInput.spec.tsx
@@ -5,6 +5,7 @@ import { ResourceContextProvider, testDataProvider } from 'ra-core';
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
 import { BooleanInput } from './BooleanInput';
+import { Themed } from './BooleanInput.stories';
 
 describe('<BooleanInput />', () => {
     const defaultProps = {
@@ -185,4 +186,9 @@ describe('<BooleanInput />', () => {
             expect(screen.queryByText('ra.validation.error')).not.toBeNull();
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.stories.tsx b/packages/ra-ui-materialui/src/input/BooleanInput.stories.tsx
@@ -83,6 +83,9 @@ export const Themed = () => (
         theme={deepmerge(createTheme(), {
             components: {
                 RaBooleanInput: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
                     styleOverrides: {
                         root: {
                             color: 'red',
diff --git a/packages/ra-ui-materialui/src/input/DatagridInput.spec.tsx b/packages/ra-ui-materialui/src/input/DatagridInput.spec.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Themed } from './DatagridInput.stories';
+
+describe('<DatagridInput />', () => {
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
+});
diff --git a/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx b/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx
@@ -167,6 +167,9 @@ export const Themed = () => (
             theme={deepmerge(createTheme(), {
                 components: {
                     RaDatagridInput: {
+                        defaultProps: {
+                            'data-testid': 'themed',
+                        },
                         styleOverrides: {
                             root: {
                                 ['& .MuiTypography-root']: {
diff --git a/packages/ra-ui-materialui/src/input/DatagridInput.tsx b/packages/ra-ui-materialui/src/input/DatagridInput.tsx
@@ -25,6 +25,7 @@ import {
     FilterContext,
 } from '../list';
 import { Pagination as DefaultPagination } from '../list/pagination';
+import { sanitizeInputRestProps } from './sanitizeInputRestProps';
 
 const defaultPagination = <DefaultPagination />;
 
@@ -160,7 +161,7 @@ export const DatagridInput = (inProps: DatagridInputProps) => {
                 ) : null}
                 {!fieldState.error && !fetchError && (
                     <>
-                        <Datagrid {...rest} />
+                        <Datagrid {...sanitizeInputRestProps(rest)} />
                         {pagination !== false && pagination}
                     </>
                 )}
diff --git a/packages/ra-ui-materialui/src/input/DateInput.spec.tsx b/packages/ra-ui-materialui/src/input/DateInput.spec.tsx
@@ -14,6 +14,7 @@ import {
     ExternalChanges,
     ExternalChangesWithParse,
     Parse,
+    Themed,
 } from './DateInput.stories';
 
 describe('<DateInput />', () => {
@@ -319,4 +320,9 @@ describe('<DateInput />', () => {
             await screen.findByText('Required');
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/DateInput.stories.tsx b/packages/ra-ui-materialui/src/input/DateInput.stories.tsx
@@ -155,6 +155,9 @@ export const Themed = ({
         theme={deepmerge(createTheme(), {
             components: {
                 RaDateInput: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
                     styleOverrides: {
                         root: {
                             ['& input']: {
diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.spec.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.spec.tsx
@@ -14,6 +14,7 @@ import { SaveButton } from '../button';
 import {
     ExternalChanges,
     ExternalChangesWithParse,
+    Themed,
 } from './DateTimeInput.stories';
 
 describe('<DateTimeInput />', () => {
@@ -328,4 +329,9 @@ describe('<DateTimeInput />', () => {
             });
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx
@@ -103,6 +103,9 @@ export const Themed = () => (
         theme={deepmerge(createTheme(), {
             components: {
                 RaDateTimeInput: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
                     styleOverrides: {
                         root: {
                             ['& input']: {
diff --git a/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx b/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx
@@ -9,6 +9,7 @@ import { AdminContext } from '../AdminContext';
 import { SaveButton } from '../button';
 import { SimpleForm, Toolbar } from '../form';
 import { required, ResourceContextProvider } from 'ra-core';
+import { Themed } from './NumberInput.stories';
 
 describe('<NumberInput />', () => {
     const defaultProps = {
@@ -672,4 +673,9 @@ describe('<NumberInput />', () => {
             });
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/NumberInput.stories.tsx b/packages/ra-ui-materialui/src/input/NumberInput.stories.tsx
@@ -286,6 +286,9 @@ export const Themed = () => (
         theme={deepmerge(createTheme(), {
             components: {
                 RaNumberInput: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
                     styleOverrides: {
                         root: {
                             ['& input']: {
diff --git a/packages/ra-ui-materialui/src/input/PasswordInput.spec.tsx b/packages/ra-ui-materialui/src/input/PasswordInput.spec.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Themed } from './PasswordInput.stories';
+
+describe('<PasswordInput />', () => {
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
+});
diff --git a/packages/ra-ui-materialui/src/input/PasswordInput.stories.tsx b/packages/ra-ui-materialui/src/input/PasswordInput.stories.tsx
@@ -43,6 +43,9 @@ export const Themed = () => (
         theme={deepmerge(createTheme(), {
             components: {
                 RaPasswordInput: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
                     styleOverrides: {
                         root: {
                             ['& input']: {
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
@@ -13,6 +13,7 @@ import { SimpleForm } from '../form';
 import { RadioButtonGroupInput } from './RadioButtonGroupInput';
 import {
     InsideReferenceArrayInput,
+    Themed,
     TranslateChoice,
 } from './RadioButtonGroupInput.stories';
 
@@ -310,6 +311,12 @@ describe('<RadioButtonGroupInput />', () => {
         expect(screen.queryByText('Mastercard')).not.toBeNull();
     });
 
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const inputs = await screen.findAllByTestId('themed');
+        expect(inputs).toHaveLength(3);
+    });
+
     describe('translateChoice', () => {
         it('should translate the choices by default', async () => {
             render(<TranslateChoice />);
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
+import { deepmerge } from '@mui/utils';
+import { createTheme } from '@mui/material/styles';
+import { ThemeOptions } from '@mui/material';
 
 import { AdminContext } from '../AdminContext';
 import { Create, Edit } from '../detail';
@@ -178,8 +181,12 @@ export const Id = () => (
 );
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
-const Wrapper = ({ children }) => (
-    <AdminContext i18nProvider={i18nProvider} defaultTheme="light">
+const Wrapper = ({ children, theme = undefined }) => (
+    <AdminContext
+        i18nProvider={i18nProvider}
+        defaultTheme="light"
+        theme={theme}
+    >
         <Create resource="posts">
             <SimpleForm>
                 {children}
@@ -272,3 +279,24 @@ export const TranslateChoice = () => {
         </AdminContext>
     );
 };
+
+export const Themed = () => (
+    <Wrapper
+        theme={deepmerge(createTheme(), {
+            components: {
+                RaRadioButtonGroupInputItem: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
+                    styleOverrides: {
+                        root: {
+                            color: 'red',
+                        },
+                    },
+                },
+            },
+        } as ThemeOptions)}
+    >
+        <RadioButtonGroupInput source="category" choices={choices} />
+    </Wrapper>
+);
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
@@ -8,15 +8,22 @@ import {
     styled,
     useThemeProps,
 } from '@mui/material/styles';
+import { sanitizeInputRestProps } from './sanitizeInputRestProps';
 
 export const RadioButtonGroupInputItem = (
     props: RadioButtonGroupInputItemProps
 ) => {
-    const { choice, optionText, optionValue, source, translateChoice } =
-        useThemeProps({
-            props: props,
-            name: PREFIX,
-        });
+    const {
+        choice,
+        optionText,
+        optionValue,
+        source,
+        translateChoice,
+        ...rest
+    } = useThemeProps({
+        props: props,
+        name: PREFIX,
+    });
 
     const { getChoiceText, getChoiceValue } = useChoices({
         optionText,
@@ -34,6 +41,7 @@ export const RadioButtonGroupInputItem = (
             htmlFor={nodeId}
             value={value}
             control={<Radio id={nodeId} color="primary" />}
+            {...sanitizeInputRestProps(rest)}
         />
     );
 };
diff --git a/packages/ra-ui-materialui/src/input/TextInput.spec.tsx b/packages/ra-ui-materialui/src/input/TextInput.spec.tsx
@@ -5,7 +5,7 @@ import { required, ResourceContextProvider, testDataProvider } from 'ra-core';
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
 import { TextInput } from './TextInput';
-import { ValueNull, Parse } from './TextInput.stories';
+import { ValueNull, Parse, Themed } from './TextInput.stories';
 
 describe('<TextInput />', () => {
     const defaultProps = {
@@ -245,4 +245,9 @@ describe('<TextInput />', () => {
             expect(container.querySelector(`label`)).toBeNull();
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/TextInput.stories.tsx b/packages/ra-ui-materialui/src/input/TextInput.stories.tsx
@@ -414,6 +414,9 @@ export const Themed = () => (
         theme={deepmerge(createTheme(), {
             components: {
                 RaTextInput: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
                     styleOverrides: {
                         root: {
                             ['& input']: {
diff --git a/packages/ra-ui-materialui/src/input/TimeInput.spec.tsx b/packages/ra-ui-materialui/src/input/TimeInput.spec.tsx
@@ -10,6 +10,7 @@ import { SimpleForm, Toolbar } from '../form';
 import { TimeInput } from './TimeInput';
 import { ArrayInput, SimpleFormIterator } from './ArrayInput';
 import { SaveButton } from '../button';
+import { Themed } from './TimeInput.stories';
 
 describe('<TimeInput />', () => {
     const defaultProps = {
@@ -274,4 +275,9 @@ describe('<TimeInput />', () => {
             });
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const input = await screen.findByTestId('themed');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/input/TimeInput.stories.tsx b/packages/ra-ui-materialui/src/input/TimeInput.stories.tsx
@@ -49,6 +49,9 @@ export const Themed = () => (
         theme={deepmerge(createTheme(), {
             components: {
                 RaTimeInput: {
+                    defaultProps: {
+                        'data-testid': 'themed',
+                    },
                     styleOverrides: {
                         root: {
                             ['& input']: {
diff --git a/packages/ra-ui-materialui/src/input/sanitizeInputRestProps.ts b/packages/ra-ui-materialui/src/input/sanitizeInputRestProps.ts
@@ -41,5 +41,6 @@ export const sanitizeInputRestProps = ({
     validate,
     validateFields,
     value,
+    fullWidth,
     ...rest
 }: any) => rest;
