Skip to content

Commit 669995b

Browse files
MadeorskMadeorsk
committed
Add missing stories to test buttons.
1 parent 4938e25 commit 669995b

File tree

6 files changed

+355
-106
lines changed

6 files changed

+355
-106
lines changed

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

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,14 @@
11
import * as React from 'react';
22
import { render, screen } from '@testing-library/react';
33
import expect from 'expect';
4-
import { deepmerge } from '@mui/utils';
5-
import { ThemeOptions } from '@mui/material';
6-
import { ListContextProvider, testDataProvider } from 'ra-core';
74

8-
import { AdminContext } from '../AdminContext';
9-
import { defaultLightTheme } from '../theme';
10-
import { BulkDeleteButton } from './BulkDeleteButton';
5+
import { Themed } from './BulkDeleteButton.stories';
116

127
describe('<BulkDeleteButton />', () => {
13-
const dataProvider = testDataProvider({
14-
deleteMany: async () => ({ data: [{ id: 123 }] as any }),
15-
});
16-
17-
it('should be customized by a theme', () => {
18-
render(
19-
<AdminContext
20-
dataProvider={dataProvider}
21-
theme={deepmerge(defaultLightTheme, {
22-
components: {
23-
RaBulkDeleteButton: {
24-
defaultProps: {
25-
label: 'Bulk Delete',
26-
className: 'custom-class',
27-
'data-testid': 'themed-button',
28-
},
29-
},
30-
},
31-
} as ThemeOptions)}
32-
>
33-
<ListContextProvider
34-
value={
35-
{
36-
selectedIds: [123],
37-
onUnselectItems: () => {},
38-
} as any
39-
}
40-
>
41-
<BulkDeleteButton
42-
resource="books"
43-
mutationMode="pessimistic"
44-
/>
45-
</ListContextProvider>
46-
</AdminContext>
47-
);
8+
it('should be customized by a theme', async () => {
9+
render(<Themed />);
4810

49-
const button = screen.getByTestId('themed-button');
11+
const button = await screen.findByTestId('themed');
5012
expect(button.textContent).toBe('Bulk Delete');
5113
expect(button.classList).toContain('custom-class');
5214
});

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

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import React from 'react';
2+
import { ThemeOptions } from '@mui/material';
3+
import { deepmerge } from '@mui/utils';
4+
import { Resource } from 'ra-core';
5+
import polyglotI18nProvider from 'ra-i18n-polyglot';
6+
import englishMessages from 'ra-language-english';
7+
import fakeRestDataProvider from 'ra-data-fakerest';
8+
9+
import { AdminContext } from '../AdminContext';
10+
import { BulkDeleteButton } from './BulkDeleteButton';
11+
import { defaultLightTheme } from '../theme';
12+
import { Datagrid, List } from '../list';
13+
import { NumberField, TextField } from '../field';
14+
import { AdminUI } from '../AdminUI';
15+
16+
export default { title: 'ra-ui-materialui/button/BulkDeleteButton' };
17+
18+
const i18nProvider = polyglotI18nProvider(
19+
() => englishMessages,
20+
'en' // Default locale
21+
);
22+
23+
const dataProvider = fakeRestDataProvider({
24+
books: [
25+
{
26+
id: 1,
27+
title: 'War and Peace',
28+
author: 'Leo Tolstoy',
29+
reads: 23,
30+
},
31+
{
32+
id: 2,
33+
title: 'Pride and Predjudice',
34+
author: 'Jane Austen',
35+
reads: 854,
36+
},
37+
{
38+
id: 3,
39+
title: 'The Picture of Dorian Gray',
40+
author: 'Oscar Wilde',
41+
reads: 126,
42+
},
43+
{
44+
id: 4,
45+
title: 'Le Petit Prince',
46+
author: 'Antoine de Saint-Exupéry',
47+
reads: 86,
48+
},
49+
{
50+
id: 5,
51+
title: "Alice's Adventures in Wonderland",
52+
author: 'Lewis Carroll',
53+
reads: 125,
54+
},
55+
{
56+
id: 6,
57+
title: 'Madame Bovary',
58+
author: 'Gustave Flaubert',
59+
reads: 452,
60+
},
61+
{
62+
id: 7,
63+
title: 'The Lord of the Rings',
64+
author: 'J. R. R. Tolkien',
65+
reads: 267,
66+
},
67+
{
68+
id: 8,
69+
title: "Harry Potter and the Philosopher's Stone",
70+
author: 'J. K. Rowling',
71+
reads: 1294,
72+
},
73+
{
74+
id: 9,
75+
title: 'The Alchemist',
76+
author: 'Paulo Coelho',
77+
reads: 23,
78+
},
79+
{
80+
id: 10,
81+
title: 'A Catcher in the Rye',
82+
author: 'J. D. Salinger',
83+
reads: 209,
84+
},
85+
{
86+
id: 11,
87+
title: 'Ulysses',
88+
author: 'James Joyce',
89+
reads: 12,
90+
},
91+
],
92+
authors: [],
93+
});
94+
95+
const Wrapper = ({ children, ...props }) => {
96+
return (
97+
<AdminContext
98+
dataProvider={dataProvider}
99+
i18nProvider={i18nProvider}
100+
{...props}
101+
>
102+
<AdminUI>
103+
<Resource
104+
name="books"
105+
list={() => (
106+
<List>
107+
<Datagrid bulkActionButtons={children}>
108+
<TextField source="id" />
109+
<TextField source="title" />
110+
<TextField source="author" />
111+
<NumberField source="reads" />
112+
</Datagrid>
113+
</List>
114+
)}
115+
/>
116+
</AdminUI>
117+
</AdminContext>
118+
);
119+
};
120+
121+
export const Basic = () => {
122+
return (
123+
<Wrapper>
124+
<BulkDeleteButton />
125+
</Wrapper>
126+
);
127+
};
128+
129+
export const Themed = () => {
130+
return (
131+
<Wrapper
132+
theme={deepmerge(defaultLightTheme, {
133+
components: {
134+
RaBulkDeleteButton: {
135+
defaultProps: {
136+
label: 'Bulk Delete',
137+
mutationMode: 'optimistic',
138+
className: 'custom-class',
139+
'data-testid': 'themed',
140+
},
141+
},
142+
},
143+
} as ThemeOptions)}
144+
>
145+
<BulkDeleteButton />
146+
</Wrapper>
147+
);
148+
};

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

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
testDataProvider,
77
ListContextProvider,
88
} from 'ra-core';
9-
import { createTheme, ThemeProvider, ThemeOptions } from '@mui/material/styles';
10-
import { deepmerge } from '@mui/utils';
9+
import { createTheme, ThemeProvider } from '@mui/material/styles';
1110

1211
import { BulkExportButton } from './BulkExportButton';
12+
import { Themed } from './BulkExportButton.stories';
1313

1414
const theme = createTheme();
1515

@@ -48,36 +48,10 @@ describe('<BulkExportButton />', () => {
4848
});
4949
});
5050

51-
it('should be customized by a theme', () => {
52-
render(
53-
<CoreAdminContext dataProvider={dataProvider}>
54-
<ThemeProvider
55-
theme={deepmerge(theme, {
56-
components: {
57-
RaBulkExportButton: {
58-
defaultProps: {
59-
label: 'Bulk Export',
60-
className: 'custom-class',
61-
'data-testid': 'themed-button',
62-
},
63-
},
64-
},
65-
} as ThemeOptions)}
66-
>
67-
<ListContextProvider
68-
value={{ selectedIds: ['selectedId'] }}
69-
>
70-
<BulkExportButton
71-
resource="test"
72-
exporter={exporter}
73-
meta={{ pass: 'meta' }}
74-
/>
75-
</ListContextProvider>
76-
</ThemeProvider>
77-
</CoreAdminContext>
78-
);
51+
it('should be customized by a theme', async () => {
52+
render(<Themed />);
7953

80-
const button = screen.getByTestId('themed-button');
54+
const button = await screen.findByTestId('themed');
8155
expect(button.textContent).toBe('Bulk Export');
8256
expect(button.classList).toContain('custom-class');
8357
});

0 commit comments

Comments
 (0)