Skip to content

Commit

Permalink
Add DOM fixtures for disabled button click events
Browse files Browse the repository at this point in the history
  • Loading branch information
Brandon Dail committed Mar 29, 2017
1 parent 090efbd commit c8ab00c
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 0 deletions.
1 change: 1 addition & 0 deletions fixtures/dom/src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
41 changes: 41 additions & 0 deletions fixtures/dom/src/components/fixtures/buttons/index.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
}
3 changes: 3 additions & 0 deletions fixtures/dom/src/components/fixtures/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>;
}
Expand Down
6 changes: 6 additions & 0 deletions fixtures/dom/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ select {
width: 12rem;
}

button {
margin: 10px;
font-size: 18px;
padding: 5px;
}


.header {
background: #222;
Expand Down

0 comments on commit c8ab00c

Please sign in to comment.