Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support onLoad and onError on <link> #11825

Merged
merged 5 commits into from
Jan 5, 2018
Merged

Support onLoad and onError on <link> #11825

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e07c7f1
Support link event on Fiber component
roderickhsiao Dec 11, 2017
a8b8a8c
Update unit test
roderickhsiao Dec 11, 2017
f92bac0
prettier format
roderickhsiao Dec 11, 2017
cb09630
Update test description
roderickhsiao Dec 19, 2017
e5604bf
Update ReactDOMComponent-test.js
roderickhsiao Dec 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1394,6 +1394,42 @@ describe('ReactDOMComponent', () => {
expect(console.log.calls.argsFor(1)[0]).toContain('onLoad called');
}
});

it('should work load event on <link> component', () => {
const container = document.createElement('div');
const onLoad = jest.fn();

ReactDOM.render(
<link href="http://example.org/link" onLoad={onLoad} />,
container,
);

const loadEvent = document.createEvent('Event');
const link = container.getElementsByTagName('link')[0];

loadEvent.initEvent('load', false, false);
link.dispatchEvent(loadEvent);

expect(onLoad).toHaveBeenCalledTimes(1);
});

it('should work error event on <link> component', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am sorry for two final nits, but do you mind updating this to read:

it('should receive an error event on <link> elements')

Likewise for load. I'm also happy to make this change if you'd like.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

absolutely, thanks for the feedback

const container = document.createElement('div');
const onError = jest.fn();

ReactDOM.render(
<link href="http://example.org/link" onError={onError} />,
container,
);

const errorEvent = document.createEvent('Event');
const link = container.getElementsByTagName('link')[0];

errorEvent.initEvent('error', false, false);
link.dispatchEvent(errorEvent);

expect(onError).toHaveBeenCalledTimes(1);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use jest.fn() instead of console.log? I know other tests use console, but it avoids needing the __DEV__ flag. More or less:

const onLoad = jest.fn();

ReactDOM.render(<link href="http://example.org/link" onLoad={onLoad} />)

// ... dispatch

expect(onLoad).toHaveBeenCalledTimes(1)

Also, could you make the load and error event separate tests?

});

describe('updateComponent', () => {
Expand Down
2 changes: 2 additions & 0 deletions packages/react-dom/src/client/ReactDOMFiberComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,6 +484,7 @@ export function setInitialProperties(
break;
case 'img':
case 'image':
case 'link':
trapBubbledEvent('topError', 'error', domElement);
trapBubbledEvent('topLoad', 'load', domElement);
props = rawProps;
Expand Down Expand Up @@ -858,6 +859,7 @@ export function diffHydratedProperties(
break;
case 'img':
case 'image':
case 'link':
trapBubbledEvent('topError', 'error', domElement);
trapBubbledEvent('topLoad', 'load', domElement);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some background:

I imagine we'll hit this again in the future as new HTML elements support onLoad/onError (though that's probably rare). As far as I understand it, we need to do this eager attachment because error and load to not bubble, so you could technically do:

<div onLoad={() => alert('load!')>
  <img src="image.jpg" />
</div>

I sort of wonder if we should just respect the existing DOM behavior and avoid needing to eagerly attach these listeners. I'll write up an RFC for it!

break;
Expand Down