Test buttons default props.

Madeorsk · Madeorsk · commit 4938e259cfb3 · 2025-06-10T10:24:12.000+02:00
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteButton.spec.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteButton.spec.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import expect from 'expect';
+import { deepmerge } from '@mui/utils';
+import { ThemeOptions } from '@mui/material';
+import { ListContextProvider, testDataProvider } from 'ra-core';
+
+import { AdminContext } from '../AdminContext';
+import { defaultLightTheme } from '../theme';
+import { BulkDeleteButton } from './BulkDeleteButton';
+
+describe('<BulkDeleteButton />', () => {
+    const dataProvider = testDataProvider({
+        deleteMany: async () => ({ data: [{ id: 123 }] as any }),
+    });
+
+    it('should be customized by a theme', () => {
+        render(
+            <AdminContext
+                dataProvider={dataProvider}
+                theme={deepmerge(defaultLightTheme, {
+                    components: {
+                        RaBulkDeleteButton: {
+                            defaultProps: {
+                                label: 'Bulk Delete',
+                                className: 'custom-class',
+                                'data-testid': 'themed-button',
+                            },
+                        },
+                    },
+                } as ThemeOptions)}
+            >
+                <ListContextProvider
+                    value={
+                        {
+                            selectedIds: [123],
+                            onUnselectItems: () => {},
+                        } as any
+                    }
+                >
+                    <BulkDeleteButton
+                        resource="books"
+                        mutationMode="pessimistic"
+                    />
+                </ListContextProvider>
+            </AdminContext>
+        );
+
+        const button = screen.getByTestId('themed-button');
+        expect(button.textContent).toBe('Bulk Delete');
+        expect(button.classList).toContain('custom-class');
+    });
+});
diff --git a/packages/ra-ui-materialui/src/button/BulkExportButton.spec.tsx b/packages/ra-ui-materialui/src/button/BulkExportButton.spec.tsx
@@ -6,19 +6,20 @@ import {
     testDataProvider,
     ListContextProvider,
 } from 'ra-core';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, ThemeOptions } from '@mui/material/styles';
+import { deepmerge } from '@mui/utils';
 
 import { BulkExportButton } from './BulkExportButton';
 
 const theme = createTheme();
 
 describe('<BulkExportButton />', () => {
-    it('should invoke dataProvider with meta', async () => {
-        const exporter = jest.fn().mockName('exporter');
-        const dataProvider = testDataProvider({
-            getMany: jest.fn().mockResolvedValueOnce({ data: [], total: 0 }),
-        });
+    const exporter = jest.fn().mockName('exporter');
+    const dataProvider = testDataProvider({
+        getMany: jest.fn().mockResolvedValueOnce({ data: [], total: 0 }),
+    });
 
+    it('should invoke dataProvider with meta', async () => {
         render(
             <CoreAdminContext dataProvider={dataProvider}>
                 <ThemeProvider theme={theme}>
@@ -46,4 +47,38 @@ describe('<BulkExportButton />', () => {
             expect(exporter).toHaveBeenCalled();
         });
     });
+
+    it('should be customized by a theme', () => {
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <ThemeProvider
+                    theme={deepmerge(theme, {
+                        components: {
+                            RaBulkExportButton: {
+                                defaultProps: {
+                                    label: 'Bulk Export',
+                                    className: 'custom-class',
+                                    'data-testid': 'themed-button',
+                                },
+                            },
+                        },
+                    } as ThemeOptions)}
+                >
+                    <ListContextProvider
+                        value={{ selectedIds: ['selectedId'] }}
+                    >
+                        <BulkExportButton
+                            resource="test"
+                            exporter={exporter}
+                            meta={{ pass: 'meta' }}
+                        />
+                    </ListContextProvider>
+                </ThemeProvider>
+            </CoreAdminContext>
+        );
+
+        const button = screen.getByTestId('themed-button');
+        expect(button.textContent).toBe('Bulk Export');
+        expect(button.classList).toContain('custom-class');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateButton.spec.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateButton.spec.tsx
@@ -1,9 +1,22 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, screen } from '@testing-library/react';
-import { MutationMode } from './BulkUpdateButton.stories';
+import { MutationMode, Themed } from './BulkUpdateButton.stories';
 
 describe('BulkUpdateButton', () => {
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+
+        const checkbox = await screen.findByRole('checkbox', {
+            name: 'Select all',
+        });
+        checkbox.click();
+
+        const button = screen.queryByTestId('themed-button');
+        expect(button.textContent).toBe('Bulk Update');
+        expect(button.classList).toContain('custom-class');
+    });
+
     describe('mutationMode', () => {
         it('should ask confirmation before updating in pessimistic mode', async () => {
             render(<MutationMode />);
diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateButton.stories.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateButton.stories.tsx
@@ -9,6 +9,9 @@ import { AdminContext } from '../AdminContext';
 import { AdminUI } from '../AdminUI';
 import { List, Datagrid } from '../list';
 import { TextField, NumberField } from '../field';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
+import { ThemeOptions } from '@mui/material';
 
 export default { title: 'ra-ui-materialui/button/BulkUpdateButton' };
 
@@ -89,9 +92,13 @@ const dataProvider = fakeRestDataProvider({
     authors: [],
 });
 
-const Wrapper = ({ bulkActionButtons }) => (
+const Wrapper = ({ bulkActionButtons, theme = undefined }) => (
     <TestMemoryRouter initialEntries={['/books']}>
-        <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
+        <AdminContext
+            dataProvider={dataProvider}
+            i18nProvider={i18nProvider}
+            theme={theme}
+        >
             <AdminUI>
                 <Resource
                     name="books"
@@ -160,3 +167,21 @@ export const MutationMode = () => (
         }
     />
 );
+
+export const Themed = () => (
+    <Wrapper
+        bulkActionButtons={<BulkUpdateButton data={{ reads: 0 }} />}
+        theme={deepmerge(defaultLightTheme, {
+            components: {
+                RaBulkUpdateButton: {
+                    defaultProps: {
+                        label: 'Bulk Update',
+                        mutationMode: 'optimistic',
+                        className: 'custom-class',
+                        'data-testid': 'themed-button',
+                    },
+                },
+            },
+        } as ThemeOptions)}
+    />
+);
diff --git a/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx b/packages/ra-ui-materialui/src/button/CloneButton.spec.tsx
@@ -4,6 +4,9 @@ import { render, screen } from '@testing-library/react';
 
 import { AdminContext } from '../AdminContext';
 import { CloneButton } from './CloneButton';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
+import { ThemeOptions } from '@mui/material';
 
 const invalidButtonDomProps = {
     record: { id: 123, foo: 'bar' },
@@ -42,4 +45,31 @@ describe('<CloneButton />', () => {
 
         spy.mockRestore();
     });
+
+    it('should be customized by a theme', () => {
+        render(
+            <AdminContext
+                theme={deepmerge(defaultLightTheme, {
+                    components: {
+                        RaCloneButton: {
+                            defaultProps: {
+                                label: 'Clone',
+                                className: 'custom-class',
+                                'data-testid': 'themed-button',
+                            },
+                        },
+                    },
+                } as ThemeOptions)}
+            >
+                <CloneButton
+                    resource="posts"
+                    record={{ id: 123, foo: 'bar' }}
+                />
+            </AdminContext>
+        );
+
+        const button = screen.getByTestId('themed-button');
+        expect(button.textContent).toBe('Clone');
+        expect(button.classList).toContain('custom-class');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.spec.tsx b/packages/ra-ui-materialui/src/button/DeleteButton.spec.tsx
@@ -5,6 +5,7 @@ import {
     NotificationDefault,
     NotificationTranslated,
     FullApp,
+    Themed,
 } from './DeleteButton.stories';
 
 describe('<DeleteButton />', () => {
@@ -28,6 +29,14 @@ describe('<DeleteButton />', () => {
             expect(screen.queryAllByLabelText('Delete')).toHaveLength(1);
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const button = screen.queryByTestId('themed-button');
+        expect(button.classList).toContain('custom-class');
+        expect(button.textContent).toBe('Delete');
+    });
+
     describe('success notification', () => {
         it('should use a generic success message by default', async () => {
             render(<NotificationDefault />);
diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.stories.tsx b/packages/ra-ui-materialui/src/button/DeleteButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { colors, createTheme, Alert } from '@mui/material';
+import { colors, createTheme, Alert, ThemeOptions } from '@mui/material';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import frenchMessages from 'ra-language-french';
@@ -18,6 +18,8 @@ import { Datagrid } from '../list/datagrid/Datagrid';
 import { TextField } from '../field/TextField';
 import { AdminUI } from '../AdminUI';
 import { Notification } from '../layout';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
 
 const theme = createTheme({
     palette: {
@@ -385,3 +387,22 @@ export const SuccessMessage = () => {
         </AdminContext>
     );
 };
+
+export const Themed = () => (
+    <AdminContext
+        theme={deepmerge(defaultLightTheme, {
+            components: {
+                RaDeleteButton: {
+                    defaultProps: {
+                        label: 'Delete',
+                        className: 'custom-class',
+                    },
+                },
+            },
+        } as ThemeOptions)}
+    >
+        <ResourceContextProvider value="posts">
+            <DeleteButton data-testid={'themed-button'} record={{ id: 1 }} />
+        </ResourceContextProvider>
+    </AdminContext>
+);
diff --git a/packages/ra-ui-materialui/src/button/ListButton.spec.tsx b/packages/ra-ui-materialui/src/button/ListButton.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import expect from 'expect';
-import { Basic, AccessControl } from './ListButton.stories';
+import { Basic, AccessControl, Themed } from './ListButton.stories';
 
 const invalidButtonDomProps = {
     redirect: 'list',
@@ -30,4 +30,11 @@ describe('<ListButton />', () => {
         fireEvent.click(screen.getByLabelText('Allow accessing books'));
         await screen.findByLabelText('List');
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const button = screen.queryByTestId('themed-button');
+        expect(button.classList).toContain('custom-class');
+        expect(button.textContent).toBe('List');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/button/ListButton.stories.tsx b/packages/ra-ui-materialui/src/button/ListButton.stories.tsx
@@ -21,6 +21,9 @@ import { TextInput } from '../input/TextInput';
 import { ListButton } from './ListButton';
 import { Edit } from '../detail/Edit';
 import { TopToolbar } from '../layout';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
+import { ThemeOptions } from '@mui/material';
 
 export default { title: 'ra-ui-materialui/button/ListButton' };
 
@@ -234,3 +237,29 @@ const dataProvider = fakeRestDataProvider({
     ],
     authors: [],
 });
+
+export const Themed = ({ buttonProps }: { buttonProps?: any }) => (
+    <TestMemoryRouter>
+        <AdminContext
+            theme={deepmerge(defaultLightTheme, {
+                components: {
+                    RaListButton: {
+                        defaultProps: {
+                            label: 'List',
+                            className: 'custom-class',
+                        },
+                    },
+                },
+            } as ThemeOptions)}
+        >
+            <ResourceContextProvider value="books">
+                <RecordContextProvider value={{ id: 1 }}>
+                    <ListButton
+                        data-testid={'themed-button'}
+                        {...buttonProps}
+                    />
+                </RecordContextProvider>
+            </ResourceContextProvider>
+        </AdminContext>
+    </TestMemoryRouter>
+);
diff --git a/packages/ra-ui-materialui/src/button/ShowButton.spec.tsx b/packages/ra-ui-materialui/src/button/ShowButton.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import expect from 'expect';
-import { Basic, AccessControl } from './ShowButton.stories';
+import { Basic, AccessControl, Themed } from './ShowButton.stories';
 
 const invalidButtonDomProps = {
     redirect: 'list',
@@ -43,4 +43,11 @@ describe('<ShowButton />', () => {
             expect(screen.queryAllByLabelText('Show')).toHaveLength(1);
         });
     });
+
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        const button = screen.queryByTestId('themed-button');
+        expect(button.classList).toContain('custom-class');
+        expect(button.textContent).toBe('Show');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/button/ShowButton.stories.tsx b/packages/ra-ui-materialui/src/button/ShowButton.stories.tsx
diff --git a/packages/ra-ui-materialui/src/button/UpdateButton.spec.tsx b/packages/ra-ui-materialui/src/button/UpdateButton.spec.tsx
diff --git a/packages/ra-ui-materialui/src/button/UpdateButton.stories.tsx b/packages/ra-ui-materialui/src/button/UpdateButton.stories.tsx
