/
index.js
152 lines (131 loc) · 5.12 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
import Fixture from '../../Fixture';
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
import InputTestCase from './InputTestCase';
import ReplaceEmailInput from './ReplaceEmailInput';
const React = window.React;
class TextInputFixtures extends React.Component {
render() {
return (
<FixtureSet
title="Inputs"
description="Common behavior across controlled and uncontrolled inputs">
<TestCase title="Numbers in a controlled text field with no handler">
<TestCase.Steps>
<li>Move the cursor to after "2" in the text field</li>
<li>Type ".2" into the text input</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The text field's value should not update.
</TestCase.ExpectedResult>
<Fixture>
<div className="control-box">
<fieldset>
<legend>Value as number</legend>
<input value={2} onChange={() => {}} />
</fieldset>
<fieldset>
<legend>Value as string</legend>
<input value={'2'} onChange={() => {}} />
</fieldset>
</div>
</Fixture>
<p className="footnote">
This issue was first introduced when we added extra logic to number
inputs to prevent unexpected behavior in Chrome and Safari (see the
number input test case).
</p>
</TestCase>
<TestCase
title="Required Inputs"
affectedBrowsers="Firefox"
relatedIssues="8395">
<TestCase.Steps>
<li>View this test in Firefox</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
You should{' '}
<b>
<i>not</i>
</b>{' '}
see a red aura, indicating the input is invalid.
<br />
This aura looks roughly like:
<input style={{boxShadow: '0 0 1px 1px red', marginLeft: 8}} />
</TestCase.ExpectedResult>
<Fixture>
<form className="control-box">
<fieldset>
<legend>Text</legend>
<input required={true} />
</fieldset>
<fieldset>
<legend>Date</legend>
<input type="date" required={true} />
</fieldset>
</form>
</Fixture>
<p className="footnote">
Checking the date type is also important because of a prior fix for
iOS Safari that involved assigning over value/defaultValue
properties of the input to prevent a display bug. This also
triggered input validation.
</p>
</TestCase>
<TestCase title="Cursor when editing email inputs">
<TestCase.Steps>
<li>Type "user@example.com"</li>
<li>Select "@"</li>
<li>Type ".", to replace "@" with a period</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The text field's cursor should not jump to the end.
</TestCase.ExpectedResult>
<InputTestCase type="email" defaultValue="" />
</TestCase>
<TestCase title="Cursor when editing url inputs">
<TestCase.Steps>
<li>Type "http://www.example.com"</li>
<li>Select "www."</li>
<li>Press backspace/delete</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The text field's cursor should not jump to the end.
</TestCase.ExpectedResult>
<InputTestCase type="url" defaultValue="" />
</TestCase>
<TestCase
title="Replacing email input with text disabled input"
relatedIssues="12062">
<TestCase.Steps>
<li>Type "test@test.com"</li>
<li>Press enter</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
There should be no selection-related error in the console.
</TestCase.ExpectedResult>
<ReplaceEmailInput />
</TestCase>
<TestCase title="All inputs" description="General test of all inputs">
<InputTestCase type="text" defaultValue="Text" />
<InputTestCase type="email" defaultValue="user@example.com" />
<InputTestCase type="number" defaultValue={0} />
<InputTestCase type="url" defaultValue="http://example.com" />
<InputTestCase type="tel" defaultValue="555-555-5555" />
<InputTestCase type="color" defaultValue="#ff0000" />
<InputTestCase type="date" defaultValue="2017-01-01" />
<InputTestCase
type="datetime-local"
defaultValue="2017-01-01T01:00"
/>
<InputTestCase type="time" defaultValue="01:00" />
<InputTestCase type="month" defaultValue="2017-01" />
<InputTestCase type="week" defaultValue="2017-W01" />
<InputTestCase type="range" defaultValue={0.5} />
<InputTestCase type="password" defaultValue="" />
</TestCase>
</FixtureSet>
);
}
}
export default TextInputFixtures;