Add pooled event test fixtures (#1)

fixtures/dom/src/components/Header.js

@@ -59,6 +59,7 @@ class Header extends React.Component {
                   Input change events
                 </option>
                 <option value="/buttons">Buttons</option>
+                <option value="/event-pooling">Event Pooling</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/event-pooling/hit-box.js

@@ -0,0 +1,38 @@
+const React = window.React
+
+class HitBox extends React.Component {
+  state = {
+    x: 0,
+    y: 0
+  }
+
+  static defaultProps = {
+    onMouseMove: n => n
+  }
+
+  onMove = event => {
+    this.setState({ x: event.clientX, y: event.clientY })
+    this.props.onMouseMove(event)
+  }
+
+  render() {
+    const { x, y } = this.state
+
+    const boxStyle = {
+      padding: '10px 20px',
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px'
+    }
+
+    return (
+      <div onMouseMove={this.onMove} style={boxStyle}>
+        <p>Trace your mouse over this box.</p>
+        <p>
+          Last movement: {x},{y}
+        </p>
+      </div>
+    )
+  }
+}
+
+export default HitBox

fixtures/dom/src/components/fixtures/event-pooling/index.js

@@ -0,0 +1,18 @@
+const React = window.React;
+
+import FixtureSet from '../../FixtureSet';
+import MouseMove from './mouse-move'
+import Persistence from './persistence'
+
+class EventPooling extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Event Pooling" description="">
+        <MouseMove />
+        <Persistence />
+      </FixtureSet>
+    );
+  }
+}
+
+export default EventPooling;

fixtures/dom/src/components/fixtures/event-pooling/mouse-move.js

@@ -0,0 +1,47 @@
+const React = window.React
+
+import TestCase from '../../TestCase'
+import HitBox from './hit-box'
+
+class MouseMove extends React.Component {
+  state = {
+    events: []
+  }
+
+  checkEvent = event => {
+    let { events } = this.state
+
+    if (event.type === 'mousemove' && events.indexOf(event) === -1) {
+      this.setState({ events: events.concat(event) })
+    }
+  }
+
+  render() {
+    const { events } = this.state
+
+    return (
+      <TestCase title="Mouse Move" description="">
+        <TestCase.Steps>
+          <li>Mouse over the box below</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Mousemove should share the same instance of the event between
+          dispatches.
+        </TestCase.ExpectedResult>
+
+        <HitBox onMouseMove={this.checkEvent} />
+
+        <p>
+          Was the event pooled?{' '}
+          <b>
+            {events.length ? (events.length <= 1 ? 'Yes' : 'No') : 'Unsure'} ({events.length}{' '}
+            events)
+          </b>
+        </p>
+      </TestCase>
+    )
+  }
+}
+
+export default MouseMove

fixtures/dom/src/components/fixtures/event-pooling/persistence.js

@@ -0,0 +1,65 @@
+const React = window.React
+
+import TestCase from '../../TestCase'
+import HitBox from './hit-box'
+
+class Persistence extends React.Component {
+  state = {
+    persisted: 0,
+    pooled: []
+  }
+
+  addPersisted = event => {
+    let { persisted, pooled } = this.state
+
+    event.persist()
+
+    if (event.type === 'mousemove') {
+      this.setState({
+        persisted: persisted + 1,
+        pooled: pooled.filter(e => e !== event)
+      })
+    }
+  }
+
+  addPooled = event => {
+    let { pooled } = this.state
+
+    if (event.type === 'mousemove' && pooled.indexOf(event) === -1) {
+      this.setState({ pooled: pooled.concat(event) })
+    }
+  }
+
+  render() {
+    const { pooled, persisted } = this.state
+
+    return (
+      <TestCase title="Persistence" description="">
+        <TestCase.Steps>
+          <li>Mouse over the pooled event box</li>
+          <li>Mouse over the persisted event box</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The pool size should not increase above 1, but reduce to 0 when hovering over the persisted region.
+        </TestCase.ExpectedResult>
+
+        <h2>Add Pooled Event:</h2>
+        <HitBox onMouseMove={this.addPooled} />
+
+        <h2>Add Persisted Event:</h2>
+        <HitBox onMouseMove={this.addPersisted} />
+
+        <p>
+          Pool size: {pooled.length}
+        </p>
+
+        <p>
+          Persisted size: {persisted}
+        </p>
+      </TestCase>
+    )
+  }
+}
+
+export default Persistence

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

@@ -7,6 +7,7 @@ import InputChangeEvents from './input-change-events';
 import NumberInputFixtures from './number-inputs';
 import PasswordInputFixtures from './password-inputs';
 import ButtonFixtures from './buttons';
+import EventPooling from './event-pooling';
 
 /**
  * A simple routing component that renders the appropriate
@@ -30,6 +31,8 @@ function FixturesPage() {
       return <PasswordInputFixtures />;
     case '/buttons':
       return <ButtonFixtures />;
+    case '/event-pooling':
+      return <EventPooling />;
     default:
       return <p>Please select a test fixture.</p>;
   }