Add test to ensure extra zeros are covered by tests (#10033)

* Add test to ensure extra zeros are covered by tests

* Add DOM test fixture for trailing zeros

* Drop quotes to improve clarity

fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js

@@ -0,0 +1,30 @@
+const React = window.React;
+
+import Fixture from '../../Fixture';
+
+class NumberInputExtraZeroes extends React.Component {
+  state = { value: '3.0000' }
+  changeValue = () => {
+    this.setState({
+      value: '3.0000'
+    });
+  }
+  onChange = event => {
+    this.setState({ value: event.target.value });
+  }
+  render() {
+    const { value } = this.state
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <input type="number" value={value} onChange={this.onChange} />
+          <button onClick={this.changeValue}>Reset to "3.0000"</button>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default NumberInputExtraZeroes;

fixtures/dom/src/components/fixtures/number-inputs/index.js

@@ -4,6 +4,7 @@ import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 import NumberTestCase from './NumberTestCase';
 import NumberInputDecimal from './NumberInputDecimal';
+import NumberInputExtraZeroes from './NumberInputExtraZeroes';
 
 function NumberInputs() {
   return (
@@ -173,6 +174,30 @@ function NumberInputs() {
         </TestCase.ExpectedResult>
         <NumberInputDecimal />
       </TestCase>
+
+      <TestCase
+        title="Trailing zeroes"
+        description="Extraneous zeroes should be retained when changing the value via setState"
+      >
+        <TestCase.Steps>
+          <li>Change the text to 4.0000</li>
+          <li>Click "Reset to 3.0000"</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The field should read 3.0000, not 3
+        </TestCase.ExpectedResult>
+
+        <NumberInputExtraZeroes />
+
+        <p className="footnote">
+          <b>Notes:</b> Firefox drops extraneous zeroes when
+          assigned. Zeroes are preserved when editing, however
+          directly assigning a new value will drop zeroes. This <a
+          href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003896">is
+          a bug in Firefox</a> that we can not control for.
+        </p>
+      </TestCase>
     </FixtureSet>
   );
 }

scripts/fiber/tests-passing.txt

@@ -1657,6 +1657,7 @@ src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
 * does change the string "2" to "2.0" with no change handler
 * changes the number 2 to "2.0" using a change handler
 * does change the string ".98" to "0.98" with no change handler
+* distinguishes precision for extra zeroes in string number values
 * should display `defaultValue` of number 0
 * only assigns defaultValue if it changes
 * should display "true" for `defaultValue` of `true`

src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js

@@ -251,6 +251,23 @@ describe('ReactDOMInput', () => {
     expect(node.value).toEqual('0.98');
   });
 
+  it('distinguishes precision for extra zeroes in string number values', () => {
+    class Stub extends React.Component {
+      state = {
+        value: '3.0000',
+      };
+      render() {
+        return <input type="number" value={this.state.value} />;
+      }
+    }
+
+    var stub = ReactTestUtils.renderIntoDocument(<Stub />);
+    var node = ReactDOM.findDOMNode(stub);
+    stub.setState({value: '3'});
+
+    expect(node.value).toEqual('3');
+  });
+
   it('should display `defaultValue` of number 0', () => {
     var stub = <input type="text" defaultValue={0} />;
     stub = ReactTestUtils.renderIntoDocument(stub);