Add stories to test lists themes.

Author: Madeorsk

packages/ra-ui-materialui/src/list/InfiniteList.spec.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import expect from 'expect';
+import { render, screen } from '@testing-library/react';
+
+import { Themed } from './List.stories';
+
+describe('<InfiniteList />', () => {
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        expect(screen.queryByTestId('themed-list').classList).toContain(
+            'custom-class'
+        );
+    });
+});

packages/ra-ui-materialui/src/list/InfiniteList.stories.tsx

@@ -8,7 +8,7 @@ import {
     useInfinitePaginationContext,
     TestMemoryRouter,
 } from 'ra-core';
-import { Box, Button, Card, Typography } from '@mui/material';
+import { Box, Button, Card, ThemeOptions, Typography } from '@mui/material';
 
 import { InfiniteList } from './InfiniteList';
 import { SimpleList } from './SimpleList';
@@ -24,6 +24,8 @@ import { SearchInput } from '../input';
 import { BulkDeleteButton, SelectAllButton, SortButton } from '../button';
 import { TopToolbar, Layout } from '../layout';
 import { BulkActionsToolbar } from './BulkActionsToolbar';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../theme';
 
 export default {
     title: 'ra-ui-materialui/list/InfiniteList',
@@ -89,11 +91,12 @@ const dataProvider = fakeRestProvider(
     500
 );
 
-const Admin = ({ children, dataProvider, layout }: any) => (
+const Admin = ({ children, dataProvider, layout, ...props }: any) => (
     <TestMemoryRouter>
         <AdminContext
             dataProvider={dataProvider}
             i18nProvider={polyglotI18nProvider(() => defaultMessages, 'en')}
+            {...props}
         >
             <AdminUI layout={layout}>{children}</AdminUI>
         </AdminContext>
@@ -437,3 +440,31 @@ export const PartialPagination = () => (
         />
     </Admin>
 );
+
+export const Themed = () => (
+    <Admin
+        dataProvider={dataProvider}
+        theme={deepmerge(defaultLightTheme, {
+            components: {
+                RaInfiniteList: {
+                    defaultProps: {
+                        className: 'custom-class',
+                        perPage: 5,
+                    },
+                },
+            },
+        } as ThemeOptions)}
+    >
+        <Resource
+            name="books"
+            list={() => (
+                <InfiniteList data-testid={'themed-list'}>
+                    <SimpleList
+                        primaryText="%{title}"
+                        secondaryText="%{author}"
+                    />
+                </InfiniteList>
+            )}
+        />
+    </Admin>
+);

packages/ra-ui-materialui/src/list/List.spec.tsx

@@ -9,7 +9,7 @@ import {
 } from 'ra-core';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
-import { defaultTheme } from '../theme/defaultTheme';
+import { defaultTheme } from '../theme';
 import { List } from './List';
 import { Filter } from './filter';
 import { TextInput } from '../input';
@@ -22,6 +22,7 @@ import {
     PartialPagination,
     Default,
     SelectAllLimit,
+    Themed,
 } from './List.stories';
 
 const theme = createTheme(defaultTheme);
@@ -112,6 +113,13 @@ describe('<List />', () => {
         expect(screen.queryAllByText('Hello')).toHaveLength(1);
     });
 
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        expect(screen.queryByTestId('themed-list').classList).toContain(
+            'custom-class'
+        );
+    });
+
     describe('empty', () => {
         it('should render an invite when the list is empty', async () => {
             const Dummy = () => {

packages/ra-ui-materialui/src/list/List.stories.tsx

@@ -8,7 +8,14 @@ import {
     DataProvider,
 } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
-import { Box, Card, Typography, Button, Link as MuiLink } from '@mui/material';
+import {
+    Box,
+    Card,
+    Typography,
+    Button,
+    Link as MuiLink,
+    ThemeOptions,
+} from '@mui/material';
 
 import { List } from './List';
 import { SimpleList } from './SimpleList';
@@ -22,6 +29,8 @@ import { BulkDeleteButton, ListButton, SelectAllButton } from '../button';
 import { ShowGuesser } from '../detail';
 import TopToolbar from '../layout/TopToolbar';
 import { BulkActionsToolbar } from './BulkActionsToolbar';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme, RaThemeOptions } from '../theme';
 
 export default { title: 'ra-ui-materialui/list/List' };
 
@@ -801,3 +810,39 @@ export const ResponseMetadata = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const Themed = () => (
+    <TestMemoryRouter initialEntries={['/books']}>
+        <Admin
+            dataProvider={defaultDataProvider}
+            theme={deepmerge(defaultLightTheme, {
+                components: {
+                    RaList: {
+                        defaultProps: {
+                            className: 'custom-class',
+                        },
+                        styleOverrides: {
+                            root: {
+                                background: 'pink',
+
+                                ['& .MuiListItemText-primary']: {
+                                    color: 'hotpink',
+                                    fontWeight: 'bold',
+                                },
+                            },
+                        },
+                    },
+                },
+            } as ThemeOptions)}
+        >
+            <Resource
+                name="books"
+                list={() => (
+                    <List data-testid={'themed-list'}>
+                        <BookList />
+                    </List>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);

packages/ra-ui-materialui/src/list/SimpleList/SimpleList.spec.tsx

@@ -22,6 +22,7 @@ import {
     RowClick,
     Standalone,
     StandaloneEmpty,
+    Themed,
 } from './SimpleList.stories';
 import { Basic } from '../filter/FilterButton.stories';
 
@@ -259,6 +260,13 @@ describe('<SimpleList />', () => {
         await screen.findByText('War and Peace');
     });
 
+    it('should be customized by a theme', async () => {
+        render(<Themed />);
+        expect(screen.queryByTestId('themed-list').classList).toContain(
+            'custom-class'
+        );
+    });
+
     describe('standalone', () => {
         it('should work without a ListContext', async () => {
             render(<Standalone />);

packages/ra-ui-materialui/src/list/SimpleList/SimpleList.stories.tsx

@@ -11,7 +11,14 @@ import {
 } from 'ra-core';
 import defaultMessages from 'ra-language-english';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
-import { Alert, Box, FormControlLabel, FormGroup, Switch } from '@mui/material';
+import {
+    Alert,
+    Box,
+    FormControlLabel,
+    FormGroup,
+    Switch,
+    ThemeOptions,
+} from '@mui/material';
 import { Location } from 'react-router';
 
 import { AdminUI } from '../../AdminUI';
@@ -21,6 +28,8 @@ import { List, ListProps } from '../List';
 import { RowClickFunction } from '../types';
 import { SimpleList } from './SimpleList';
 import { FunctionLinkType } from './SimpleListItem';
+import { deepmerge } from '@mui/utils';
+import { defaultLightTheme } from '../../theme';
 
 export default { title: 'ra-ui-materialui/list/SimpleList' };
 
@@ -430,3 +439,39 @@ export const StandaloneEmpty = () => (
         </AdminContext>
     </TestMemoryRouter>
 );
+
+export const Themed = () => (
+    <TestMemoryRouter>
+        <AdminContext
+            theme={deepmerge(defaultLightTheme, {
+                components: {
+                    RaSimpleList: {
+                        defaultProps: {
+                            className: 'custom-class',
+                        },
+                        styleOverrides: {
+                            root: {
+                                background: 'pink',
+
+                                ['& .MuiListItemText-primary']: {
+                                    color: 'hotpink',
+                                    fontWeight: 'bold',
+                                },
+                            },
+                        },
+                    },
+                },
+            } as ThemeOptions)}
+        >
+            <ResourceContextProvider value="books">
+                <SimpleList
+                    data-testid={'themed-list'}
+                    data={data.books}
+                    primaryText={record => record.title}
+                    secondaryText={record => record.author}
+                    tertiaryText={record => record.year}
+                />
+            </ResourceContextProvider>
+        </AdminContext>
+    </TestMemoryRouter>
+);