Skip to content

Commit 093f9fe

Browse files
wojtekmajwojtekmaj
committed
Rewrite test suite to React Hooks
1 parent 1250e56 commit 093f9fe

File tree

7 files changed

+140
-141
lines changed

7 files changed

+140
-141
lines changed

‎test/LocaleOptions.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33

44
export default function LocaleOptions({
55
locale,
6-
setState,
6+
setLocale,
77
}) {
88
function onChange(event) {
99
let { value: nextLocale } = event.target;
@@ -12,19 +12,19 @@ export default function LocaleOptions({
1212
nextLocale = null;
1313
}
1414

15-
setState({ locale: nextLocale });
15+
setLocale(nextLocale);
1616
}
1717

1818
function onCustomChange(event) {
1919
event.preventDefault();
2020

2121
const { value: nextLocale } = event.target.customLocale;
2222

23-
setState({ locale: nextLocale });
23+
setLocale(nextLocale);
2424
}
2525

2626
function resetLocale() {
27-
setState({ locale: null });
27+
setLocale(null);
2828
}
2929

3030
return (
@@ -119,5 +119,5 @@ export default function LocaleOptions({
119119

120120
LocaleOptions.propTypes = {
121121
locale: PropTypes.string,
122-
setState: PropTypes.func.isRequired,
122+
setLocale: PropTypes.func.isRequired,
123123
};

‎test/MaxDetailOptions.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ function upperCaseFirstLetter(str) {
77
return str.slice(0, 1).toUpperCase() + str.slice(1);
88
}
99

10-
export default function MaxDetailOptions({ maxDetail, minDetail, setState }) {
10+
export default function MaxDetailOptions({
11+
maxDetail,
12+
minDetail,
13+
setMaxDetail,
14+
}) {
1115
function onChange(event) {
1216
const { value } = event.target;
1317

14-
setState({ maxDetail: value });
18+
setMaxDetail(value);
1519
}
1620

1721
const minDetailIndex = allViews.indexOf(minDetail);
@@ -45,5 +49,5 @@ export default function MaxDetailOptions({ maxDetail, minDetail, setState }) {
4549
MaxDetailOptions.propTypes = {
4650
maxDetail: PropTypes.oneOf(allViews).isRequired,
4751
minDetail: PropTypes.oneOf(allViews).isRequired,
48-
setState: PropTypes.func.isRequired,
52+
setMaxDetail: PropTypes.func.isRequired,
4953
};

‎test/MinDetailOptions.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ function upperCaseFirstLetter(str) {
77
return str.slice(0, 1).toUpperCase() + str.slice(1);
88
}
99

10-
export default function MinDetailOptions({ maxDetail, minDetail, setState }) {
10+
export default function MinDetailOptions({
11+
maxDetail,
12+
minDetail,
13+
setMinDetail,
14+
}) {
1115
function onChange(event) {
1216
const { value } = event.target;
1317

14-
setState({ minDetail: value });
18+
setMinDetail(value);
1519
}
1620

1721
const maxDetailIndex = allViews.indexOf(maxDetail);
@@ -45,5 +49,5 @@ export default function MinDetailOptions({ maxDetail, minDetail, setState }) {
4549
MinDetailOptions.propTypes = {
4650
maxDetail: PropTypes.oneOf(allViews).isRequired,
4751
minDetail: PropTypes.oneOf(allViews).isRequired,
48-
setState: PropTypes.func.isRequired,
52+
setMinDetail: PropTypes.func.isRequired,
4953
};

‎test/Test.jsx‎

Lines changed: 96 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { PureComponent } from 'react';
1+
import React, { useState } from 'react';
22
import DatePicker from 'react-date-picker/src/entry.nostyle';
33
import 'react-date-picker/src/DatePicker.less';
44
// eslint-disable-next-line import/no-extraneous-dependencies
@@ -32,126 +32,111 @@ const placeholderProps = {
3232

3333
/* eslint-disable no-console */
3434

35-
export default class Test extends PureComponent {
36-
state = {
37-
disabled: false,
38-
locale: null,
39-
maxDate: new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12),
40-
maxDetail: 'month',
41-
minDate: new Date(1995, now.getUTCMonth() + 1, 15, 12),
42-
minDetail: 'century',
43-
returnValue: 'start',
44-
required: true,
45-
showLeadingZeros: true,
46-
showNeighboringMonth: false,
47-
showWeekNumbers: false,
48-
value: now,
49-
}
35+
const nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);
36+
const fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);
5037

51-
onChange = (value) => this.setState({ value })
38+
export default function Test() {
39+
const [disabled, setDisabled] = useState(false);
40+
const [locale, setLocale] = useState(null);
41+
const [maxDate, setMaxDate] = useState(fifteenthOfNextMonth);
42+
const [maxDetail, setMaxDetail] = useState('month');
43+
const [minDate, setMinDate] = useState(nineteenNinetyFive);
44+
const [minDetail, setMinDetail] = useState('century');
45+
const [returnValue/* , setReturnValue */] = useState('start');
46+
const [required, setRequired] = useState(true);
47+
const [showLeadingZeros, setShowLeadingZeros] = useState(true);
48+
const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
49+
const [showWeekNumbers, setShowWeekNumbers] = useState(false);
50+
const [value, setValue] = useState(now);
5251

53-
render() {
54-
const {
55-
disabled,
56-
locale,
57-
maxDate,
58-
maxDetail,
59-
minDate,
60-
minDetail,
61-
returnValue,
62-
required,
63-
showLeadingZeros,
64-
showNeighboringMonth,
65-
showWeekNumbers,
66-
value,
67-
} = this.state;
52+
return (
53+
<div className="Test">
54+
<header>
55+
<h1>
56+
react-date-picker test page
57+
</h1>
58+
</header>
59+
<div className="Test__container">
60+
<aside className="Test__container__options">
61+
<MinDetailOptions
62+
maxDetail={maxDetail}
63+
minDetail={minDetail}
64+
setMinDetail={setMinDetail}
65+
/>
66+
<MaxDetailOptions
67+
maxDetail={maxDetail}
68+
minDetail={minDetail}
69+
setMaxDetail={setMaxDetail}
70+
/>
71+
<ValidityOptions
72+
maxDate={maxDate}
73+
minDate={minDate}
74+
required={required}
75+
setMaxDate={setMaxDate}
76+
setMinDate={setMinDate}
77+
setRequired={setRequired}
78+
/>
79+
<LocaleOptions
80+
locale={locale}
81+
setLocale={setLocale}
82+
/>
83+
<ValueOptions
84+
setValue={setValue}
85+
value={value}
86+
/>
87+
<ViewOptions
88+
disabled={disabled}
89+
setDisabled={setDisabled}
90+
setShowLeadingZeros={setShowLeadingZeros}
91+
setShowNeighboringMonth={setShowNeighboringMonth}
92+
setShowWeekNumbers={setShowWeekNumbers}
93+
showLeadingZeros={showLeadingZeros}
94+
showNeighboringMonth={showNeighboringMonth}
95+
showWeekNumbers={showWeekNumbers}
96+
/>
97+
</aside>
98+
<main className="Test__container__content">
99+
<form
100+
onSubmit={(event) => {
101+
event.preventDefault();
68102

69-
const setState = (state) => this.setState(state);
70-
71-
return (
72-
<div className="Test">
73-
<header>
74-
<h1>
75-
react-date-picker test page
76-
</h1>
77-
</header>
78-
<div className="Test__container">
79-
<aside className="Test__container__options">
80-
<MinDetailOptions
81-
maxDetail={maxDetail}
82-
minDetail={minDetail}
83-
setState={setState}
84-
/>
85-
<MaxDetailOptions
86-
maxDetail={maxDetail}
87-
minDetail={minDetail}
88-
setState={setState}
89-
/>
90-
<ValidityOptions
103+
console.warn('Calendar triggered submitting the form.');
104+
console.log(event);
105+
}}
106+
>
107+
<DatePicker
108+
{...ariaLabelProps}
109+
{...placeholderProps}
110+
calendarClassName="myCustomCalendarClassName"
111+
className="myCustomDatePickerClassName"
112+
disabled={disabled}
113+
locale={locale}
91114
maxDate={maxDate}
115+
maxDetail={maxDetail}
92116
minDate={minDate}
117+
minDetail={minDetail}
118+
name="myCustomName"
119+
onCalendarClose={() => console.log('Calendar closed')}
120+
onCalendarOpen={() => console.log('Calendar opened')}
121+
onChange={setValue}
93122
required={required}
94-
setState={setState}
95-
/>
96-
<LocaleOptions
97-
locale={locale}
98-
setState={setState}
99-
/>
100-
<ValueOptions
101-
setState={setState}
102-
value={value}
103-
/>
104-
<ViewOptions
105-
disabled={disabled}
106-
setState={setState}
123+
returnValue={returnValue}
107124
showLeadingZeros={showLeadingZeros}
108125
showNeighboringMonth={showNeighboringMonth}
109126
showWeekNumbers={showWeekNumbers}
127+
value={value}
110128
/>
111-
</aside>
112-
<main className="Test__container__content">
113-
<form
114-
onSubmit={(event) => {
115-
event.preventDefault();
116-
117-
console.warn('Calendar triggered submitting the form.');
118-
console.log(event);
119-
}}
129+
<br />
130+
<br />
131+
<button
132+
id="submit"
133+
type="submit"
120134
>
121-
<DatePicker
122-
{...ariaLabelProps}
123-
{...placeholderProps}
124-
calendarClassName="myCustomCalendarClassName"
125-
className="myCustomDatePickerClassName"
126-
disabled={disabled}
127-
locale={locale}
128-
maxDate={maxDate}
129-
maxDetail={maxDetail}
130-
minDate={minDate}
131-
minDetail={minDetail}
132-
name="myCustomName"
133-
onCalendarClose={() => console.log('Calendar closed')}
134-
onCalendarOpen={() => console.log('Calendar opened')}
135-
onChange={this.onChange}
136-
required={required}
137-
returnValue={returnValue}
138-
showLeadingZeros={showLeadingZeros}
139-
showNeighboringMonth={showNeighboringMonth}
140-
showWeekNumbers={showWeekNumbers}
141-
value={value}
142-
/>
143-
<br />
144-
<br />
145-
<button
146-
id="submit"
147-
type="submit"
148-
>
149-
Submit
150-
</button>
151-
</form>
152-
</main>
153-
</div>
135+
Submit
136+
</button>
137+
</form>
138+
</main>
154139
</div>
155-
);
156-
}
140+
</div>
141+
);
157142
}

‎test/ValidityOptions.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,20 @@ export default function ValidityOptions({
66
maxDate,
77
minDate,
88
required,
9-
setState,
9+
setMaxDate,
10+
setMinDate,
11+
setRequired,
1012
}) {
1113
function onMinChange(event) {
1214
const { value } = event.target;
1315

14-
setState({ minDate: value ? new Date(value) : null });
16+
setMinDate(value ? new Date(value) : null);
1517
}
1618

1719
function onMaxChange(event) {
1820
const { value } = event.target;
1921

20-
setState({ maxDate: value ? new Date(value) : null });
22+
setMaxDate(value ? new Date(value) : null);
2123
}
2224

2325
return (
@@ -38,7 +40,7 @@ export default function ValidityOptions({
3840
/>
3941
&nbsp;
4042
<button
41-
onClick={() => setState({ minDate: null })}
43+
onClick={() => setMinDate(null)}
4244
type="button"
4345
>
4446
Clear
@@ -57,7 +59,7 @@ export default function ValidityOptions({
5759
/>
5860
&nbsp;
5961
<button
60-
onClick={() => setState({ maxDate: null })}
62+
onClick={() => setMaxDate(null)}
6163
type="button"
6264
>
6365
Clear
@@ -68,7 +70,7 @@ export default function ValidityOptions({
6870
<input
6971
checked={required}
7072
id="required"
71-
onChange={(event) => setState({ required: event.target.checked })}
73+
onChange={(event) => setRequired(event.target.checked)}
7274
type="checkbox"
7375
/>
7476
<label htmlFor="required">
@@ -83,5 +85,7 @@ ValidityOptions.propTypes = {
8385
maxDate: PropTypes.instanceOf(Date),
8486
minDate: PropTypes.instanceOf(Date),
8587
required: PropTypes.bool,
86-
setState: PropTypes.func.isRequired,
88+
setMaxDate: PropTypes.func.isRequired,
89+
setMinDate: PropTypes.func.isRequired,
90+
setRequired: PropTypes.func.isRequired,
8791
};

0 commit comments

Comments
 (0)