Fix #5839 Add error event to source element (#6941)

* Fix #5839 Add error event to source element * Add test case for <source onError={callback}> (cherry picked from commit 518336e)
facebook · Jun 14, 2016 · e1c2c42 · e1c2c42
1 parent 05c133a
commit e1c2c42
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -354,7 +354,15 @@ function trapBubbledEventsLocal() {
           );
         }
       }
-
+      break;
+    case 'source':
+      inst._wrapperState.listeners = [
+        ReactBrowserEventEmitter.trapBubbledEvent(
+          EventConstants.topLevelTypes.topError,
+          'error',
+          node
+        ),
+      ];
       break;
     case 'img':
       inst._wrapperState.listeners = [
@@ -530,6 +538,7 @@ ReactDOMComponent.Mixin = {
       case 'img':
       case 'link':
       case 'object':
+      case 'source':
       case 'video':
         this._wrapperState = {
           listeners: null,
@@ -1136,6 +1145,7 @@ ReactDOMComponent.Mixin = {
       case 'img':
       case 'link':
       case 'object':
+      case 'source':
       case 'video':
         var listeners = this._wrapperState.listeners;
         if (listeners) {

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -764,6 +764,26 @@ describe('ReactDOMComponent', function() {
       };
     });
 
+    it('should work error event on <source> element', function() {
+      spyOn(console, 'error');  
+      var container = document.createElement('div');
+      ReactDOM.render(
+        <video>
+          <source src="http://example.org/video" type="video/mp4" onError={(e) => console.error('onError called')} />
+        </video>,
+        container
+      );
+
+      var errorEvent = document.createEvent('Event');
+      errorEvent.initEvent('error', false, false);
+      container.getElementsByTagName('source')[0].dispatchEvent(errorEvent);
+
+      expect(console.error.calls.count()).toBe(1);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'onError called'
+      );
+    });
+
     it('should not duplicate uppercased selfclosing tags', function() {
       var Container = React.createClass({
         render: function() {