From da91e9ebe9b74c8709df678785f8623b90de537f Mon Sep 17 00:00:00 2001
From: Brandon Dail <aweary@users.noreply.github.com>
Date: Wed, 29 Mar 2017 11:17:54 -0500
Subject: [PATCH] Add DOM fixtures for disabled button click events (#9271)

---
 fixtures/dom/src/components/Header.js         |  1 +
 .../src/components/fixtures/buttons/index.js  | 41 +++++++++++++++++++
 fixtures/dom/src/components/fixtures/index.js |  3 ++
 fixtures/dom/src/style.css                    |  6 +++
 4 files changed, 51 insertions(+)
 create mode 100644 fixtures/dom/src/components/fixtures/buttons/index.js

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index 5f717d8be1..511b35e081 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/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">
diff --git a/fixtures/dom/src/components/fixtures/buttons/index.js b/fixtures/dom/src/components/fixtures/buttons/index.js
new file mode 100644
index 0000000000..4991f4e4d8
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
index 516e8ad3ae..91e1405c77 100644
--- a/fixtures/dom/src/components/fixtures/index.js
+++ b/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>;
     }
diff --git a/fixtures/dom/src/style.css b/fixtures/dom/src/style.css
index 032d0c85f6..130f365bcb 100644
--- a/fixtures/dom/src/style.css
+++ b/fixtures/dom/src/style.css
@@ -18,6 +18,12 @@ select {
   width: 12rem;
 }
 
+button {
+  margin: 10px;
+  font-size: 18px;
+  padding: 5px;
+}
+
 
 .header {
   background: #222;