Add DOM fixtures for disabled button click events (#9271)
Brandon Dail committed
Mar 29, 2017 at 11:17 UTC
da91e9ebe9b74c8709df678785f8623b90de537f
4 files changed
+51
fixtures/dom/src/components/Header.js
+1
@@ -48,6 +48,7 @@ const Header = React.createClass({
48
<option value="/selects">Selects</option>
49
<option value="/textareas">Textareas</option>
50
<option value="/input-change-events">Input change events</option>
51
+ <option value="/buttons">Buttons</option>
52
</select>
53
</label>
54
<label htmlFor="react_version">
fixtures/dom/src/components/fixtures/buttons/index.js
new
+41
@@ -0,0 +1,41 @@
1
+const React = window.React;
2
+
3
+import FixtureSet from '../../FixtureSet';
4
+import TestCase from '../../TestCase';
5
+
6
+function onButtonClick() {
7
+ window.alert(`This shouldn't have happened!`);
8
+}
9
+
10
+export default class ButtonTestCases extends React.Component {
11
+ render() {
12
+ return (
13
+ <FixtureSet title="Buttons">
14
+ <TestCase
15
+ title="onClick with disabled buttons"
16
+ description="The onClick event handler should not be invoked when clicking on a disabled buyaton">
17
+ <TestCase.Steps>
18
+ <li>Click on the disabled button</li>
19
+ </TestCase.Steps>
20
+ <TestCase.ExpectedResult>
21
+ Nothing should happen
22
+ </TestCase.ExpectedResult>
23
+ <button disabled onClick={onButtonClick}>Click Me</button>
24
+ </TestCase>
25
+ <TestCase
26
+ title="onClick with disabled buttons containing other elements"
27
+ description="The onClick event handler should not be invoked when clicking on a disabled button that contains other elements">
28
+ <TestCase.Steps>
29
+ <li>Click on the disabled button, which contains a span</li>
30
+ </TestCase.Steps>
31
+ <TestCase.ExpectedResult>
32
+ Nothing should happen
33
+ </TestCase.ExpectedResult>
34
+ <button disabled onClick={onButtonClick}>
35
+ <span>Click Me</span>
36
+ </button>
37
+ </TestCase>
38
+ </FixtureSet>
39
+ );
40
+ }
41
+}
fixtures/dom/src/components/fixtures/index.js
+3
@@ -5,6 +5,7 @@ import SelectFixtures from './selects';
5
import TextAreaFixtures from './textareas';
6
import InputChangeEvents from './input-change-events';
7
import NumberInputFixtures from './number-inputs/';
8
+import ButtonFixtures from './buttons';
9
10
/**
11
* A simple routing component that renders the appropriate
@@ -25,6 +26,8 @@ const FixturesPage = React.createClass({
26
return <InputChangeEvents />;
27
case '/number-inputs':
28
return <NumberInputFixtures />;
29
+ case '/buttons':
30
+ return <ButtonFixtures />
31
default:
32
return <p>Please select a test fixture.</p>;
33
}
fixtures/dom/src/style.css
+6
@@ -18,6 +18,12 @@ select {
18
width: 12rem;
19
}
20
21
+button {
22
+ margin: 10px;
23
+ font-size: 18px;
24
+ padding: 5px;
25
+}
26
+
27
28
.header {
29
background: #222;