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
Nathan Hunzaker committed
Jun 29, 2017 at 13:44 UTC
9d13557244d8dc6dfd3c8fb02bf3ffb0ddd793ae
4 files changed
+73
fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js
new
+30
@@ -0,0 +1,30 @@
1
+const React = window.React;
2
+
3
+import Fixture from '../../Fixture';
4
+
5
+class NumberInputExtraZeroes extends React.Component {
6
+ state = { value: '3.0000' }
7
+ changeValue = () => {
8
+ this.setState({
9
+ value: '3.0000'
10
+ });
11
+ }
12
+ onChange = event => {
13
+ this.setState({ value: event.target.value });
14
+ }
15
+ render() {
16
+ const { value } = this.state
17
+ return (
18
+ <Fixture>
19
+ <div>{this.props.children}</div>
20
+
21
+ <div className="control-box">
22
+ <input type="number" value={value} onChange={this.onChange} />
23
+ <button onClick={this.changeValue}>Reset to "3.0000"</button>
24
+ </div>
25
+ </Fixture>
26
+ );
27
+ }
28
+}
29
+
30
+export default NumberInputExtraZeroes;
fixtures/dom/src/components/fixtures/number-inputs/index.js
+25
@@ -4,6 +4,7 @@ import FixtureSet from '../../FixtureSet';
4
import TestCase from '../../TestCase';
5
import NumberTestCase from './NumberTestCase';
6
import NumberInputDecimal from './NumberInputDecimal';
7
+import NumberInputExtraZeroes from './NumberInputExtraZeroes';
8
9
function NumberInputs() {
10
return (
@@ -173,6 +174,30 @@ function NumberInputs() {
174
</TestCase.ExpectedResult>
175
<NumberInputDecimal />
176
</TestCase>
177
+
178
+ <TestCase
179
+ title="Trailing zeroes"
180
+ description="Extraneous zeroes should be retained when changing the value via setState"
181
+ >
182
+ <TestCase.Steps>
183
+ <li>Change the text to 4.0000</li>
184
+ <li>Click "Reset to 3.0000"</li>
185
+ </TestCase.Steps>
186
+
187
+ <TestCase.ExpectedResult>
188
+ The field should read 3.0000, not 3
189
+ </TestCase.ExpectedResult>
190
+
191
+ <NumberInputExtraZeroes />
192
+
193
+ <p className="footnote">
194
+ <b>Notes:</b> Firefox drops extraneous zeroes when
195
+ assigned. Zeroes are preserved when editing, however
196
+ directly assigning a new value will drop zeroes. This <a
197
+ href="https://bugzilla.mozilla.org/show_bug.cgi?id=1003896">is
198
+ a bug in Firefox</a> that we can not control for.
199
+ </p>
200
+ </TestCase>
201
</FixtureSet>
202
);
203
}
scripts/fiber/tests-passing.txt
+1
@@ -1657,6 +1657,7 @@ src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
1657
* does change the string "2" to "2.0" with no change handler
1658
* changes the number 2 to "2.0" using a change handler
1659
* does change the string ".98" to "0.98" with no change handler
1660
+* distinguishes precision for extra zeroes in string number values
1661
* should display `defaultValue` of number 0
1662
* only assigns defaultValue if it changes
1663
* should display "true" for `defaultValue` of `true`
src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
+17
@@ -251,6 +251,23 @@ describe('ReactDOMInput', () => {
251
expect(node.value).toEqual('0.98');
252
});
253
254
+ it('distinguishes precision for extra zeroes in string number values', () => {
255
+ class Stub extends React.Component {
256
+ state = {
257
+ value: '3.0000',
258
+ };
259
+ render() {
260
+ return <input type="number" value={this.state.value} />;
261
+ }
262
+ }
263
+
264
+ var stub = ReactTestUtils.renderIntoDocument(<Stub />);
265
+ var node = ReactDOM.findDOMNode(stub);
266
+ stub.setState({value: '3'});
267
+
268
+ expect(node.value).toEqual('3');
269
+ });
270
+
271
it('should display `defaultValue` of number 0', () => {
272
var stub = <input type="text" defaultValue={0} />;
273
stub = ReactTestUtils.renderIntoDocument(stub);