From 14863c9a8722281b6bf1d0d9fc7b95b44e189354 Mon Sep 17 00:00:00 2001
From: Sasha Aickin <xander76@yahoo.com>
Date: Sun, 26 Mar 2017 20:51:40 -0700
Subject: [PATCH 1/2] Adding SSR test for form fields.

---
 scripts/fiber/tests-failing.txt               |  36 ++
 scripts/fiber/tests-passing-except-dev.txt    |  30 +
 scripts/fiber/tests-passing.txt               |  57 +-
 .../ReactDOMServerIntegration-test.js         | 562 +++++++++++++++++-
 4 files changed, 670 insertions(+), 15 deletions(-)

diff --git a/scripts/fiber/tests-failing.txt b/scripts/fiber/tests-failing.txt
index b99355d063d4..3bd47469acf9 100644
--- a/scripts/fiber/tests-failing.txt
+++ b/scripts/fiber/tests-failing.txt
@@ -102,6 +102,42 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders >,<, and & as single child with client render on top of good server markup
 * renders >,<, and & as multiple children with server string render
 * renders >,<, and & as multiple children with client render on top of good server markup
+* renders an input with a value and an onChange with client render on top of good server markup
+* renders an input with a value and readOnly with client render on top of good server markup
+* renders an input with a value and no onChange/readOnly with client render on top of good server markup
+* renders an input with a defaultValue with client render on top of good server markup
+* renders an input value overriding defaultValue with client render on top of good server markup
+* renders an input value overriding defaultValue no matter the prop order with client render on top of good server markup
+* renders a checkbox that is checked with an onChange with client render on top of good server markup
+* renders a checkbox that is checked with readOnly with client render on top of good server markup
+* renders a checkbox that is checked and no onChange/readOnly with client render on top of good server markup
+* renders a checkbox with defaultChecked with client render on top of good server markup
+* renders a checkbox checked overriding defaultChecked with client render on top of good server markup
+* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of good server markup
+* renders a textarea with a value and an onChange with client render on top of good server markup
+* renders a textarea with a value and readOnly with client render on top of good server markup
+* renders a textarea with a value and no onChange/readOnly with client render on top of good server markup
+* renders a textarea with a defaultValue with client render on top of good server markup
+* renders a textarea value overriding defaultValue with client render on top of good server markup
+* renders a textarea value overriding defaultValue no matter the prop order with client render on top of good server markup
+* renders a select with a value and an onChange with client render on top of good server markup
+* renders a select with a value and readOnly with client render on top of good server markup
+* renders a select with a multiple values and an onChange with client render on top of good server markup
+* renders a select with a multiple values and readOnly with client render on top of good server markup
+* renders a select with a value and no onChange/readOnly with client render on top of good server markup
+* renders a select with a defaultValue with client render on top of good server markup
+* renders a select value overriding defaultValue with client render on top of good server markup
+* renders a select value overriding defaultValue no matter the prop order with client render on top of good server markup
+* renders a controlled text input with client render on top of good server markup
+* renders a controlled textarea with client render on top of good server markup
+* renders a controlled checkbox with client render on top of good server markup
+* renders a controlled select with client render on top of good server markup
+* should not blow away user-entered text on successful reconnect to an uncontrolled input
+* should not blow away user-entered text on successful reconnect to a controlled input
+* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox
+* should not blow away user-entered text on successful reconnect to a controlled checkbox
+* should not blow away user-selected value on successful reconnect to an uncontrolled select
+* should not blow away user-selected value on successful reconnect to an controlled select
 * renders class child with context with client render on top of good server markup
 * renders stateless child with context with client render on top of good server markup
 * renders class child without context with client render on top of good server markup
diff --git a/scripts/fiber/tests-passing-except-dev.txt b/scripts/fiber/tests-passing-except-dev.txt
index 5b7ce16d9231..203bd2f0e59d 100644
--- a/scripts/fiber/tests-passing-except-dev.txt
+++ b/scripts/fiber/tests-passing-except-dev.txt
@@ -95,6 +95,36 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * throws when rendering an undefined component with client render on top of bad server markup
 * throws when rendering a number component with clean client render
 * throws when rendering a number component with client render on top of bad server markup
+* renders an input with a value and an onChange with client render on top of bad server markup
+* renders an input with a value and readOnly with client render on top of bad server markup
+* renders an input with a value and no onChange/readOnly with client render on top of bad server markup
+* renders an input with a defaultValue with client render on top of bad server markup
+* renders an input value overriding defaultValue with client render on top of bad server markup
+* renders an input value overriding defaultValue no matter the prop order with client render on top of bad server markup
+* renders a checkbox that is checked with an onChange with client render on top of bad server markup
+* renders a checkbox that is checked with readOnly with client render on top of bad server markup
+* renders a checkbox that is checked and no onChange/readOnly with client render on top of bad server markup
+* renders a checkbox with defaultChecked with client render on top of bad server markup
+* renders a checkbox checked overriding defaultChecked with client render on top of bad server markup
+* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of bad server markup
+* renders a textarea with a value and an onChange with client render on top of bad server markup
+* renders a textarea with a value and readOnly with client render on top of bad server markup
+* renders a textarea with a value and no onChange/readOnly with client render on top of bad server markup
+* renders a textarea with a defaultValue with client render on top of bad server markup
+* renders a textarea value overriding defaultValue with client render on top of bad server markup
+* renders a textarea value overriding defaultValue no matter the prop order with client render on top of bad server markup
+* renders a select with a value and an onChange with client render on top of bad server markup
+* renders a select with a value and readOnly with client render on top of bad server markup
+* renders a select with a multiple values and an onChange with client render on top of bad server markup
+* renders a select with a multiple values and readOnly with client render on top of bad server markup
+* renders a select with a value and no onChange/readOnly with client render on top of bad server markup
+* renders a select with a defaultValue with client render on top of bad server markup
+* renders a select value overriding defaultValue with client render on top of bad server markup
+* renders a select value overriding defaultValue no matter the prop order with client render on top of bad server markup
+* renders a controlled text input with client render on top of bad server markup
+* renders a controlled textarea with client render on top of bad server markup
+* renders a controlled checkbox with client render on top of bad server markup
+* renders a controlled select with client render on top of bad server markup
 * renders class child with context with client render on top of bad server markup
 * renders stateless child with context with client render on top of bad server markup
 * renders class child without context with client render on top of bad server markup
diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt
index 05ca4a1b2bf4..79e243d6644f 100644
--- a/scripts/fiber/tests-passing.txt
+++ b/scripts/fiber/tests-passing.txt
@@ -1154,6 +1154,62 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * throws when rendering string with server string render
 * throws when rendering string with clean client render
 * throws when rendering string with client render on top of bad server markup
+* renders an input with a value and an onChange with server string render
+* renders an input with a value and an onChange with clean client render
+* renders an input with a value and readOnly with server string render
+* renders an input with a value and readOnly with clean client render
+* renders an input with a value and no onChange/readOnly with server string render
+* renders an input with a value and no onChange/readOnly with clean client render
+* renders an input with a defaultValue with server string render
+* renders an input with a defaultValue with clean client render
+* renders an input value overriding defaultValue with server string render
+* renders an input value overriding defaultValue with clean client render
+* renders an input value overriding defaultValue no matter the prop order with server string render
+* renders an input value overriding defaultValue no matter the prop order with clean client render
+* renders a checkbox that is checked with an onChange with server string render
+* renders a checkbox that is checked with an onChange with clean client render
+* renders a checkbox that is checked with readOnly with server string render
+* renders a checkbox that is checked with readOnly with clean client render
+* renders a checkbox that is checked and no onChange/readOnly with server string render
+* renders a checkbox that is checked and no onChange/readOnly with clean client render
+* renders a checkbox with defaultChecked with server string render
+* renders a checkbox with defaultChecked with clean client render
+* renders a checkbox checked overriding defaultChecked with server string render
+* renders a checkbox checked overriding defaultChecked with clean client render
+* renders a checkbox checked overriding defaultChecked no matter the prop order with server string render
+* renders a checkbox checked overriding defaultChecked no matter the prop order with clean client render
+* renders a textarea with a value and an onChange with server string render
+* renders a textarea with a value and an onChange with clean client render
+* renders a textarea with a value and readOnly with server string render
+* renders a textarea with a value and readOnly with clean client render
+* renders a textarea with a value and no onChange/readOnly with server string render
+* renders a textarea with a value and no onChange/readOnly with clean client render
+* renders a textarea with a defaultValue with server string render
+* renders a textarea with a defaultValue with clean client render
+* renders a textarea value overriding defaultValue with server string render
+* renders a textarea value overriding defaultValue with clean client render
+* renders a textarea value overriding defaultValue no matter the prop order with server string render
+* renders a textarea value overriding defaultValue no matter the prop order with clean client render
+* renders a select with a value and an onChange with server string render
+* renders a select with a value and an onChange with clean client render
+* renders a select with a value and readOnly with server string render
+* renders a select with a value and readOnly with clean client render
+* renders a select with a multiple values and an onChange with server string render
+* renders a select with a multiple values and an onChange with clean client render
+* renders a select with a multiple values and readOnly with server string render
+* renders a select with a multiple values and readOnly with clean client render
+* renders a select with a value and no onChange/readOnly with server string render
+* renders a select with a value and no onChange/readOnly with clean client render
+* renders a select with a defaultValue with server string render
+* renders a select with a defaultValue with clean client render
+* renders a select value overriding defaultValue with server string render
+* renders a select value overriding defaultValue with clean client render
+* renders a select value overriding defaultValue no matter the prop order with server string render
+* renders a select value overriding defaultValue no matter the prop order with clean client render
+* renders a controlled text input with clean client render
+* renders a controlled textarea with clean client render
+* renders a controlled checkbox with clean client render
+* renders a controlled select with clean client render
 * renders class child with context with server string render
 * renders class child with context with clean client render
 * renders stateless child with context with server string render
@@ -1193,7 +1249,6 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * should reconnect Pure Component to Bare Element
 * should reconnect Bare Element to Bare Element
 * should reconnect a div with a number and string version of number
-* should reconnect if component trees differ but resulting markup is the same
 
 src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js
 * updates a mounted text component in place
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
index 2eda9c38fc87..403254c66ff9 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -16,6 +16,7 @@ let React;
 let ReactDOM;
 let ReactDOMServer;
 let ReactDOMFeatureFlags;
+let ReactTestUtils;
 
 // Helper functions for rendering tests
 // ====================================
@@ -209,6 +210,7 @@ function resetModules() {
   ReactDOM = require('ReactDOM');
   ReactDOMServer = require('ReactDOMServer');
   ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
+  ReactTestUtils = require('ReactTestUtils');
   ExecutionEnvironment = require('ExecutionEnvironment');
 }
 
@@ -1022,6 +1024,552 @@ describe('ReactDOMServerIntegration', () => {
     });
   });
 
+  describe('form controls', function() {
+    describe('inputs', function() {
+      itRenders('an input with a value and an onChange', async render => {
+        const e = await render(<input value="foo" onChange={() => {}} />);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders('an input with a value and readOnly', async render => {
+        const e = await render(<input value="foo" readOnly={true} />);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders(
+        'an input with a value and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that value without
+          // onChange or readOnly is a mistake.
+          const e = await render(<input value="foo" />, 1);
+          expect(e.value).toBe('foo');
+        },
+      );
+
+      itRenders('an input with a defaultValue', async render => {
+        const e = await render(<input defaultValue="foo" />);
+        expect(e.value).toBe('foo');
+        expect(e.getAttribute('defaultValue')).toBe(null);
+      });
+
+      itRenders('an input value overriding defaultValue', async render => {
+        const e = await render(
+          <input value="foo" defaultValue="bar" readOnly={true} />,
+          1,
+        );
+        expect(e.value).toBe('foo');
+        expect(e.getAttribute('defaultValue')).toBe(null);
+      });
+
+      itRenders(
+        'an input value overriding defaultValue no matter the prop order',
+        async render => {
+          const e = await render(
+            <input defaultValue="bar" value="foo" readOnly={true} />,
+            1,
+          );
+          expect(e.value).toBe('foo');
+          expect(e.getAttribute('defaultValue')).toBe(null);
+        },
+      );
+    });
+
+    describe('checkboxes', function() {
+      itRenders('a checkbox that is checked with an onChange', async render => {
+        const e = await render(
+          <input type="checkbox" checked={true} onChange={() => {}} />,
+        );
+        expect(e.checked).toBe(true);
+      });
+
+      itRenders('a checkbox that is checked with readOnly', async render => {
+        const e = await render(
+          <input type="checkbox" checked={true} readOnly={true} />,
+        );
+        expect(e.checked).toBe(true);
+      });
+
+      itRenders(
+        'a checkbox that is checked and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that checked without
+          // onChange or readOnly is a mistake.
+          const e = await render(<input type="checkbox" checked={true} />, 1);
+          expect(e.checked).toBe(true);
+        },
+      );
+
+      itRenders('a checkbox with defaultChecked', async render => {
+        const e = await render(<input type="checkbox" defaultChecked={true} />);
+        expect(e.checked).toBe(true);
+        expect(e.getAttribute('defaultChecked')).toBe(null);
+      });
+
+      itRenders(
+        'a checkbox checked overriding defaultChecked',
+        async render => {
+          const e = await render(
+            <input
+              type="checkbox"
+              checked={true}
+              defaultChecked={false}
+              readOnly={true}
+            />,
+            1,
+          );
+          expect(e.checked).toBe(true);
+          expect(e.getAttribute('defaultChecked')).toBe(null);
+        },
+      );
+
+      itRenders(
+        'a checkbox checked overriding defaultChecked no matter the prop order',
+        async render => {
+          const e = await render(
+            <input
+              type="checkbox"
+              defaultChecked={false}
+              checked={true}
+              readOnly={true}
+            />,
+            1,
+          );
+          expect(e.checked).toBe(true);
+          expect(e.getAttribute('defaultChecked')).toBe(null);
+        },
+      );
+    });
+
+    describe('textareas', function() {
+      // textareas
+      // ---------
+      itRenders('a textarea with a value and an onChange', async render => {
+        const e = await render(<textarea value="foo" onChange={() => {}} />);
+        // textarea DOM elements don't have a value **attribute**, the text is
+        // a child of the element and accessible via the .value **property**.
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders('a textarea with a value and readOnly', async render => {
+        const e = await render(<textarea value="foo" readOnly={true} />);
+        // textarea DOM elements don't have a value **attribute**, the text is
+        // a child of the element and accessible via the .value **property**.
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders(
+        'a textarea with a value and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that value without
+          // onChange or readOnly is a mistake.
+          const e = await render(<textarea value="foo" />, 1);
+          expect(e.getAttribute('value')).toBe(null);
+          expect(e.value).toBe('foo');
+        },
+      );
+
+      itRenders('a textarea with a defaultValue', async render => {
+        const e = await render(<textarea defaultValue="foo" />);
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.getAttribute('defaultValue')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders('a textarea value overriding defaultValue', async render => {
+        const e = await render(
+          <textarea value="foo" defaultValue="bar" readOnly={true} />,
+          1,
+        );
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.getAttribute('defaultValue')).toBe(null);
+        expect(e.value).toBe('foo');
+      });
+
+      itRenders(
+        'a textarea value overriding defaultValue no matter the prop order',
+        async render => {
+          const e = await render(
+            <textarea defaultValue="bar" value="foo" readOnly={true} />,
+            1,
+          );
+          expect(e.getAttribute('value')).toBe(null);
+          expect(e.getAttribute('defaultValue')).toBe(null);
+          expect(e.value).toBe('foo');
+        },
+      );
+    });
+
+    describe('selects', function() {
+      var options;
+      beforeEach(function() {
+        options = [
+          <option key={1} value="foo" id="foo">Foo</option>,
+          <option key={2} value="bar" id="bar">Bar</option>,
+          <option key={3} value="baz" id="baz">Baz</option>,
+        ];
+      });
+
+      // a helper function to test the selected value of a <select> element.
+      // takes in a <select> DOM element (element) and a value or array of
+      // values that should be selected (selected).
+      const expectSelectValue = (element, selected) => {
+        if (!Array.isArray(selected)) {
+          selected = [selected];
+        }
+        // the select DOM element shouldn't ever have a value or defaultValue
+        // attribute; that is not how select values are expressed in the DOM.
+        expect(element.getAttribute('value')).toBe(null);
+        expect(element.getAttribute('defaultValue')).toBe(null);
+
+        ['foo', 'bar', 'baz'].forEach(value => {
+          const expectedValue = selected.indexOf(value) !== -1;
+          var option = element.querySelector(`#${value}`);
+          expect(option.selected).toBe(expectedValue);
+        });
+      };
+
+      itRenders('a select with a value and an onChange', async render => {
+        const e = await render(
+          <select value="bar" onChange={() => {}}>{options}</select>,
+        );
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders('a select with a value and readOnly', async render => {
+        const e = await render(
+          <select value="bar" readOnly={true}>{options}</select>,
+        );
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders(
+        'a select with a multiple values and an onChange',
+        async render => {
+          const e = await render(
+            <select value={['bar', 'baz']} multiple={true} onChange={() => {}}>
+              {options}
+            </select>,
+          );
+          expectSelectValue(e, ['bar', 'baz']);
+        },
+      );
+
+      itRenders(
+        'a select with a multiple values and readOnly',
+        async render => {
+          const e = await render(
+            <select value={['bar', 'baz']} multiple={true} readOnly={true}>
+              {options}
+            </select>,
+          );
+          expectSelectValue(e, ['bar', 'baz']);
+        },
+      );
+
+      itRenders(
+        'a select with a value and no onChange/readOnly',
+        async render => {
+          // this configuration should raise a dev warning that value without
+          // onChange or readOnly is a mistake.
+          const e = await render(<select value="bar">{options}</select>, 1);
+          expectSelectValue(e, 'bar');
+        },
+      );
+
+      itRenders('a select with a defaultValue', async render => {
+        const e = await render(<select defaultValue="bar">{options}</select>);
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders('a select value overriding defaultValue', async render => {
+        const e = await render(
+          <select value="bar" defaultValue="baz" readOnly={true}>
+            {options}
+          </select>,
+          1,
+        );
+        expectSelectValue(e, 'bar');
+      });
+
+      itRenders(
+        'a select value overriding defaultValue no matter the prop order',
+        async render => {
+          const e = await render(
+            <select defaultValue="baz" value="bar" readOnly={true}>
+              {options}
+            </select>,
+            1,
+          );
+          expectSelectValue(e, 'bar');
+        },
+      );
+    });
+
+    describe('user interaction', function() {
+      let ControlledInput,
+        ControlledTextArea,
+        ControlledCheckbox,
+        ControlledSelect;
+      beforeEach(() => {
+        ControlledInput = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: 'Hello'};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.value});
+          }
+          render() {
+            return (
+              <input
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}
+              />
+            );
+          }
+        };
+        ControlledTextArea = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: 'Hello'};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.value});
+          }
+          render() {
+            return (
+              <textarea
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}
+              />
+            );
+          }
+        };
+        ControlledCheckbox = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: true};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.checked});
+          }
+          render() {
+            return (
+              <input
+                type="checkbox"
+                checked={this.state.value}
+                onChange={this.handleChange.bind(this)}
+              />
+            );
+          }
+        };
+        ControlledSelect = class extends React.Component {
+          constructor() {
+            super();
+            this.state = {value: 'Hello'};
+          }
+          handleChange(event) {
+            if (this.props.onChange) {
+              this.props.onChange(event);
+            }
+            this.setState({value: event.target.value});
+          }
+          render() {
+            return (
+              <select
+                value={this.state.value}
+                onChange={this.handleChange.bind(this)}>
+                <option key="1" value="Hello">Hello</option>
+                <option key="2" value="Goodbye">Goodbye</option>
+              </select>
+            );
+          }
+        };
+      });
+
+      describe('user interaction with controlled inputs', function() {
+        itClientRenders('a controlled text input', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledInput onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.value).toBe('Hello');
+
+          // simulate a user typing.
+          e.value = 'Goodbye';
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.value).toBe('Goodbye');
+        });
+
+        itClientRenders('a controlled textarea', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledTextArea onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.value).toBe('Hello');
+
+          // simulate a user typing.
+          e.value = 'Goodbye';
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.value).toBe('Goodbye');
+        });
+
+        itClientRenders('a controlled checkbox', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledCheckbox onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.checked).toBe(true);
+
+          // simulate a user typing.
+          e.checked = false;
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.checked).toBe(false);
+        });
+
+        itClientRenders('a controlled select', async render => {
+          let changeCount = 0;
+          const e = await render(
+            <ControlledSelect onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+          expect(e.value).toBe('Hello');
+
+          // simulate a user typing.
+          e.value = 'Goodbye';
+          ReactTestUtils.Simulate.change(e);
+
+          expect(changeCount).toBe(1);
+          expect(e.value).toBe('Goodbye');
+        });
+      });
+
+      describe('user interaction with inputs before client render', function() {
+        // renders the element and changes the value **before** the client
+        // code has a chance to render; this simulates what happens when a
+        // user starts to interact with a server-rendered form before
+        // ReactDOM.render is called. the client render should NOT blow away
+        // the changes the user has made.
+        const testUserInteractionBeforeClientRender = async (
+          element,
+          initialValue = 'Hello',
+          changedValue = 'Goodbye',
+          valueKey = 'value',
+        ) => {
+          const field = await serverRender(element);
+          expect(field[valueKey]).toBe(initialValue);
+
+          // simulate a user typing in the field **before** client-side reconnect happens.
+          field[valueKey] = changedValue;
+
+          resetModules();
+          // client render on top of the server markup.
+          const clientField = await renderIntoDom(element, field.parentNode);
+          // verify that the input field was not replaced.
+          // Note that we cannot use expect(clientField).toBe(field) because
+          // of jest bug #1772
+          expect(clientField === field).toBe(true);
+          // confirm that the client render has not changed what the user typed.
+          expect(clientField[valueKey]).toBe(changedValue);
+        };
+
+        it('should not blow away user-entered text on successful reconnect to an uncontrolled input', () =>
+          testUserInteractionBeforeClientRender(
+            <input defaultValue="Hello" />,
+          ));
+
+        it('should not blow away user-entered text on successful reconnect to a controlled input', async () => {
+          let changeCount = 0;
+          await testUserInteractionBeforeClientRender(
+            <ControlledInput onChange={() => changeCount++} />,
+          );
+          // note that there's a strong argument to be made that the DOM revival
+          // algorithm should notice that the user has changed the value and fire
+          // an onChange. however, it does not now, so that's what this tests.
+          expect(changeCount).toBe(0);
+        });
+
+        it('should not blow away user-entered text on successful reconnect to an uncontrolled checkbox', () =>
+          testUserInteractionBeforeClientRender(
+            <input type="checkbox" defaultChecked={true} />,
+            true,
+            false,
+            'checked',
+          ));
+
+        it('should not blow away user-entered text on successful reconnect to a controlled checkbox', async () => {
+          let changeCount = 0;
+          await testUserInteractionBeforeClientRender(
+            <ControlledCheckbox onChange={() => changeCount++} />,
+            true,
+            false,
+            'checked',
+          );
+          expect(changeCount).toBe(0);
+        });
+
+        // skipping this test because React 15 does the wrong thing. it blows
+        // away the user's typing in the textarea.
+        xit(
+          'should not blow away user-entered text on successful reconnect to an uncontrolled textarea',
+          () =>
+            testUserInteractionBeforeClientRender(
+              <textarea defaultValue="Hello" />,
+            ),
+        );
+
+        // skipping this test because React 15 does the wrong thing. it blows
+        // away the user's typing in the textarea.
+        xit(
+          'should not blow away user-entered text on successful reconnect to a controlled textarea',
+          async () => {
+            let changeCount = 0;
+            await testUserInteractionBeforeClientRender(
+              <ControlledTextArea onChange={() => changeCount++} />,
+            );
+            expect(changeCount).toBe(0);
+          },
+        );
+
+        it('should not blow away user-selected value on successful reconnect to an uncontrolled select', () =>
+          testUserInteractionBeforeClientRender(
+            <select defaultValue="Hello">
+              <option key="1" value="Hello">Hello</option>
+              <option key="2" value="Goodbye">Goodbye</option>
+            </select>,
+          ));
+
+        it('should not blow away user-selected value on successful reconnect to an controlled select', async () => {
+          let changeCount = 0;
+          await testUserInteractionBeforeClientRender(
+            <ControlledSelect onChange={() => changeCount++} />,
+          );
+          expect(changeCount).toBe(0);
+        });
+      });
+    });
+  });
+
   describe('context', function() {
     let PurpleContext, RedContext;
     beforeEach(() => {
@@ -1442,20 +1990,6 @@ describe('ReactDOMServerIntegration', () => {
 
       it('can distinguish an empty component from an empty text component', () =>
         expectMarkupMismatch(<div><EmptyComponent /></div>, <div>{''}</div>));
-
-      it('should reconnect if component trees differ but resulting markup is the same', () => {
-        class Component1 extends React.Component {
-          render() {
-            return <span id="foobar" />;
-          }
-        }
-        class Component2 extends React.Component {
-          render() {
-            return <span id="foobar" />;
-          }
-        }
-        return expectMarkupMatch(<Component1 />, <Component2 />);
-      });
     });
 
     // Markup Mismatches: misc

From a734aecc983bc484845ce2a34c2fe4bbd0f16b18 Mon Sep 17 00:00:00 2001
From: Sasha Aickin <xander76@yahoo.com>
Date: Fri, 31 Mar 2017 14:49:03 -0700
Subject: [PATCH 2/2] Response to code review comment
 https://github.com/facebook/react/pull/9264#discussion_r108974871 . Thanks,
 @spicyj!

---
 .../dom/shared/__tests__/ReactDOMServerIntegration-test.js    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
index 403254c66ff9..af29b8d5ac88 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -1043,12 +1043,14 @@ describe('ReactDOMServerIntegration', () => {
           // onChange or readOnly is a mistake.
           const e = await render(<input value="foo" />, 1);
           expect(e.value).toBe('foo');
+          expect(e.getAttribute('value')).toBe('foo');
         },
       );
 
       itRenders('an input with a defaultValue', async render => {
         const e = await render(<input defaultValue="foo" />);
         expect(e.value).toBe('foo');
+        expect(e.getAttribute('value')).toBe('foo');
         expect(e.getAttribute('defaultValue')).toBe(null);
       });
 
@@ -1058,6 +1060,7 @@ describe('ReactDOMServerIntegration', () => {
           1,
         );
         expect(e.value).toBe('foo');
+        expect(e.getAttribute('value')).toBe('foo');
         expect(e.getAttribute('defaultValue')).toBe(null);
       });
 
@@ -1069,6 +1072,7 @@ describe('ReactDOMServerIntegration', () => {
             1,
           );
           expect(e.value).toBe('foo');
+          expect(e.getAttribute('value')).toBe('foo');
           expect(e.getAttribute('defaultValue')).toBe(null);
         },
       );