Skip to content

Commit 5278f07

Browse files
djhidjhi
committed
Add more tests and stories + leverage useResourceTranslation where possible
1 parent f8054c8 commit 5278f07

11 files changed

+351
-101
lines changed

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,6 @@ describe('<DeleteButton />', () => {
1717
await screen.findByText('Supprimer');
1818
});
1919

20-
it('should allow resource specific default title', async () => {
21-
render(<Label translations="resource specific" />);
22-
await screen.findByText('Destroy War and Peace');
23-
fireEvent.click(screen.getByText('English', { selector: 'button' }));
24-
fireEvent.click(await screen.findByText('Français'));
25-
await screen.findByText('Détruire War and Peace');
26-
});
27-
2820
it('should only render when users have the right to delete', async () => {
2921
render(<FullApp />);
3022
await screen.findByText('War and Peace');

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,13 @@ const customI18nProvider = polyglotI18nProvider(
5757
resources: {
5858
books: {
5959
action: {
60-
delete: 'Détruire %{recordRepresentation}',
60+
delete: 'Supprimer définitivement %{recordRepresentation}',
61+
},
62+
message: {
63+
delete_title:
64+
'Supprimer définitivement %{recordRepresentation} ?',
65+
delete_content:
66+
'Êtes-vous sûr de vouloir supprimer définitivement %{recordRepresentation} ?',
6167
},
6268
},
6369
},
@@ -66,7 +72,13 @@ const customI18nProvider = polyglotI18nProvider(
6672
resources: {
6773
books: {
6874
action: {
69-
delete: 'Destroy %{recordRepresentation}',
75+
delete: 'Delete %{recordRepresentation} permanently',
76+
},
77+
message: {
78+
delete_title:
79+
'Delete %{recordRepresentation} permanently?',
80+
delete_content:
81+
'Are you sure you want to delete %{recordRepresentation} permanently?',
7082
},
7183
},
7284
},

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

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
WithCustomTitleAndContent,
2727
WithDefaultTranslation,
2828
} from './DeleteWithConfirmButton.stories';
29+
import { Label } from './DeleteButton.stories';
2930

3031
const theme = createTheme();
3132

@@ -37,6 +38,32 @@ const invalidButtonDomProps = {
3738
};
3839

3940
describe('<DeleteWithConfirmButton />', () => {
41+
it('should allow resource specific label, confirm title and confirm content', async () => {
42+
render(
43+
<Label
44+
translations="resource specific"
45+
mutationMode="pessimistic"
46+
/>
47+
);
48+
fireEvent.click(
49+
await screen.findByText('Delete War and Peace permanently')
50+
);
51+
await screen.findByText('Delete War and Peace permanently?');
52+
await screen.findByText(
53+
'Are you sure you want to delete War and Peace permanently?'
54+
);
55+
fireEvent.click(screen.getByText('Cancel'));
56+
fireEvent.click(screen.getByText('English', { selector: 'button' }));
57+
fireEvent.click(await screen.findByText('Français'));
58+
fireEvent.click(
59+
await screen.findByText('Supprimer définitivement War and Peace')
60+
);
61+
await screen.findByText('Supprimer définitivement War and Peace ?');
62+
await screen.findByText(
63+
'Êtes-vous sûr de vouloir supprimer définitivement War and Peace ?'
64+
);
65+
});
66+
4067
it('should render a button with no DOM errors', () => {
4168
const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
4269

@@ -68,8 +95,8 @@ describe('<DeleteWithConfirmButton />', () => {
6895

6996
it('should allow to override the resource', async () => {
7097
const dataProvider = testDataProvider({
98+
// @ts-ignore
7199
getOne: () =>
72-
// @ts-ignore
73100
Promise.resolve({
74101
data: { id: 123, title: 'lorem' },
75102
}),
@@ -109,8 +136,8 @@ describe('<DeleteWithConfirmButton />', () => {
109136

110137
it('should allows to undo the deletion after confirmation if mutationMode is undoable', async () => {
111138
const dataProvider = testDataProvider({
139+
// @ts-ignore
112140
getOne: () =>
113-
// @ts-ignore
114141
Promise.resolve({
115142
data: { id: 123, title: 'lorem' },
116143
}),
@@ -154,8 +181,8 @@ describe('<DeleteWithConfirmButton />', () => {
154181

155182
it('should allow to override the success side effects', async () => {
156183
const dataProvider = testDataProvider({
184+
// @ts-ignore
157185
getOne: () =>
158-
// @ts-ignore
159186
Promise.resolve({
160187
data: { id: 123, title: 'lorem' },
161188
}),
@@ -203,8 +230,8 @@ describe('<DeleteWithConfirmButton />', () => {
203230
it('should allow to override the error side effects', async () => {
204231
jest.spyOn(console, 'error').mockImplementation(() => {});
205232
const dataProvider = testDataProvider({
233+
// @ts-ignore
206234
getOne: () =>
207-
// @ts-ignore
208235
Promise.resolve({
209236
data: { id: 123, title: 'lorem' },
210237
}),
@@ -251,8 +278,8 @@ describe('<DeleteWithConfirmButton />', () => {
251278

252279
it('should allow to override the translateOptions props', async () => {
253280
const dataProvider = testDataProvider({
281+
// @ts-ignore
254282
getOne: () =>
255-
// @ts-ignore
256283
Promise.resolve({
257284
data: { id: 123, title: 'lorem' },
258285
}),
@@ -294,8 +321,8 @@ describe('<DeleteWithConfirmButton />', () => {
294321
it('should display success message after successful deletion', async () => {
295322
const successMessage = 'Test Message';
296323
const dataProvider = testDataProvider({
324+
// @ts-ignore
297325
getOne: () =>
298-
// @ts-ignore
299326
Promise.resolve({
300327
data: { id: 123, title: 'lorem' },
301328
}),

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import {
1515
useGetRecordRepresentation,
1616
useResourceTranslation,
1717
} from 'ra-core';
18+
import { humanize, singularize } from 'inflection';
1819

1920
import { Confirm } from '../layout';
2021
import { Button, ButtonProps } from './Button';
21-
import { humanize, singularize } from 'inflection';
2222

2323
export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
2424
props: DeleteWithConfirmButtonProps<RecordType>
@@ -131,8 +131,8 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
131131
<Confirm
132132
isOpen={open}
133133
loading={isPending}
134-
title={confirmTitle}
135-
content={confirmContent}
134+
title={<>{confirmTitle}</>}
135+
content={<>{confirmContent}</>}
136136
confirmColor={confirmColor}
137137
onConfirm={handleDelete}
138138
onClose={handleDialogClose}

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

Lines changed: 9 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 { Label } from './DeleteButton.stories';
1617

1718
const theme = createTheme();
1819

@@ -23,6 +24,14 @@ const invalidButtonDomProps = {
2324
};
2425

2526
describe('<DeleteWithUndoButton />', () => {
27+
it('should allow resource specific default title', async () => {
28+
render(<Label translations="resource specific" />);
29+
await screen.findByText('Delete War and Peace permanently');
30+
fireEvent.click(screen.getByText('English', { selector: 'button' }));
31+
fireEvent.click(await screen.findByText('Français'));
32+
await screen.findByText('Supprimer définitivement War and Peace');
33+
});
34+
2635
it('should render a button with no DOM errors', () => {
2736
const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
2837

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

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import {
1111
useResourceContext,
1212
RedirectionSideEffect,
1313
useTranslate,
14-
useGetResourceLabel,
1514
useGetRecordRepresentation,
15+
useResourceTranslation,
1616
} from 'ra-core';
17+
import { humanize, singularize } from 'inflection';
1718

1819
import { Button, ButtonProps } from './Button';
1920

@@ -48,22 +49,31 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
4849
successMessage,
4950
});
5051
const translate = useTranslate();
51-
const getResourceLabel = useGetResourceLabel();
52-
const getRecordRepresentation = useGetRecordRepresentation();
53-
const recordRepresentationValue = getRecordRepresentation(record);
54-
const recordRepresentation =
55-
typeof recordRepresentationValue === 'string'
56-
? recordRepresentationValue
57-
: recordRepresentationValue?.toString();
58-
const label =
59-
labelProp ??
60-
translate(`resources.${resource}.action.delete`, {
61-
recordRepresentation,
62-
_: translate(`ra.action.delete`, {
63-
name: getResourceLabel(resource, 1),
64-
recordRepresentation,
52+
const getRecordRepresentation = useGetRecordRepresentation(resource);
53+
let recordRepresentation = getRecordRepresentation(record);
54+
const resourceName = translate(`resources.${resource}.forcedCaseName`, {
55+
smart_count: 1,
56+
_: humanize(
57+
translate(`resources.${resource}.name`, {
58+
smart_count: 1,
59+
_: resource ? singularize(resource) : undefined,
6560
}),
66-
});
61+
true
62+
),
63+
});
64+
// We don't support React elements for this
65+
if (React.isValidElement(recordRepresentation)) {
66+
recordRepresentation = `#${record?.id}`;
67+
}
68+
const label = useResourceTranslation({
69+
resourceI18nKey: `resources.${resource}.action.delete`,
70+
baseI18nKey: 'ra.action.delete',
71+
options: {
72+
name: resourceName,
73+
recordRepresentation,
74+
},
75+
userText: labelProp,
76+
});
6777

6878
return (
6979
<Button

0 commit comments

Comments
 (0)