Skip to content
Permalink
Browse files

Add dom fixture for autofilled form state (#17951)

  • Loading branch information
hassan-alam committed Feb 4, 2020
1 parent 3e9251d commit 2078aa9a401aa91e97b42cdd36a6310888128ab2
@@ -86,6 +86,7 @@ class Header extends React.Component {
<option value="/mouse-events">Mouse Events</option>
<option value="/selection-events">Selection Events</option>
<option value="/suspense">Suspense</option>
<option value="/form-state">Form State</option>
</select>
</label>
<label htmlFor="global_version">
@@ -0,0 +1,60 @@
import Fixture from '../../Fixture';
const React = window.React;

class ControlledFormFixture extends React.Component {
constructor(props) {
super(props);
this.state = {name: '', email: ''};

this.handleEmailChange = this.handleEmailChange.bind(this);
this.handleNameChange = this.handleNameChange.bind(this);
}

handleEmailChange(event) {
this.setState({email: event.target.value});
}

handleNameChange(event) {
this.setState({name: event.target.value});
}

render() {
return (
<Fixture>
<form>
<label>
Name:
<input
type="text"
value={this.state.name}
onChange={this.handleNameChange}
name="name"
x-autocompletetype="name"
/>
</label>
<br />
<label>
Email:
<input
type="text"
value={this.state.email}
onChange={this.handleEmailChange}
name="email"
x-autocompletetype="email"
/>
</label>
</form>
<br />
<div>
<span>States</span>
<br />
<span>Name: {this.state.name}</span>
<br />
<span>Email: {this.state.email}</span>
</div>
</Fixture>
);
}
}

export default ControlledFormFixture;
@@ -0,0 +1,60 @@
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
import ControlledFormFixture from './ControlledFormFixture';
const React = window.React;

export default class FormStateCases extends React.Component {
render() {
return (
<FixtureSet title="Form State">
<TestCase
title="Form state autofills from browser"
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.">
<TestCase.Steps>
<li>
Set up autofill/autocomplete for your browser.
<br />
Instructions:
<ul>
<li>
<SafeLink
href="https://support.google.com/chrome/answer/142893?co=GENIE.Platform%3DDesktop&hl=en"
text="Google Chrome"
/>
</li>
<li>
<SafeLink
href="https://support.mozilla.org/en-US/kb/autofill-logins-firefox"
text="Mozilla FireFox"
/>
</li>
<li>
<SafeLink
href="https://support.microsoft.com/en-us/help/4027718/microsoft-edge-automatically-fill-info"
text="Microsoft Edge"
/>
</li>
</ul>
</li>
<li>Click into any input.</li>
<li>Select any autofill option.</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Autofill options should appear when clicking into fields. Selected
autofill options should change state (shown underneath, under
"States").
</TestCase.ExpectedResult>
<ControlledFormFixture />
</TestCase>
</FixtureSet>
);
}
}

const SafeLink = ({text, href}) => {
return (
<a target="_blank" rel="noreferrer" href={href}>
{text}
</a>
);
};

0 comments on commit 2078aa9

Please sign in to comment.
You can’t perform that action at this time.