Add DOM fixtures for disabled button click events (#9271)

fixtures/dom/src/components/Header.js

@@ -48,6 +48,7 @@ const Header = React.createClass({
  <option value="/selects">Selects</option>
  <option value="/textareas">Textareas</option>
  <option value="/input-change-events">Input change events</option>
+ <option value="/buttons">Buttons</option>
  </select>
  </label>
  <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/buttons/index.js

@@ -0,0 +1,41 @@
+const React = window.React;
+
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+function onButtonClick() {
+ window.alert(`This shouldn't have happened!`);
+}
+
+export default class ButtonTestCases extends React.Component {
+ render() {
+ return (
+ <FixtureSet title="Buttons">
+ <TestCase
+ title="onClick with disabled buttons"
+ description="The onClick event handler should not be invoked when clicking on a disabled buyaton">
+ <TestCase.Steps>
+ <li>Click on the disabled button</li>
+ </TestCase.Steps>
+ <TestCase.ExpectedResult>
+ Nothing should happen
+ </TestCase.ExpectedResult>
+ <button disabled onClick={onButtonClick}>Click Me</button>
+ </TestCase>
+ <TestCase
+ title="onClick with disabled buttons containing other elements"
+ description="The onClick event handler should not be invoked when clicking on a disabled button that contains other elements">
+ <TestCase.Steps>
+ <li>Click on the disabled button, which contains a span</li>
+ </TestCase.Steps>
+ <TestCase.ExpectedResult>
+ Nothing should happen
+ </TestCase.ExpectedResult>
+ <button disabled onClick={onButtonClick}>
+ <span>Click Me</span>
+ </button>
+ </TestCase>
+ </FixtureSet>
+ );
+ }
+}

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

@@ -5,6 +5,7 @@ import SelectFixtures from './selects';
 import TextAreaFixtures from './textareas';
 import InputChangeEvents from './input-change-events';
 import NumberInputFixtures from './number-inputs/';
+import ButtonFixtures from './buttons';
 
 /**
  * A simple routing component that renders the appropriate
@@ -25,6 +26,8 @@ const FixturesPage = React.createClass({
  return <InputChangeEvents />;
  case '/number-inputs':
  return <NumberInputFixtures />;
+ case '/buttons':
+ return <ButtonFixtures />
  default:
  return <p>Please select a test fixture.</p>;
  }

fixtures/dom/src/style.css

@@ -18,6 +18,12 @@ select {
  width: 12rem;
 }
 
+button {
+ margin: 10px;
+ font-size: 18px;
+ padding: 5px;
+}
+
 
 .header {
  background: #222;