Skip to content

Commit a70b0df

Browse files
author
React-Admin CI
committed
Add tests for parse
1 parent 5cc73a0 commit a70b0df

File tree

4 files changed

+108
-35
lines changed

4 files changed

+108
-35
lines changed

‎packages/ra-ui-materialui/src/input/DateInput.spec.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import { useFormState } from 'react-hook-form';
88
import { AdminContext } from '../AdminContext';
99
import { SimpleForm } from '../form';
1010
import { DateInput } from './DateInput';
11-
import { Basic, ExternalChanges, Parse } from './DateInput.stories';
11+
import {
12+
Basic,
13+
ExternalChanges,
14+
ExternalChangesWithParse,
15+
Parse,
16+
} from './DateInput.stories';
1217

1318
describe('<DateInput />', () => {
1419
const defaultProps = {
@@ -247,13 +252,7 @@ describe('<DateInput />', () => {
247252
});
248253

249254
it('should change its value when the form value has changed', async () => {
250-
render(
251-
<ExternalChanges
252-
simpleFormProps={{
253-
defaultValues: { publishedAt: '2021-09-11' },
254-
}}
255-
/>
256-
);
255+
render(<ExternalChanges />);
257256
await screen.findByText('"2021-09-11" (string)');
258257
const input = screen.getByLabelText('Published at') as HTMLInputElement;
259258
fireEvent.change(input, {
@@ -265,14 +264,27 @@ describe('<DateInput />', () => {
265264
await screen.findByText('"2021-10-20" (string)');
266265
});
267266

268-
it('should change its value when the form value is reset', async () => {
269-
render(
270-
<ExternalChanges
271-
simpleFormProps={{
272-
defaultValues: { publishedAt: '2021-09-11' },
273-
}}
274-
/>
267+
it('should change its value when the form value has changed with a custom parse', async () => {
268+
render(<ExternalChangesWithParse />);
269+
await screen.findByText(
270+
'Sat Sep 11 2021 02:00:00 GMT+0200 (Central European Summer Time)'
275271
);
272+
const input = screen.getByLabelText('Published at') as HTMLInputElement;
273+
fireEvent.change(input, {
274+
target: { value: '2021-10-30' },
275+
});
276+
fireEvent.blur(input);
277+
await screen.findByText(
278+
'Sat Oct 30 2021 02:00:00 GMT+0200 (Central European Summer Time)'
279+
);
280+
fireEvent.click(screen.getByText('Change value'));
281+
await screen.findByText(
282+
'Wed Oct 20 2021 02:00:00 GMT+0200 (Central European Summer Time)'
283+
);
284+
});
285+
286+
it('should change its value when the form value is reset', async () => {
287+
render(<ExternalChanges />);
276288
await screen.findByText('"2021-09-11" (string)');
277289
const input = screen.getByLabelText('Published at') as HTMLInputElement;
278290
fireEvent.change(input, {

‎packages/ra-ui-materialui/src/input/DateInput.stories.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,23 @@ export const ExternalChanges = ({
118118
</Wrapper>
119119
);
120120

121+
export const ExternalChangesWithParse = ({
122+
dateInputProps = {
123+
parse: value => new Date(value),
124+
},
125+
simpleFormProps = {
126+
defaultValues: { publishedAt: new Date('2021-09-11') },
127+
},
128+
}: {
129+
dateInputProps?: Partial<DateInputProps>;
130+
simpleFormProps?: Omit<SimpleFormProps, 'children'>;
131+
}) => (
132+
<Wrapper simpleFormProps={simpleFormProps}>
133+
<DateInput source="publishedAt" {...dateInputProps} />
134+
<DateHelper source="publishedAt" value={new Date('2021-10-20')} />
135+
</Wrapper>
136+
);
137+
121138
const i18nProvider = polyglotI18nProvider(() => englishMessages);
122139

123140
const Wrapper = ({
@@ -137,7 +154,13 @@ const Wrapper = ({
137154
</AdminContext>
138155
);
139156

140-
const DateHelper = ({ source, value }: { source: string; value: string }) => {
157+
const DateHelper = ({
158+
source,
159+
value,
160+
}: {
161+
source: string;
162+
value: string | Date;
163+
}) => {
141164
const record = useRecordContext();
142165
const { resetField, setValue } = useFormContext();
143166
const currentValue = useWatch({ name: source });
@@ -148,7 +171,7 @@ const DateHelper = ({ source, value }: { source: string; value: string }) => {
148171
Record value: {get(record, source)?.toString() ?? '-'}
149172
</Typography>
150173
<Typography>
151-
Current value: {currentValue?.toString() ?? '-'}
174+
Current value: <span>{currentValue?.toString() ?? '-'}</span>
152175
</Typography>
153176
<Button
154177
onClick={() => {

‎packages/ra-ui-materialui/src/input/DateTimeInput.spec.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import { SimpleForm, Toolbar } from '../form';
1010
import { DateTimeInput } from './DateTimeInput';
1111
import { ArrayInput, SimpleFormIterator } from './ArrayInput';
1212
import { SaveButton } from '../button';
13-
import { ExternalChanges } from './DateTimeInput.stories';
13+
import {
14+
ExternalChanges,
15+
ExternalChangesWithParse,
16+
} from './DateTimeInput.stories';
1417

1518
describe('<DateTimeInput />', () => {
1619
const defaultProps = {
@@ -199,13 +202,7 @@ describe('<DateTimeInput />', () => {
199202
});
200203

201204
it('should change its value when the form value has changed', async () => {
202-
render(
203-
<ExternalChanges
204-
simpleFormProps={{
205-
defaultValues: { published: '2021-09-11 20:00:00' },
206-
}}
207-
/>
208-
);
205+
render(<ExternalChanges />);
209206
await screen.findByText('"2021-09-11 20:00:00" (string)');
210207
const input = screen.getByLabelText('Published') as HTMLInputElement;
211208
fireEvent.change(input, {
@@ -217,14 +214,29 @@ describe('<DateTimeInput />', () => {
217214
await screen.findByText('"2021-10-20 10:00:00" (string)');
218215
});
219216

220-
it('should change its value when the form value is reset', async () => {
221-
render(
222-
<ExternalChanges
223-
simpleFormProps={{
224-
defaultValues: { published: '2021-09-11 20:00:00' },
225-
}}
226-
/>
217+
it('should change its value when the form value has changed with custom parse', async () => {
218+
render(<ExternalChangesWithParse />);
219+
await screen.findByText(
220+
// Because of the parse that uses the Date object, we check the value displayed and not the form value
221+
// to avoid timezone issues
222+
'Sat Sep 11 2021 20:00:00 GMT+0200 (Central European Summer Time)'
227223
);
224+
const input = screen.getByLabelText('Published') as HTMLInputElement;
225+
fireEvent.change(input, {
226+
target: { value: '2021-10-30 09:00:00' },
227+
});
228+
fireEvent.blur(input);
229+
await screen.findByText(
230+
'Sat Oct 30 2021 09:00:00 GMT+0200 (Central European Summer Time)'
231+
);
232+
fireEvent.click(screen.getByText('Change value'));
233+
await screen.findByText(
234+
'Wed Oct 20 2021 10:00:00 GMT+0200 (Central European Summer Time)'
235+
);
236+
});
237+
238+
it('should change its value when the form value is reset', async () => {
239+
render(<ExternalChanges />);
228240
await screen.findByText('"2021-09-11 20:00:00" (string)');
229241
const input = screen.getByLabelText('Published') as HTMLInputElement;
230242
fireEvent.change(input, {

‎packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import get from 'lodash/get';
99
import { AdminContext } from '../AdminContext';
1010
import { Create } from '../detail';
1111
import { SimpleForm, SimpleFormProps } from '../form';
12-
import { DateTimeInput } from './DateTimeInput';
12+
import { DateTimeInput, DateTimeInputProps } from './DateTimeInput';
1313
import { FormInspector } from './common';
1414

1515
export default { title: 'ra-ui-materialui/input/DateTimeInput' };
@@ -61,6 +61,26 @@ export const ExternalChanges = ({
6161
</Wrapper>
6262
);
6363

64+
export const ExternalChangesWithParse = ({
65+
dateTimeInputProps = {
66+
parse: (value: string) => new Date(value),
67+
},
68+
simpleFormProps = {
69+
defaultValues: { published: new Date('2021-09-11 20:00:00') },
70+
},
71+
}: {
72+
dateTimeInputProps?: Partial<DateTimeInputProps>;
73+
simpleFormProps?: Omit<SimpleFormProps, 'children'>;
74+
}) => (
75+
<Wrapper simpleFormProps={simpleFormProps}>
76+
<DateTimeInput source="published" {...dateTimeInputProps} />
77+
<DateHelper
78+
source="published"
79+
value={new Date('2021-10-20 10:00:00')}
80+
/>
81+
</Wrapper>
82+
);
83+
6484
const i18nProvider = polyglotI18nProvider(() => englishMessages);
6585

6686
const Wrapper = ({
@@ -80,7 +100,13 @@ const Wrapper = ({
80100
</AdminContext>
81101
);
82102

83-
const DateHelper = ({ source, value }: { source: string; value: string }) => {
103+
const DateHelper = ({
104+
source,
105+
value,
106+
}: {
107+
source: string;
108+
value: string | Date;
109+
}) => {
84110
const record = useRecordContext();
85111
const { resetField, setValue } = useFormContext();
86112
const currentValue = useWatch({ name: source });
@@ -91,7 +117,7 @@ const DateHelper = ({ source, value }: { source: string; value: string }) => {
91117
Record value: {get(record, source)?.toString() ?? '-'}
92118
</Typography>
93119
<Typography>
94-
Current value: {currentValue?.toString() ?? '-'}
120+
Current value: <span>{currentValue?.toString() ?? '-'}</span>
95121
</Typography>
96122
<Button
97123
onClick={() => {

0 commit comments

Comments
 (0)