Add DOM fixture for unmasking passwords (#9269)
IE11 and Edge have a password unmask field that React prevents the display of for controlled inputs. This commit adds DOM fixture coverage for this test case.
Nathan Hunzaker committed
Mar 30, 2017 at 11:16 UTC
dbeb37fe69e3de7bee43695531d58f761c5633a4
4 files changed
+72
-1
fixtures/dom/src/components/Header.js
+1
@@ -45,6 +45,7 @@ const Header = React.createClass({
45
<option value="/range-inputs">Range Inputs</option>
46
<option value="/text-inputs">Text Inputs</option>
47
<option value="/number-inputs">Number Input</option>
48
+ <option value="/password-inputs">Password Input</option>
49
<option value="/selects">Selects</option>
50
<option value="/textareas">Textareas</option>
51
<option value="/input-change-events">Input change events</option>
fixtures/dom/src/components/fixtures/index.js
+4
-1
@@ -4,7 +4,8 @@ import TextInputFixtures from './text-inputs';
4
import SelectFixtures from './selects';
5
import TextAreaFixtures from './textareas';
6
import InputChangeEvents from './input-change-events';
7
-import NumberInputFixtures from './number-inputs/';
7
+import NumberInputFixtures from './number-inputs';
8
+import PasswordInputFixtures from './password-inputs';
9
import ButtonFixtures from './buttons';
10
11
/**
@@ -26,6 +27,8 @@ const FixturesPage = React.createClass({
27
return <InputChangeEvents />;
28
case '/number-inputs':
29
return <NumberInputFixtures />;
30
+ case '/password-inputs':
31
+ return <PasswordInputFixtures />;
32
case '/buttons':
33
return <ButtonFixtures />
34
default:
fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
new
+34
@@ -0,0 +1,34 @@
1
+const React = window.React;
2
+
3
+import Fixture from '../../Fixture';
4
+
5
+const PasswordTestCase = React.createClass({
6
+ getInitialState() {
7
+ return { value: '' };
8
+ },
9
+ onChange(event) {
10
+ this.setState({ value: event.target.value })
11
+ },
12
+ render() {
13
+ return (
14
+ <Fixture>
15
+ <div>{this.props.children}</div>
16
+
17
+ <div className="control-box">
18
+ <fieldset>
19
+ <legend>Controlled</legend>
20
+ <input type="password" value={this.state.value} onChange={this.onChange} />
21
+ <span className="hint"> Value: {JSON.stringify(this.state.value)}</span>
22
+ </fieldset>
23
+
24
+ <fieldset>
25
+ <legend>Uncontrolled</legend>
26
+ <input type="password" defaultValue="" />
27
+ </fieldset>
28
+ </div>
29
+ </Fixture>
30
+ );
31
+ },
32
+});
33
+
34
+export default PasswordTestCase;
fixtures/dom/src/components/fixtures/password-inputs/index.js
new
+33
@@ -0,0 +1,33 @@
1
+const React = window.React;
2
+
3
+import FixtureSet from '../../FixtureSet';
4
+import TestCase from '../../TestCase';
5
+import PasswordTestCase from './PasswordTestCase'
6
+
7
+const NumberInputs = React.createClass({
8
+ render() {
9
+ return (
10
+ <FixtureSet title="Password inputs" description="">
11
+ <TestCase
12
+ title="The show password icon"
13
+ description={`
14
+ Some browsers have an unmask password icon that React accidentally
15
+ prevents the display of.
16
+ `}
17
+ affectedBrowsers="IE Edge, IE 11">
18
+ <TestCase.Steps>
19
+ <li>Type any string (not an actual password</li>
20
+ </TestCase.Steps>
21
+
22
+ <TestCase.ExpectedResult>
23
+ The field should include the "unmasking password" icon.
24
+ </TestCase.ExpectedResult>
25
+
26
+ <PasswordTestCase />
27
+ </TestCase>
28
+ </FixtureSet>
29
+ );
30
+ },
31
+});
32
+
33
+export default NumberInputs;