Add test fixture for initial input validation bug in Firefox (#11760)
Nathan Hunzaker committed
Dec 4, 2017 at 08:59 UTC
2091c625581c17eff71e0b7f929f4236faceec60
1 file changed
+40
fixtures/dom/src/components/fixtures/text-inputs/index.js
+40
@@ -42,6 +42,46 @@ class TextInputFixtures extends React.Component {
42
</p>
43
</TestCase>
44
45
+ <TestCase
46
+ title="Required Inputs"
47
+ affectedBrowsers="Firefox"
48
+ relatedIssues="8395">
49
+ <TestCase.Steps>
50
+ <li>View this test in Firefox</li>
51
+ </TestCase.Steps>
52
+
53
+ <TestCase.ExpectedResult>
54
+ You should{' '}
55
+ <b>
56
+ <i>not</i>
57
+ </b>{' '}
58
+ see a red aura, indicating the input is invalid.
59
+ <br />
60
+ This aura looks roughly like:
61
+ <input style={{boxShadow: '0 0 1px 1px red', marginLeft: 8}} />
62
+ </TestCase.ExpectedResult>
63
+
64
+ <Fixture>
65
+ <form className="control-box">
66
+ <fieldset>
67
+ <legend>Text</legend>
68
+ <input required={true} />
69
+ </fieldset>
70
+ <fieldset>
71
+ <legend>Date</legend>
72
+ <input type="date" required={true} />
73
+ </fieldset>
74
+ </form>
75
+ </Fixture>
76
+
77
+ <p className="footnote">
78
+ Checking the date type is also important because of a prior fix for
79
+ iOS Safari that involved assigning over value/defaultValue
80
+ properties of the input to prevent a display bug. This also
81
+ triggered input validation.
82
+ </p>
83
+ </TestCase>
84
+
85
<TestCase title="Cursor when editing email inputs">
86
<TestCase.Steps>
87
<li>Type "user@example.com"</li>