Skip to content

Commit d83e645

Browse files
MadeorskMadeorsk
committed
Add stories to test themes and fix ReferenceField and ReferenceOneField default props.
1 parent a27f996 commit d83e645

26 files changed

+706
-51
lines changed

‎packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.spec.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { Notification } from '../layout';
2323
import {
2424
Basic,
2525
NoRecordRepresentation,
26+
Themed,
2627
WithCustomTitleAndContent,
2728
WithDefaultTranslation,
2829
} from './DeleteWithConfirmButton.stories';
@@ -395,4 +396,10 @@ describe('<DeleteWithConfirmButton />', () => {
395396
await screen.findByText('Delete author #1');
396397
await screen.findByText('Are you sure you want to delete this author?');
397398
});
399+
400+
it('should be customized by a theme', async () => {
401+
render(<Themed />);
402+
const buttons = await screen.findAllByTestId('themed');
403+
expect(buttons[0].classList).toContain('MuiButton-outlined');
404+
});
398405
});

‎packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import englishMessages from 'ra-language-english';
44
import frenchMessages from 'ra-language-french';
55
import { Resource, TestMemoryRouter } from 'ra-core';
66
import fakeRestDataProvider from 'ra-data-fakerest';
7-
import { Alert } from '@mui/material';
7+
import { Alert, createTheme, ThemeOptions } from '@mui/material';
88

99
import { DeleteWithConfirmButton } from './DeleteWithConfirmButton';
1010
import { AdminContext } from '../AdminContext';
1111
import { AdminUI } from '../AdminUI';
1212
import { List, Datagrid } from '../list';
1313
import { TextField } from '../field';
14+
import { deepmerge } from '@mui/utils';
1415

1516
export default { title: 'ra-ui-materialui/button/DeleteWithConfirmButton' };
1617

@@ -300,3 +301,38 @@ export const WithCustomDialogContent = () => (
300301
</AdminContext>
301302
</TestMemoryRouter>
302303
);
304+
305+
export const Themed = () => (
306+
<TestMemoryRouter initialEntries={['/books']}>
307+
<AdminContext
308+
dataProvider={dataProvider}
309+
i18nProvider={i18nProvider}
310+
theme={deepmerge(createTheme(), {
311+
components: {
312+
RaDeleteWithConfirmButton: {
313+
defaultProps: {
314+
variant: 'outlined',
315+
'data-testid': 'themed',
316+
},
317+
styleOverrides: {
318+
root: {
319+
color: 'hotpink',
320+
},
321+
},
322+
},
323+
},
324+
} as ThemeOptions)}
325+
>
326+
<AdminUI>
327+
<Resource
328+
name="books"
329+
list={
330+
<BookList>
331+
<DeleteWithConfirmButton />
332+
</BookList>
333+
}
334+
/>
335+
</AdminUI>
336+
</AdminContext>
337+
</TestMemoryRouter>
338+
);

‎packages/ra-ui-materialui/src/button/DeleteWithUndoButton.spec.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { Toolbar, SimpleForm } from '../form';
1313
import { Edit } from '../detail';
1414
import { TextInput } from '../input';
1515
import { DeleteWithUndoButton } from './DeleteWithUndoButton';
16+
import { Themed } from './DeleteWithUndoButton.stories';
1617

1718
const theme = createTheme();
1819

@@ -161,4 +162,10 @@ describe('<DeleteWithUndoButton />', () => {
161162
]);
162163
});
163164
});
165+
166+
it('should be customized by a theme', async () => {
167+
render(<Themed />);
168+
const buttons = await screen.findAllByTestId('themed');
169+
expect(buttons[0].classList).toContain('MuiButton-outlined');
170+
});
164171
});

‎packages/ra-ui-materialui/src/button/DeleteWithUndoButton.stories.tsx‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import { Resource, TestMemoryRouter } from 'ra-core';
2+
import { AdminContext } from '../AdminContext';
3+
import { deepmerge } from '@mui/utils';
4+
import { createTheme, ThemeOptions } from '@mui/material';
5+
import { AdminUI } from '../AdminUI';
6+
import { DeleteWithUndoButton } from './DeleteWithUndoButton';
7+
import * as React from 'react';
8+
import polyglotI18nProvider from 'ra-i18n-polyglot';
9+
import frenchMessages from 'ra-language-french';
10+
import englishMessages from 'ra-language-english';
11+
import fakeRestDataProvider from 'ra-data-fakerest';
12+
import { Datagrid, List } from '../list';
13+
import { TextField } from '../field';
14+
15+
export default { title: 'ra-ui-materialui/button/DeleteWithUndoButton' };
16+
17+
const i18nProvider = polyglotI18nProvider(
18+
locale =>
19+
locale === 'fr'
20+
? {
21+
...frenchMessages,
22+
resources: {
23+
books: {
24+
name: 'Livre |||| Livres',
25+
fields: {
26+
id: 'Id',
27+
title: 'Titre',
28+
author: 'Auteur',
29+
year: 'Année',
30+
},
31+
message: {
32+
delete_title:
33+
'Supprimer le livre "%{recordRepresentation}" ?',
34+
delete_content:
35+
'Souhaitez-vous vraiment supprimer le livre "%{recordRepresentation}" ?',
36+
},
37+
},
38+
},
39+
}
40+
: {
41+
...englishMessages,
42+
resources: {
43+
books: {
44+
message: {
45+
delete_title:
46+
'Delete the book "%{recordRepresentation}"?',
47+
delete_content:
48+
'Do you really want to delete the book "%{recordRepresentation}"?',
49+
},
50+
},
51+
},
52+
},
53+
// Default locale
54+
'en',
55+
[
56+
{ locale: 'en', name: 'English' },
57+
{ locale: 'fr', name: 'Français' },
58+
]
59+
);
60+
61+
const i18nProviderDefault = polyglotI18nProvider(
62+
locale =>
63+
locale === 'fr'
64+
? {
65+
...frenchMessages,
66+
resources: {
67+
books: {
68+
name: 'Livre |||| Livres',
69+
fields: {
70+
id: 'Id',
71+
title: 'Titre',
72+
author: 'Auteur',
73+
year: 'Année',
74+
},
75+
},
76+
},
77+
}
78+
: englishMessages,
79+
// Default locale
80+
'en',
81+
[
82+
{ locale: 'en', name: 'English' },
83+
{ locale: 'fr', name: 'Français' },
84+
]
85+
);
86+
87+
const dataProvider = fakeRestDataProvider({
88+
books: [
89+
{
90+
id: 1,
91+
title: 'War and Peace',
92+
author: 'Leo Tolstoy',
93+
year: 1869,
94+
},
95+
{
96+
id: 2,
97+
title: 'Pride and Predjudice',
98+
author: 'Jane Austen',
99+
year: 1813,
100+
},
101+
{
102+
id: 3,
103+
title: 'The Picture of Dorian Gray',
104+
author: 'Oscar Wilde',
105+
year: 1890,
106+
},
107+
{
108+
id: 4,
109+
title: 'Le Petit Prince',
110+
author: 'Antoine de Saint-Exupéry',
111+
year: 1943,
112+
},
113+
{
114+
id: 5,
115+
title: "Alice's Adventures in Wonderland",
116+
author: 'Lewis Carroll',
117+
year: 1865,
118+
},
119+
{
120+
id: 6,
121+
title: 'Madame Bovary',
122+
author: 'Gustave Flaubert',
123+
year: 1856,
124+
},
125+
{
126+
id: 7,
127+
title: 'The Lord of the Rings',
128+
author: 'J. R. R. Tolkien',
129+
year: 1954,
130+
},
131+
{
132+
id: 8,
133+
title: "Harry Potter and the Philosopher's Stone",
134+
author: 'J. K. Rowling',
135+
year: 1997,
136+
},
137+
{
138+
id: 9,
139+
title: 'The Alchemist',
140+
author: 'Paulo Coelho',
141+
year: 1988,
142+
},
143+
{
144+
id: 10,
145+
title: 'A Catcher in the Rye',
146+
author: 'J. D. Salinger',
147+
year: 1951,
148+
},
149+
{
150+
id: 11,
151+
title: 'Ulysses',
152+
author: 'James Joyce',
153+
year: 1922,
154+
},
155+
],
156+
authors: [
157+
{ id: 1, fullName: 'Leo Tolstoy' },
158+
{ id: 2, fullName: 'Jane Austen' },
159+
{ id: 3, fullName: 'Oscar Wilde' },
160+
{ id: 4, fullName: 'Antoine de Saint-Exupéry' },
161+
{ id: 5, fullName: 'Lewis Carroll' },
162+
{ id: 6, fullName: 'Gustave Flaubert' },
163+
{ id: 7, fullName: 'J. R. R. Tolkien' },
164+
{ id: 8, fullName: 'J. K. Rowling' },
165+
{ id: 9, fullName: 'Paulo Coelho' },
166+
{ id: 10, fullName: 'J. D. Salinger' },
167+
{ id: 11, fullName: 'James Joyce' },
168+
],
169+
});
170+
171+
const BookList = ({ children }) => {
172+
return (
173+
<List>
174+
<Datagrid>
175+
<TextField source="id" />
176+
<TextField source="title" />
177+
<TextField source="author" />
178+
<TextField source="year" />
179+
{children}
180+
</Datagrid>
181+
</List>
182+
);
183+
};
184+
185+
export const Basic = () => (
186+
<TestMemoryRouter initialEntries={['/books']}>
187+
<AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
188+
<AdminUI>
189+
<Resource
190+
name="books"
191+
list={
192+
<BookList>
193+
<DeleteWithUndoButton />
194+
</BookList>
195+
}
196+
/>
197+
</AdminUI>
198+
</AdminContext>
199+
</TestMemoryRouter>
200+
);
201+
202+
export const Themed = () => (
203+
<TestMemoryRouter initialEntries={['/books']}>
204+
<AdminContext
205+
dataProvider={dataProvider}
206+
i18nProvider={i18nProvider}
207+
theme={deepmerge(createTheme(), {
208+
components: {
209+
RaDeleteWithUndoButton: {
210+
defaultProps: {
211+
variant: 'outlined',
212+
'data-testid': 'themed',
213+
},
214+
styleOverrides: {
215+
root: {
216+
color: 'hotpink',
217+
},
218+
},
219+
},
220+
},
221+
} as ThemeOptions)}
222+
>
223+
<AdminUI>
224+
<Resource
225+
name="books"
226+
list={
227+
<BookList>
228+
<DeleteWithUndoButton />
229+
</BookList>
230+
}
231+
/>
232+
</AdminUI>
233+
</AdminContext>
234+
</TestMemoryRouter>
235+
);

‎packages/ra-ui-materialui/src/field/DateField.spec.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import * as React from 'react';
22
import expect from 'expect';
3-
import { render } from '@testing-library/react';
3+
import { render, screen } from '@testing-library/react';
44
import { RecordContextProvider, I18nContextProvider } from 'ra-core';
55
import polyglotI18nProvider from 'ra-i18n-polyglot';
66

77
import { DateField } from './DateField';
8+
import { Themed } from './DateField.stories';
89

910
const i18nProvider = polyglotI18nProvider(
1011
_locale =>
@@ -235,4 +236,9 @@ describe('<DateField />', () => {
235236
expect(queryByText(renderedDate)).not.toBeNull();
236237
});
237238
});
239+
240+
it('should be customized by a theme', async () => {
241+
render(<Themed />);
242+
expect(screen.getByTestId('themed')).toBeDefined();
243+
});
238244
});

‎packages/ra-ui-materialui/src/field/DateField.stories.tsx‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Paper, Stack } from '@mui/material';
1+
import { createTheme, Paper, Stack, ThemeOptions } from '@mui/material';
22
import * as React from 'react';
3+
import { deepmerge } from '@mui/utils';
34

45
import { DateField, DateFieldProps } from './DateField';
56
import { AdminContext } from '../AdminContext';
@@ -45,3 +46,30 @@ Basic.args = {
4546
theme: 'light',
4647
value: 'now',
4748
};
49+
50+
export const Themed = () => {
51+
return (
52+
<AdminContext
53+
theme={deepmerge(createTheme(), {
54+
components: {
55+
RaDateField: {
56+
defaultProps: {
57+
'data-testid': 'themed',
58+
},
59+
styleOverrides: {
60+
root: {
61+
color: 'hotpink',
62+
},
63+
},
64+
},
65+
},
66+
} as ThemeOptions)}
67+
>
68+
<Paper sx={{ p: 2 }}>
69+
<Stack direction="row">
70+
<DateField record={{ value: new Date() }} source="value" />
71+
</Stack>
72+
</Paper>
73+
</AdminContext>
74+
);
75+
};

0 commit comments

Comments
 (0)