Add date time test fixtures (#10154)
* Add date time test fixtures This commit adds a new section for the DOM test fixtures specifically for date inputs. Additionally, it adds a test case to verify that correct transference of dates between the `"date"` and `"datetime-locale"` input types. * Adjust date parsing to be clearer
Nathan Hunzaker committed
Jul 27, 2017 at 13:24 UTC
083cc5f4f925db4004a2266c722a4b73b8da3663
4 files changed
+103
fixtures/dom/src/components/Header.js
+1
@@ -59,6 +59,7 @@ class Header extends React.Component {
59
Input change events
60
</option>
61
<option value="/buttons">Buttons</option>
62
+ <option value="/date-inputs">Date Inputs</option>
63
<option value="/error-handling">Error Handling</option>
64
</select>
65
</label>
fixtures/dom/src/components/fixtures/date-inputs/index.js
new
+33
@@ -0,0 +1,33 @@
1
+const React = window.React;
2
+
3
+import Fixture from '../../Fixture';
4
+import FixtureSet from '../../FixtureSet';
5
+import TestCase from '../../TestCase';
6
+import SwitchDateTestCase from './switch-date-test-case';
7
+
8
+class DateInputFixtures extends React.Component {
9
+ render() {
10
+ return (
11
+ <FixtureSet title="Dates" description="">
12
+ <TestCase title="Switching between date and datetime-local">
13
+ <TestCase.Steps>
14
+ <li>Type a date into the date picker</li>
15
+ <li>Toggle "Switch type"</li>
16
+ </TestCase.Steps>
17
+
18
+ <TestCase.ExpectedResult>
19
+ The month, day, and year values should correctly
20
+ transfer. The hours/minutes/seconds should not be
21
+ discarded.
22
+ </TestCase.ExpectedResult>
23
+
24
+ <Fixture>
25
+ <SwitchDateTestCase />
26
+ </Fixture>
27
+ </TestCase>
28
+ </FixtureSet>
29
+ );
30
+ }
31
+}
32
+
33
+export default DateInputFixtures;
fixtures/dom/src/components/fixtures/date-inputs/switch-date-test-case.js
new
+66
@@ -0,0 +1,66 @@
1
+const React = window.React;
2
+
3
+/**
4
+ * This test case was originally provided by @richsoni,
5
+ * https://github.com/facebook/react/issues/8116
6
+ */
7
+class SwitchDateTestCase extends React.Component {
8
+ state = {
9
+ fullDate: false,
10
+ date: new Date(),
11
+ };
12
+
13
+ render() {
14
+ const attrs = this.inputAttrs();
15
+
16
+ return (
17
+ <div>
18
+ <p><b>{attrs.type}</b> input type ({attrs.value})</p>
19
+ <p>
20
+ <input
21
+ type={attrs.type}
22
+ value={attrs.value}
23
+ onChange={this.onInputChange}
24
+ />
25
+ <label>
26
+ <input
27
+ type="checkbox"
28
+ checked={this.state.fullDate}
29
+ onChange={this.updateFullDate}
30
+ />
31
+ {' '}
32
+ Switch type
33
+ </label>
34
+ </p>
35
+ </div>
36
+ );
37
+ }
38
+
39
+ inputAttrs() {
40
+ if (this.state.fullDate) {
41
+ return {
42
+ type: 'datetime-local',
43
+ value: this.state.date.toISOString().replace(/\..*Z/, ''),
44
+ };
45
+ } else {
46
+ return {
47
+ type: 'date',
48
+ value: this.state.date.toISOString().replace(/T.*/, ''),
49
+ };
50
+ }
51
+ }
52
+
53
+ onInputChange = event => {
54
+ this.setState({
55
+ date: new Date(Date.parse(event.target.value)),
56
+ });
57
+ };
58
+
59
+ updateFullDate = () => {
60
+ this.setState({
61
+ fullDate: !this.state.fullDate,
62
+ });
63
+ };
64
+}
65
+
66
+export default SwitchDateTestCase;
fixtures/dom/src/components/fixtures/index.js
+3
@@ -7,6 +7,7 @@ import InputChangeEvents from './input-change-events';
7
import NumberInputFixtures from './number-inputs';
8
import PasswordInputFixtures from './password-inputs';
9
import ButtonFixtures from './buttons';
10
+import DateInputFixtures from './date-inputs';
11
import ErrorHandling from './error-handling';
12
13
/**
@@ -31,6 +32,8 @@ function FixturesPage() {
32
return <PasswordInputFixtures />;
33
case '/buttons':
34
return <ButtonFixtures />;
35
+ case '/date-inputs':
36
+ return <DateInputFixtures />;
37
case '/error-handling':
38
return <ErrorHandling />;
39
default: