Support onLoad and onError on <link> (#11825)
* Support link event on Fiber component * Update unit test * prettier format * Update test description * Update ReactDOMComponent-test.js
Roderick Hsiao committed
Jan 5, 2018 at 10:14 UTC
e74f3ce5657213d08b7a4e976fe631c645acfb1c
2 files changed
+38
packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+36
@@ -1310,6 +1310,42 @@ describe('ReactDOMComponent', () => {
1310
expect(console.log.calls.argsFor(1)[0]).toContain('onLoad called');
1311
}
1312
});
1313
+
1314
+ it('should receive a load event on <link> elements', () => {
1315
+ const container = document.createElement('div');
1316
+ const onLoad = jest.fn();
1317
+
1318
+ ReactDOM.render(
1319
+ <link href="http://example.org/link" onLoad={onLoad} />,
1320
+ container,
1321
+ );
1322
+
1323
+ const loadEvent = document.createEvent('Event');
1324
+ const link = container.getElementsByTagName('link')[0];
1325
+
1326
+ loadEvent.initEvent('load', false, false);
1327
+ link.dispatchEvent(loadEvent);
1328
+
1329
+ expect(onLoad).toHaveBeenCalledTimes(1);
1330
+ });
1331
+
1332
+ it('should receive an error event on <link> elements', () => {
1333
+ const container = document.createElement('div');
1334
+ const onError = jest.fn();
1335
+
1336
+ ReactDOM.render(
1337
+ <link href="http://example.org/link" onError={onError} />,
1338
+ container,
1339
+ );
1340
+
1341
+ const errorEvent = document.createEvent('Event');
1342
+ const link = container.getElementsByTagName('link')[0];
1343
+
1344
+ errorEvent.initEvent('error', false, false);
1345
+ link.dispatchEvent(errorEvent);
1346
+
1347
+ expect(onError).toHaveBeenCalledTimes(1);
1348
+ });
1349
});
1350
1351
describe('updateComponent', () => {
packages/react-dom/src/client/ReactDOMFiberComponent.js
+2
@@ -485,6 +485,7 @@ export function setInitialProperties(
485
break;
486
case 'img':
487
case 'image':
488
+ case 'link':
489
trapBubbledEvent('topError', 'error', domElement);
490
trapBubbledEvent('topLoad', 'load', domElement);
491
props = rawProps;
@@ -870,6 +871,7 @@ export function diffHydratedProperties(
871
break;
872
case 'img':
873
case 'image':
874
+ case 'link':
875
trapBubbledEvent('topError', 'error', domElement);
876
trapBubbledEvent('topLoad', 'load', domElement);
877
break;