Add dom fixture for autofilled form state (#17951)
Hassan Alam committed
Feb 4, 2020 at 08:53 UTC
2078aa9a401aa91e97b42cdd36a6310888128ab2
3 files changed
+121
fixtures/dom/src/components/Header.js
+1
@@ -86,6 +86,7 @@ class Header extends React.Component {
86
<option value="/mouse-events">Mouse Events</option>
87
<option value="/selection-events">Selection Events</option>
88
<option value="/suspense">Suspense</option>
89
+ <option value="/form-state">Form State</option>
90
</select>
91
</label>
92
<label htmlFor="global_version">
fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js
new
+60
@@ -0,0 +1,60 @@
1
+import Fixture from '../../Fixture';
2
+const React = window.React;
3
+
4
+class ControlledFormFixture extends React.Component {
5
+ constructor(props) {
6
+ super(props);
7
+ this.state = {name: '', email: ''};
8
+
9
+ this.handleEmailChange = this.handleEmailChange.bind(this);
10
+ this.handleNameChange = this.handleNameChange.bind(this);
11
+ }
12
+
13
+ handleEmailChange(event) {
14
+ this.setState({email: event.target.value});
15
+ }
16
+
17
+ handleNameChange(event) {
18
+ this.setState({name: event.target.value});
19
+ }
20
+
21
+ render() {
22
+ return (
23
+ <Fixture>
24
+ <form>
25
+ <label>
26
+ Name:
27
+ <input
28
+ type="text"
29
+ value={this.state.name}
30
+ onChange={this.handleNameChange}
31
+ name="name"
32
+ x-autocompletetype="name"
33
+ />
34
+ </label>
35
+ <br />
36
+ <label>
37
+ Email:
38
+ <input
39
+ type="text"
40
+ value={this.state.email}
41
+ onChange={this.handleEmailChange}
42
+ name="email"
43
+ x-autocompletetype="email"
44
+ />
45
+ </label>
46
+ </form>
47
+ <br />
48
+ <div>
49
+ <span>States</span>
50
+ <br />
51
+ <span>Name: {this.state.name}</span>
52
+ <br />
53
+ <span>Email: {this.state.email}</span>
54
+ </div>
55
+ </Fixture>
56
+ );
57
+ }
58
+}
59
+
60
+export default ControlledFormFixture;
fixtures/dom/src/components/fixtures/form-state/index.js
new
+60
@@ -0,0 +1,60 @@
1
+import FixtureSet from '../../FixtureSet';
2
+import TestCase from '../../TestCase';
3
+import ControlledFormFixture from './ControlledFormFixture';
4
+const React = window.React;
5
+
6
+export default class FormStateCases extends React.Component {
7
+ render() {
8
+ return (
9
+ <FixtureSet title="Form State">
10
+ <TestCase
11
+ title="Form state autofills from browser"
12
+ description="Form start should autofill/autocomplete if user has autocomplete/autofill information saved. The user may need to set-up autofill or autocomplete with their specific browser.">
13
+ <TestCase.Steps>
14
+ <li>
15
+ Set up autofill/autocomplete for your browser.
16
+ <br />
17
+ Instructions:
18
+ <ul>
19
+ <li>
20
+ <SafeLink
21
+ href="https://support.google.com/chrome/answer/142893?co=GENIE.Platform%3DDesktop&hl=en"
22
+ text="Google Chrome"
23
+ />
24
+ </li>
25
+ <li>
26
+ <SafeLink
27
+ href="https://support.mozilla.org/en-US/kb/autofill-logins-firefox"
28
+ text="Mozilla FireFox"
29
+ />
30
+ </li>
31
+ <li>
32
+ <SafeLink
33
+ href="https://support.microsoft.com/en-us/help/4027718/microsoft-edge-automatically-fill-info"
34
+ text="Microsoft Edge"
35
+ />
36
+ </li>
37
+ </ul>
38
+ </li>
39
+ <li>Click into any input.</li>
40
+ <li>Select any autofill option.</li>
41
+ </TestCase.Steps>
42
+ <TestCase.ExpectedResult>
43
+ Autofill options should appear when clicking into fields. Selected
44
+ autofill options should change state (shown underneath, under
45
+ "States").
46
+ </TestCase.ExpectedResult>
47
+ <ControlledFormFixture />
48
+ </TestCase>
49
+ </FixtureSet>
50
+ );
51
+ }
52
+}
53
+
54
+const SafeLink = ({text, href}) => {
55
+ return (
56
+ <a target="_blank" rel="noreferrer" href={href}>
57
+ {text}
58
+ </a>
59
+ );
60
+};