Components: Implement Button as assigning ref via forwardRef #6527
Conversation
aduth
added
Framework
| // Disable reason: This test is desirable, but unsupported by Enzyme in | ||
| // the current version, as it depends on features new to React in 16.3.0. | ||
| // | ||
| // eslint-disable-next-line jest/no-disabled-tests |
There was a problem hiding this comment.
Should we e.g. create an issue to remind us to unskip this in the future?
There was a problem hiding this comment.
Should we e.g. create an issue to remind us to unskip this in the future?
Created at #7005
|
Hmm, unfortunately seems to be another instance of Enzyme lagging behind React: enzymejs/enzyme#1604 Was able to implement the workaround for the buttons tests themselves, but will have to see what I can do for other components which render buttons (failing Autocomplete tests, for example). |
yes, this is pretty sad that they failed to upgrade to React 16.3 :( |
|
|
||
| mount( <ButtonWithForwardedRef ref={ ref } /> ); | ||
|
|
||
| expect( ref.current.nodeName ).toBe( 'button' ); |
There was a problem hiding this comment.
This test will fail when unskipped: Element#nodeName returns uppercase, so should be asserting as toBe( 'BUTTON' );
There was a problem hiding this comment.
It may take another few weeks until we can unskip those tests :(
The day when we remove Enzyme is becoming a reality if there is no progress on supporting React 16.3+
This pull request seeks to bring in React's (new as of 16.3.0)
forwardRefas an alternative solution for components which need to expose its internal DOM representation. AButtonabstraction is a perfect use case for this, where we expose an instance functionfocusto recreate the native DOM behavior. Instead, we can simply forward therefso that any parent component which assigns areftoButtonwill have its value assigned as the actual DOM node.Testing instructions:
Verify that there are no regressions in the behavior of button, particularly in the two places where its
refis used for focus: Permalinks returning focus after pressing "OK" on an edit, and similarly for Shared Blocks pressing "OK" on an edit, returning focus to the permalink and Edit buttons respectively.