Skip to content

Commit f2dea9d

Browse files
nhunzakerBrandon Dail
nhunzaker
authored and
Brandon Dail
committed
Add test fixtures to cover disabled selected options
1 parent fb99fbe commit f2dea9d

4 files changed

Lines changed: 109 additions & 37 deletions

File tree

‎fixtures/dom/src/components/IssueList.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const React = window.React;
2+
3+
function csv(string) {
4+
return string.split(/\s*,\s*/);
5+
}
6+
7+
export default function IssueList({issues}) {
8+
if (!issues) {
9+
return null;
10+
}
11+
12+
if (typeof issues === 'string') {
13+
issues = csv(issues);
14+
}
15+
16+
let links = issues.reduce((memo, issue, i) => {
17+
return memo.concat(
18+
i > 0 && i < issues.length ? ', ' : null,
19+
<a href={'https://github.com/facebook/react/issues/' + issue} key={issue}>
20+
{issue}
21+
</a>
22+
);
23+
}, []);
24+
25+
return <span>{links}</span>;
26+
}

‎fixtures/dom/src/components/TestCase.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
const React = window.React;
2+
13
import cn from 'classnames';
24
import semver from 'semver';
3-
import React from 'react';
45
import PropTypes from 'prop-types';
6+
import IssueList from './IssueList';
57
import {parse} from 'query-string';
68
import {semverString} from './propTypes';
79

@@ -36,6 +38,7 @@ class TestCase extends React.Component {
3638
resolvedIn,
3739
resolvedBy,
3840
affectedBrowsers,
41+
relatedIssues,
3942
children,
4043
} = this.props;
4144

@@ -93,6 +96,9 @@ class TestCase extends React.Component {
9396

9497
{affectedBrowsers && <dt>Affected browsers: </dt>}
9598
{affectedBrowsers && <dd>{affectedBrowsers}</dd>}
99+
100+
{relatedIssues && <dt>Related Issues: </dt>}
101+
{relatedIssues && <dd><IssueList issues={relatedIssues} /></dd>}
96102
</dl>
97103

98104
<p className="test-case__desc">

‎fixtures/dom/src/components/fixtures/selects/index.js‎

Lines changed: 63 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
const React = window.React;
22
const ReactDOM = window.ReactDOM;
33

4+
import FixtureSet from '../../FixtureSet';
5+
import TestCase from '../../TestCase';
6+
47
class SelectFixture extends React.Component {
58
state = {value: ''};
69
_nestedDOMNode = null;
@@ -31,35 +34,66 @@ class SelectFixture extends React.Component {
3134

3235
render() {
3336
return (
34-
<form>
35-
<fieldset>
36-
<legend>Controlled</legend>
37-
<select value={this.state.value} onChange={this.onChange}>
38-
<option value="">Select a color</option>
39-
<option value="red">Red</option>
40-
<option value="blue">Blue</option>
41-
<option value="green">Green</option>
42-
</select>
43-
<span className="hint">Value: {this.state.value}</span>
44-
</fieldset>
45-
<fieldset>
46-
<legend>Uncontrolled</legend>
47-
<select defaultValue="">
48-
<option value="">Select a color</option>
49-
<option value="red">Red</option>
50-
<option value="blue">Blue</option>
51-
<option value="green">Green</option>
52-
</select>
53-
<span className="hint" />
54-
</fieldset>
55-
<fieldset>
56-
<legend>Controlled in nested subtree</legend>
57-
<div ref={node => (this._nestedDOMNode = node)} />
58-
<span className="hint">
59-
This should synchronize in both direction with the one above.
60-
</span>
61-
</fieldset>
62-
</form>
37+
<FixtureSet title="Selects" description="">
38+
<form className="field-group">
39+
<fieldset>
40+
<legend>Controlled</legend>
41+
<select value={this.state.value} onChange={this.onChange}>
42+
<option value="">Select a color</option>
43+
<option value="red">Red</option>
44+
<option value="blue">Blue</option>
45+
<option value="green">Green</option>
46+
</select>
47+
<span className="hint">Value: {this.state.value}</span>
48+
</fieldset>
49+
<fieldset>
50+
<legend>Uncontrolled</legend>
51+
<select defaultValue="">
52+
<option value="">Select a color</option>
53+
<option value="red">Red</option>
54+
<option value="blue">Blue</option>
55+
<option value="green">Green</option>
56+
</select>
57+
</fieldset>
58+
</form>
59+
60+
<TestCase title="A selected disabled option" relatedIssues="2803">
61+
<TestCase.Steps>
62+
<li>Open the select</li>
63+
<li>Select "1"</li>
64+
<li>Attempt to reselect "Please select an item"</li>
65+
</TestCase.Steps>
66+
67+
<TestCase.ExpectedResult>
68+
The initial picked option should be "Please select an
69+
item", however it should not be a selectable option.
70+
</TestCase.ExpectedResult>
71+
72+
<div className="test-fixture">
73+
<select defaultValue="">
74+
<option value="" disabled>Please select an item</option>
75+
<option>0</option>
76+
<option>1</option>
77+
<option>2</option>
78+
</select>
79+
</div>
80+
</TestCase>
81+
82+
<TestCase title="An unselected disabled option" relatedIssues="2803">
83+
<TestCase.ExpectedResult>
84+
The initial picked option value should "0": the first non-disabled option.
85+
</TestCase.ExpectedResult>
86+
87+
<div className="test-fixture">
88+
<select defaultValue="">
89+
<option disabled>Please select an item</option>
90+
<option>0</option>
91+
<option>1</option>
92+
<option>2</option>
93+
</select>
94+
</div>
95+
</TestCase>
96+
</FixtureSet>
6397
);
6498
}
6599
}

‎fixtures/dom/src/style.css‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,20 @@ html {
88
font-size: 10px;
99
}
1010
body {
11-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
11+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
12+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
13+
sans-serif;
1214
font-size: 1.4rem;
1315
margin: 0;
1416
padding: 0;
1517
}
1618

17-
select {
18-
width: 12rem;
19-
}
20-
2119
button {
2220
margin: 10px;
2321
font-size: 18px;
2422
padding: 5px;
2523
}
2624

27-
2825
.header {
2926
background: #222;
3027
box-shadow: inset 0 -1px 3px #000;
@@ -34,6 +31,10 @@ button {
3431
padding: .8rem 1.6rem;
3532
}
3633

34+
.header select {
35+
width: 12rem;
36+
}
37+
3738
.header__inner {
3839
display: table;
3940
margin: 0 auto;
@@ -101,7 +102,8 @@ fieldset {
101102
overflow: hidden;
102103
}
103104

104-
ul, ol {
105+
ul,
106+
ol {
105107
margin: 0 0 2rem 0;
106108
}
107109

@@ -212,3 +214,7 @@ li {
212214
background-color: #f4f4f4;
213215
border-top: 1px solid #d9d9d9;
214216
}
217+
218+
.field-group {
219+
overflow: hidden;
220+
}

0 commit comments

Comments
 (0)