<option value="/form-state">Form State</option>

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;

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>

);