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.
Nathan Hunzaker committed
Jan 10, 2018 at 19:53 UTC
b422fec459842a4d23f415a5e1ef2a690563835c
4 files changed
+125
fixtures/dom/public/test.mp4
Binary files /dev/null and b/fixtures/dom/public/test.mp4 differ
fixtures/dom/src/components/Header.js
+1
@@ -63,6 +63,7 @@ class Header extends React.Component {
63
<option value="/error-handling">Error Handling</option>
64
<option value="/event-pooling">Event Pooling</option>
65
<option value="/custom-elements">Custom Elements</option>
66
+ <option value="/media-events">Media Events</option>
67
</select>
68
</label>
69
<label htmlFor="react_version">
fixtures/dom/src/components/fixtures/index.js
+3
@@ -10,6 +10,7 @@ import DateInputFixtures from './date-inputs';
10
import ErrorHandling from './error-handling';
11
import EventPooling from './event-pooling';
12
import CustomElementFixtures from './custom-elements';
13
+import MediaEventsFixtures from './media-events';
14
15
const React = window.React;
16
@@ -43,6 +44,8 @@ function FixturesPage() {
44
return <EventPooling />;
45
case '/custom-elements':
46
return <CustomElementFixtures />;
47
+ case '/media-events':
48
+ return <MediaEventsFixtures />;
49
default:
50
return <p>Please select a test fixture.</p>;
51
}
fixtures/dom/src/components/fixtures/media-events/index.js
new
+121
@@ -0,0 +1,121 @@
1
+import FixtureSet from '../../FixtureSet';
2
+import TestCase from '../../TestCase';
3
+
4
+const React = window.React;
5
+
6
+export default class MediaEvents extends React.Component {
7
+ state = {
8
+ playbackRate: 2,
9
+ events: {
10
+ onCanPlay: false,
11
+ onCanPlayThrough: false,
12
+ onDurationChange: false,
13
+ onEmptied: false,
14
+ onEnded: false,
15
+ onError: false,
16
+ onLoadedData: false,
17
+ onLoadedMetadata: false,
18
+ onLoadStart: false,
19
+ onPause: false,
20
+ onPlay: false,
21
+ onPlaying: false,
22
+ onProgress: false,
23
+ onRateChange: false,
24
+ onSeeked: false,
25
+ onSeeking: false,
26
+ onSuspend: false,
27
+ onTimeUpdate: false,
28
+ onVolumeChange: false,
29
+ onWaiting: false,
30
+ },
31
+ };
32
+
33
+ updatePlaybackRate = () => {
34
+ this.video.playbackRate = 2;
35
+ };
36
+
37
+ setVideo = el => {
38
+ this.video = el;
39
+ };
40
+
41
+ eventDidFire(event) {
42
+ this.setState({
43
+ events: Object.assign({}, this.state.events, {[event]: true}),
44
+ });
45
+ }
46
+
47
+ getProgress() {
48
+ const events = Object.keys(this.state.events);
49
+ const total = events.length;
50
+ const fired = events.filter(type => this.state.events[type]).length;
51
+
52
+ return fired / total;
53
+ }
54
+
55
+ render() {
56
+ const events = Object.keys(this.state.events);
57
+ const handlers = events.reduce((events, event) => {
58
+ events[event] = this.eventDidFire.bind(this, event);
59
+ return events;
60
+ }, {});
61
+
62
+ return (
63
+ <FixtureSet title="Media Events" description="">
64
+ <TestCase
65
+ title="Event bubbling"
66
+ description="Media events should synthetically bubble">
67
+ <TestCase.Steps>
68
+ <li>Play the loaded video</li>
69
+ <li>Pause the loaded video</li>
70
+ <li>Play the failing video</li>
71
+ <li>Drag the track bar</li>
72
+ <li>Toggle the volume button</li>
73
+ <li>
74
+ <button onClick={this.updatePlaybackRate}>
75
+ Click this button to increase playback rate
76
+ </button>
77
+ </li>
78
+ </TestCase.Steps>
79
+
80
+ <p className="footnote">
81
+ Note: This test does not confirm <code>onStalled</code>,{' '}
82
+ <code>onAbort</code>, or <code>onEncrypted</code>
83
+ </p>
84
+
85
+ <TestCase.ExpectedResult>
86
+ All events in the table below should be marked as "true".
87
+ </TestCase.ExpectedResult>
88
+
89
+ <section {...handlers}>
90
+ <video src="/test.mp4" width="300" controls ref={this.setVideo} />
91
+ <video src="/missing.mp4" width="300" controls />
92
+ <p className="footnote">
93
+ Note: The second video will not load. This is intentional.
94
+ </p>
95
+ </section>
96
+ <hr />
97
+ <section>
98
+ <h3>Events</h3>
99
+ <p>The following events should bubble:</p>
100
+ <table>
101
+ <tbody>{events.map(this.renderOutcome, this)}</tbody>
102
+ </table>
103
+ </section>
104
+ </TestCase>
105
+ </FixtureSet>
106
+ );
107
+ }
108
+
109
+ renderOutcome(event) {
110
+ let fired = this.state.events[event];
111
+
112
+ return (
113
+ <tr key={event}>
114
+ <td>
115
+ <b>{event}</b>
116
+ </td>
117
+ <td style={{color: fired ? null : 'red'}}>{`${fired}`}</td>
118
+ </tr>
119
+ );
120
+ }
121
+}