Skip to content

Commit

Permalink
Update number fixtures to use latest components
Browse files Browse the repository at this point in the history
  • Loading branch information
@nhunzaker
nhunzaker committed Mar 3, 2017
1 parent cdd1868 commit 67ed49f
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 95 deletions.
37 changes: 37 additions & 0 deletions fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
const React = window.React;

import Fixture from '../../Fixture';

const NumberTestCase = React.createClass({
getInitialState() {
return { value: '' };
},
onChange(event) {
const parsed = parseFloat(event.target.value, 10)
const value = isNaN(parsed) ? '' : parsed

this.setState({ value })
},
render() {
return (
<Fixture>
<div>{this.props.children}</div>

<div className="control-box">
<fieldset>
<legend>Controlled</legend>
<input type="number" value={this.state.value} onChange={this.onChange} />
<span className="hint"> Value: {JSON.stringify(this.state.value)}</span>
</fieldset>

<fieldset>
<legend>Uncontrolled</legend>
<input type="number" defaultValue={0.5} />
</fieldset>
</div>
</Fixture>
);
},
});

export default NumberTestCase;
190 changes: 95 additions & 95 deletions fixtures/dom/src/components/fixtures/number-inputs/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,135 +1,135 @@
const React = window.React;

const TestCase = React.createClass({
getInitialState() {
return { value: '' };
},
onChange(event) {
const parsed = parseFloat(event.target.value, 10)
const value = isNaN(parsed) ? '' : parsed

this.setState({ value })
},
render() {
return (
<section className="test-case">
<div>{this.props.children}</div>

<div className="control-box">
<fieldset>
<legend>Controlled</legend>
<input type="number" value={this.state.value} onChange={this.onChange} />
<span className="hint"> Value: {JSON.stringify(this.state.value)}</span>
</fieldset>

<fieldset>
<legend>Uncontrolled</legend>
<input type="number" defaultValue={0.5} />
</fieldset>
</div>
</section>
);
},
});
import Fixture from '../../Fixture';
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
import NumberTestCase from './NumberTestCase';

const NumberInputs = React.createClass({
render() {
return (
<form>
<h1>Number inputs</h1>
<p>
Number inputs inconsistently assign and report the value
property depending on the browser.
</p>

<TestCase>
<h2 className="type-subheading">
The decimal place should not be lost when backspacing from
"3.1" to "3."?
</h2>

<ol>
<FixtureSet
title="Number inputs"
description="Number inputs inconsistently assign and report the value
property depending on the browser."
>
<TestCase
title="Backspacing"
description="The decimal place should not be lost"
>
<TestCase.Steps>
<li>Type "3.1"</li>
<li>Press backspace, eliminating the "1"</li>
<li>The field should read "3.", preserving the decimal place</li>
</ol>
</TestCase.Steps>

<TestCase.ExpectedResult>
The field should read "3.", preserving the decimal place
</TestCase.ExpectedResult>

<NumberTestCase />

<p className="footnote">
<b>Notes:</b> Chrome and Safari clear trailing
decimals on blur. React makes this concession so that the
value attribute remains in sync with the value property.
</p>
</TestCase>

<TestCase>
<h2 className="type-subheading">
Supports decimal precision greater than 2 places
</h2>

<ol>
<TestCase
title="Decimal precision"
description="Supports decimal precision greater than 2 places"
>
<TestCase.Steps>
<li>Type "0.01"</li>
<li>The field should read "0.01"</li>
</ol>
</TestCase>
</TestCase.Steps>

<TestCase.ExpectedResult>
The field should read "0.01"
</TestCase.ExpectedResult>

<TestCase>
<h2 className="type-subheading">
Supports exponent form ("2e4")
</h2>
<NumberTestCase />
</TestCase>

<ol>
<TestCase
title="Exponent form"
description="Supports exponent form ('2e4')"
>
<TestCase.Steps>
<li>Type "2e"</li>
<li>The field should read "2e"</li>
<li>Type 4, to read "2e4"</li>
<li>The field should read "2e4"</li>
<li>The value should read "20000"</li>
</ol>
</TestCase.Steps>

<TestCase.ExpectedResult>
The field should read "2e4". The parsed value should read "20000"
</TestCase.ExpectedResult>

<NumberTestCase />
</TestCase>

<TestCase>
<h2 className="type-subheading">
Pressing "e" at the end of a number does not reset the value
</h2>
<ol>
<TestCase
title="Exponent Form"
description="Pressing 'e' at the end"
>
<TestCase.Steps>
<li>Type "3.14"</li>
<li>Press "e", so that the value reads "3.14e"</li>
<li>The field should read "3.14e"</li>
</ol>
<li>Press "e", so that the input reads "3.14e"</li>
</TestCase.Steps>

<TestCase.ExpectedResult>
The field should read "3.14e", the parsed value should be empty
</TestCase.ExpectedResult>

<NumberTestCase />
</TestCase>

<TestCase>
<h2 className="type-subheading">
Pressing "ee" in the middle of a number does not clear the display value
</h2>
<ol>
<TestCase
title="Exponent Form"
description="Supports pressing 'ee' in the middle of a number"
>
<TestCase.Steps>
<li>Type "3.14"</li>
<li>Move the text cursor to after the decimal place</li>
<li>Press "e" twice, so that the value reads "3.ee14"</li>
<li>The field should read "3.ee14"</li>
</ol>
</TestCase.Steps>

<TestCase.ExpectedResult>
The field should read "3.ee14"
</TestCase.ExpectedResult>

<NumberTestCase />
</TestCase>

<TestCase>
<h2 className="type-subheading">
Typing "3.0" preserves the trailing zero
</h2>
<ol>
<TestCase
title="Trailing Zeroes"
description="Typing '3.0' preserves the trailing zero"
>
<TestCase.Steps>
<li>Type "3.0"</li>
<li>The field should read "3.0"</li>
</ol>
</TestCase.Steps>

<TestCase.ExpectedResult>
The field should read "3.0"
</TestCase.ExpectedResult>

<NumberTestCase />
</TestCase>

<TestCase>
<h2 className="type-subheading">
Inserting a decimal in to "300" maintains the trailing zeroes
</h2>
<ol>
<TestCase
title="Inserting decimals precision"
description="Inserting '.' in to '300' maintains the trailing zeroes"
>
<TestCase.Steps>
<li>Type "300"</li>
<li>Move the cursor to after the "3"</li>
<li>Type "."</li>
<li>The field should read "3.00", not "3"</li>
</ol>
</TestCase.Steps>

<TestCase.ExpectedResult>
The field should read "3.00", not "3"
</TestCase.ExpectedResult>
<NumberTestCase />
</TestCase>
</form>
</FixtureSet>
);
},
});
Expand Down

0 comments on commit 67ed49f

Please sign in to comment.