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;