Add stories to test detail views themes.

Author: Madeorsk

packages/ra-ui-materialui/src/detail/Create.spec.tsx

@@ -11,6 +11,7 @@ import {
     TitleElement,
     NotificationDefault,
     NotificationTranslated,
+    Themed,
 } from './Create.stories';
 
 describe('<Create />', () => {
@@ -49,6 +50,13 @@ describe('<Create />', () => {
         expect(screen.queryAllByText('help')).toHaveLength(1);
     });
 
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        expect(screen.queryByTestId('themed-view').classList).toContain(
+            'custom-class'
+        );
+    });
+
     describe('title', () => {
         it('should display by default the title of the resource', async () => {
             render(<Basic />);

packages/ra-ui-materialui/src/detail/Create.stories.tsx

@@ -9,13 +9,15 @@ import {
 } from 'ra-core';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import { Box, Card, Stack } from '@mui/material';
+import { Box, Card, Stack, ThemeOptions } from '@mui/material';
 
 import { TextInput } from '../input';
 import { SimpleForm } from '../form/SimpleForm';
 import { ListButton, SaveButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
 import { Create } from './Create';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
 
 export default { title: 'ra-ui-materialui/detail/Create' };
 
@@ -270,3 +272,29 @@ export const Default = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const Themed = () => (
+    <TestMemoryRouter initialEntries={['/books/create']}>
+        <Admin
+            dataProvider={dataProvider}
+            theme={deepmerge(defaultLightTheme, {
+                components: {
+                    RaCreate: {
+                        defaultProps: {
+                            className: 'custom-class',
+                        },
+                    },
+                },
+            } as ThemeOptions)}
+        >
+            <Resource
+                name="books"
+                create={() => (
+                    <Create data-testid={'themed-view'}>
+                        <Content />
+                    </Create>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);

packages/ra-ui-materialui/src/detail/Edit.spec.tsx

@@ -28,6 +28,7 @@ import {
     NotificationDefault,
     NotificationTranslated,
     EmptyWhileLoading,
+    Themed,
 } from './Edit.stories';
 
 describe('<Edit />', () => {
@@ -140,6 +141,13 @@ describe('<Edit />', () => {
         expect(screen.queryByText('Something went wrong')).toBeNull();
     });
 
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        expect(screen.queryByTestId('themed-view').classList).toContain(
+            'custom-class'
+        );
+    });
+
     describe('mutationMode prop', () => {
         it('should be undoable by default', async () => {
             let post = { id: 1234, title: 'lorem' };

packages/ra-ui-materialui/src/detail/Edit.stories.tsx

@@ -9,13 +9,15 @@ import {
 } from 'ra-core';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import { Box, Card, Stack, Typography } from '@mui/material';
+import { Box, Card, Stack, ThemeOptions, Typography } from '@mui/material';
 
 import { TextInput } from '../input';
 import { SimpleForm } from '../form/SimpleForm';
 import { ShowButton, SaveButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
 import { Edit } from './Edit';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
 
 export default { title: 'ra-ui-materialui/detail/Edit' };
 
@@ -362,3 +364,29 @@ const AsideComponentWithRecord = () => {
         </Typography>
     );
 };
+
+export const Themed = () => (
+    <TestMemoryRouter initialEntries={['/books/1/Edit']}>
+        <Admin
+            dataProvider={dataProvider}
+            theme={deepmerge(defaultLightTheme, {
+                components: {
+                    RaEdit: {
+                        defaultProps: {
+                            className: 'custom-class',
+                        },
+                    },
+                },
+            } as ThemeOptions)}
+        >
+            <Resource
+                name="books"
+                edit={() => (
+                    <Edit data-testid={'themed-view'}>
+                        <BookTitle />
+                    </Edit>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);

packages/ra-ui-materialui/src/detail/Show.spec.tsx

@@ -24,6 +24,7 @@ import {
     Title,
     TitleFalse,
     TitleElement,
+    Themed,
 } from './Show.stories';
 import { Show } from './Show';
 
@@ -129,6 +130,13 @@ describe('<Show />', () => {
         expect(screen.getByTestId('custom-component')).toBeDefined();
     });
 
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        expect(screen.queryByTestId('themed-view').classList).toContain(
+            'custom-class'
+        );
+    });
+
     describe('title', () => {
         it('should display by default the title of the resource', async () => {
             render(<Basic />);

packages/ra-ui-materialui/src/detail/Show.stories.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { Admin } from 'react-admin';
 import { Resource, useRecordContext, TestMemoryRouter } from 'ra-core';
-import { Box, Card, Stack } from '@mui/material';
+import { Box, Card, Stack, ThemeOptions } from '@mui/material';
+
 import { TextField } from '../field';
 import { Labeled } from '../Labeled';
 import { SimpleShowLayout } from './SimpleShowLayout';
 import { EditButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
 import { Show } from './Show';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
 
 export default { title: 'ra-ui-materialui/detail/Show' };
 
@@ -244,3 +247,29 @@ export const Default = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const Themed = () => (
+    <TestMemoryRouter initialEntries={['/books/1/show']}>
+        <Admin
+            dataProvider={dataProvider}
+            theme={deepmerge(defaultLightTheme, {
+                components: {
+                    RaShow: {
+                        defaultProps: {
+                            className: 'custom-class',
+                        },
+                    },
+                },
+            } as ThemeOptions)}
+        >
+            <Resource
+                name="books"
+                show={() => (
+                    <Show data-testid={'themed-view'}>
+                        <BookTitle />
+                    </Show>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);