From 2078aa9a401aa91e97b42cdd36a6310888128ab2 Mon Sep 17 00:00:00 2001
From: Hassan Alam <hassan.alam1@outlook.com>
Date: Tue, 4 Feb 2020 08:53:35 -0600
Subject: [PATCH] Add dom fixture for autofilled form state (#17951)

---
 fixtures/dom/src/components/Header.js         |  1 +
 .../form-state/ControlledFormFixture.js       | 60 +++++++++++++++++++
 .../components/fixtures/form-state/index.js   | 60 +++++++++++++++++++
 3 files changed, 121 insertions(+)
 create mode 100644 fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js
 create mode 100644 fixtures/dom/src/components/fixtures/form-state/index.js

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index 74af700e2766..77c1ecfc30da 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -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">
diff --git a/fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js b/fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js
new file mode 100644
index 000000000000..278072780c9f
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/form-state/ControlledFormFixture.js
@@ -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;
diff --git a/fixtures/dom/src/components/fixtures/form-state/index.js b/fixtures/dom/src/components/fixtures/form-state/index.js
new file mode 100644
index 000000000000..60585e4cd1d2
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/form-state/index.js
@@ -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>
+  );
+};