Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(hover): add hover API (fixes #254) (#331)
Closes #254 

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
  • Loading branch information
nickmccurdy and kentcdodds committed Jun 10, 2020
1 parent dbdefef commit 50057e3
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 1 deletion.
35 changes: 34 additions & 1 deletion README.md
Expand Up @@ -50,7 +50,6 @@ change the state of the checkbox.
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [API](#api)
- [`click(element)`](#clickelement)
Expand All @@ -61,6 +60,8 @@ change the state of the checkbox.
- [`selectOptions(element, values)`](#selectoptionselement-values)
- [`toggleSelectOptions(element, values)`](#toggleselectoptionselement-values)
- [`tab({shift, focusTrap})`](#tabshift-focustrap)
- [`async hover(element)`](#async-hoverelement)
- [`async unhover(element)`](#async-unhoverelement)
- [Issues](#issues)
- [🐛 Bugs](#-bugs)
- [💡 Feature Requests](#-feature-requests)
Expand Down Expand Up @@ -398,6 +399,37 @@ it('should cycle elements in document tab order', () => {
})
```

### `async hover(element)`

Hovers over `element`.

```jsx
import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Tooltip from '../tooltip'

test('hover', async () => {
const messageText = 'Hello'
render(
<Tooltip messageText={messageText}>
<TrashIcon aria-label="Delete" />
</Tooltip>,
)

await userEvent.hover(screen.getByLabelText(/delete/i))
expect(screen.getByText(messageText)).toBeInTheDocument()
await userEvent.unhover(screen.getByLabelText(/delete/i))
expect(screen.queryByText(messageText)).not.toBeInTheDocument()
})
```

### `async unhover(element)`

Unhovers out of `element`.

> See [above](#async-hoverelement) for an example
## Issues

_Looking to contribute? Look for the [Good First Issue][good-first-issue]
Expand Down Expand Up @@ -482,6 +514,7 @@ Thanks goes to these people ([emoji key][emojis]):

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors][all-contributors] specification.
Expand Down
14 changes: 14 additions & 0 deletions src/__tests__/hover.js
@@ -0,0 +1,14 @@
import React from 'react'
import userEvent from '..'
import {setup} from './helpers/utils'

test('hover', async () => {
const {element, getEventCalls} = setup(<button />)

await userEvent.hover(element)
expect(getEventCalls()).toMatchInlineSnapshot(`
mouseover: Left (0)
mouseenter: Left (0)
mousemove: Left (0)
`)
})
13 changes: 13 additions & 0 deletions src/__tests__/unhover.js
@@ -0,0 +1,13 @@
import React from 'react'
import userEvent from '..'
import {setup} from './helpers/utils'

test('unhover', async () => {
const {element, getEventCalls} = setup(<button />)

await userEvent.unhover(element)
expect(getEventCalls()).toMatchInlineSnapshot(`
mousemove: Left (0)
mouseleave: Left (0)
`)
})
21 changes: 21 additions & 0 deletions src/index.js
@@ -1,5 +1,6 @@
import {fireEvent} from '@testing-library/dom'
import {type} from './type'
import {tick} from './tick'

function isMousePressEvent(event) {
return (
Expand Down Expand Up @@ -451,6 +452,24 @@ function tab({shift = false, focusTrap = document} = {}) {
}
}

async function hover(element, init) {
await tick()
fireEvent.mouseOver(element, getMouseEventOptions('mouseover', init))
await tick()
fireEvent.mouseEnter(element, getMouseEventOptions('mouseenter', init))
await tick()
fireEvent.mouseMove(element, getMouseEventOptions('mousemove', init))
}

async function unhover(element, init) {
await tick()
fireEvent.mouseMove(element, getMouseEventOptions('mousemove', init))
await tick()
fireEvent.mouseOut(element, getMouseEventOptions('mouseout', init))
await tick()
fireEvent.mouseLeave(element, getMouseEventOptions('mouseleave', init))
}

const userEvent = {
click,
dblClick,
Expand All @@ -460,6 +479,8 @@ const userEvent = {
type,
upload,
tab,
hover,
unhover,
}

export default userEvent
Expand Down
2 changes: 2 additions & 0 deletions typings/index.d.ts
Expand Up @@ -45,6 +45,8 @@ declare const userEvent: {
userOpts?: ITypeOpts,
) => Promise<void>
tab: (userOpts?: ITabUserOptions) => void
hover: (element: TargetElement, init?: MouseEventInit) => Promise<void>
unhover: (element: TargetElement, init?: MouseEventInit) => Promise<void>
}

export default userEvent

0 comments on commit 50057e3

Please sign in to comment.