Add test fixture for media event bubbling (#12004)

We want to start refactoring some of the event constants, but we don't
have a great way to confirm media events work as intended. This commit
adds a new DOM test fixture to verify that media events bubble.

Author: nhunzaker

fixtures/dom/public/test.mp4

@@ -63,6 +63,7 @@ class Header extends React.Component {
                 <option value="/error-handling">Error Handling</option>
                 <option value="/event-pooling">Event Pooling</option>
                 <option value="/custom-elements">Custom Elements</option>
+                <option value="/media-events">Media Events</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/Header.js

@@ -10,6 +10,7 @@ import DateInputFixtures from './date-inputs';
 import ErrorHandling from './error-handling';
 import EventPooling from './event-pooling';
 import CustomElementFixtures from './custom-elements';
+import MediaEventsFixtures from './media-events';
 
 const React = window.React;
 
@@ -43,6 +44,8 @@ function FixturesPage() {
       return <EventPooling />;
     case '/custom-elements':
       return <CustomElementFixtures />;
+    case '/media-events':
+      return <MediaEventsFixtures />;
     default:
       return <p>Please select a test fixture.</p>;
   }

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

@@ -0,0 +1,121 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+export default class MediaEvents extends React.Component {
+  state = {
+    playbackRate: 2,
+    events: {
+      onCanPlay: false,
+      onCanPlayThrough: false,
+      onDurationChange: false,
+      onEmptied: false,
+      onEnded: false,
+      onError: false,
+      onLoadedData: false,
+      onLoadedMetadata: false,
+      onLoadStart: false,
+      onPause: false,
+      onPlay: false,
+      onPlaying: false,
+      onProgress: false,
+      onRateChange: false,
+      onSeeked: false,
+      onSeeking: false,
+      onSuspend: false,
+      onTimeUpdate: false,
+      onVolumeChange: false,
+      onWaiting: false,
+    },
+  };
+
+  updatePlaybackRate = () => {
+    this.video.playbackRate = 2;
+  };
+
+  setVideo = el => {
+    this.video = el;
+  };
+
+  eventDidFire(event) {
+    this.setState({
+      events: Object.assign({}, this.state.events, {[event]: true}),
+    });
+  }
+
+  getProgress() {
+    const events = Object.keys(this.state.events);
+    const total = events.length;
+    const fired = events.filter(type => this.state.events[type]).length;
+
+    return fired / total;
+  }
+
+  render() {
+    const events = Object.keys(this.state.events);
+    const handlers = events.reduce((events, event) => {
+      events[event] = this.eventDidFire.bind(this, event);
+      return events;
+    }, {});
+
+    return (
+      <FixtureSet title="Media Events" description="">
+        <TestCase
+          title="Event bubbling"
+          description="Media events should synthetically bubble">
+          <TestCase.Steps>
+            <li>Play the loaded video</li>
+            <li>Pause the loaded video</li>
+            <li>Play the failing video</li>
+            <li>Drag the track bar</li>
+            <li>Toggle the volume button</li>
+            <li>
+              <button onClick={this.updatePlaybackRate}>
+                Click this button to increase playback rate
+              </button>
+            </li>
+          </TestCase.Steps>
+
+          <p className="footnote">
+            Note: This test does not confirm <code>onStalled</code>,{' '}
+            <code>onAbort</code>, or <code>onEncrypted</code>
+          </p>
+
+          <TestCase.ExpectedResult>
+            All events in the table below should be marked as "true".
+          </TestCase.ExpectedResult>
+
+          <section {...handlers}>
+            <video src="/test.mp4" width="300" controls ref={this.setVideo} />
+            <video src="/missing.mp4" width="300" controls />
+            <p className="footnote">
+              Note: The second video will not load. This is intentional.
+            </p>
+          </section>
+          <hr />
+          <section>
+            <h3>Events</h3>
+            <p>The following events should bubble:</p>
+            <table>
+              <tbody>{events.map(this.renderOutcome, this)}</tbody>
+            </table>
+          </section>
+        </TestCase>
+      </FixtureSet>
+    );
+  }
+
+  renderOutcome(event) {
+    let fired = this.state.events[event];
+
+    return (
+      <tr key={event}>
+        <td>
+          <b>{event}</b>
+        </td>
+        <td style={{color: fired ? null : 'red'}}>{`${fired}`}</td>
+      </tr>
+    );
+  }
+}