-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Components: Update ExternalLink to support onClick handler (#45214)
* Update ExternalLink to support onClick handler * Add unit tests for ExternalLink component It includes test cases for onClick event handler and preventing default action when clicking internal anchor links. * Test using getByRole and userEvent * Add CHANGELOG entry * Add comments for defaultPrevented approach * Remove unnecessary data-testid attributes
- Loading branch information
Showing
3 changed files
with
120 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { render, screen } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { ExternalLink } from '..'; | ||
|
||
const setupUser = () => | ||
userEvent.setup( { | ||
advanceTimers: jest.advanceTimersByTime, | ||
} ); | ||
|
||
describe( 'ExternalLink', () => { | ||
test( 'should call function passed in onClick handler when clicking the link', async () => { | ||
const user = setupUser(); | ||
const onClickMock = jest.fn(); | ||
|
||
render( | ||
<ExternalLink href="https://wordpress.org" onClick={ onClickMock }> | ||
WordPress.org | ||
</ExternalLink> | ||
); | ||
|
||
const link = screen.getByRole( 'link', { | ||
name: 'WordPress.org (opens in a new tab)', | ||
} ); | ||
|
||
await user.click( link ); | ||
|
||
expect( onClickMock ).toHaveBeenCalledTimes( 1 ); | ||
} ); | ||
|
||
test( 'should prevent default action when clicking an internal anchor link without passing onClick prop', async () => { | ||
const user = setupUser(); | ||
|
||
render( | ||
<ExternalLink href="#test">I'm an anchor link!</ExternalLink> | ||
); | ||
|
||
const link = screen.getByRole( 'link', { | ||
name: "I'm an anchor link! (opens in a new tab)", | ||
} ); | ||
|
||
// We are using this approach so we can test the defaultPrevented | ||
// without passing an onClick prop to the component. | ||
const onClickMock = jest.fn(); | ||
link.onclick = onClickMock; | ||
|
||
await user.click( link ); | ||
expect( onClickMock ).toHaveBeenCalledTimes( 1 ); | ||
expect( onClickMock ).toHaveBeenLastCalledWith( | ||
expect.objectContaining( { defaultPrevented: true } ) | ||
); | ||
} ); | ||
|
||
test( 'should call function passed in onClick handler and prevent default action when clicking an internal anchor link', async () => { | ||
const user = setupUser(); | ||
const onClickMock = jest.fn(); | ||
|
||
render( | ||
<ExternalLink href="#test" onClick={ onClickMock }> | ||
I'm an anchor link! | ||
</ExternalLink> | ||
); | ||
|
||
const link = screen.getByRole( 'link', { | ||
name: "I'm an anchor link! (opens in a new tab)", | ||
} ); | ||
|
||
await user.click( link ); | ||
expect( onClickMock ).toHaveBeenCalledTimes( 1 ); | ||
expect( onClickMock ).toHaveBeenLastCalledWith( | ||
expect.objectContaining( { defaultPrevented: true } ) | ||
); | ||
} ); | ||
|
||
test( 'should not prevent default action when clicking a non anchor link without passing onClick prop', async () => { | ||
const user = setupUser(); | ||
|
||
render( | ||
<ExternalLink href="https://wordpress.org"> | ||
I'm not an anchor link! | ||
</ExternalLink> | ||
); | ||
|
||
const link = screen.getByRole( 'link', { | ||
name: "I'm not an anchor link! (opens in a new tab)", | ||
} ); | ||
|
||
// We are using this approach so we can test the defaultPrevented | ||
// without passing an onClick prop to the component. | ||
const onClickMock = jest.fn(); | ||
link.onclick = onClickMock; | ||
|
||
await user.click( link ); | ||
|
||
expect( onClickMock ).toHaveBeenCalledTimes( 1 ); | ||
expect( onClickMock ).toHaveBeenLastCalledWith( | ||
expect.objectContaining( { defaultPrevented: false } ) | ||
); | ||
} ); | ||
} ); |