downshift.misc-with-utils-mocked.js

// this is stuff that I couldn't think fit anywhere else
// but we still want to have tested.

import * as React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import Downshift from '../'
import {scrollIntoView} from '../utils'

jest.useFakeTimers()
jest.mock('../utils/scrollIntoView.ts', () => ({
  scrollIntoView: jest.fn(),
}))

test('does not scroll from an onMouseMove event', () => {
  class HighlightedIndexController extends React.Component {
    state = {highlightedIndex: 10}
    handleStateChange = changes => {
      // eslint-disable-next-line jest/no-conditional-in-test
      if (changes.hasOwnProperty('highlightedIndex')) {
        this.setState({highlightedIndex: changes.highlightedIndex})
      }
    }
    render() {
      return (
        <Downshift
          onStateChange={this.handleStateChange}
          highlightedIndex={this.state.highlightedIndex}
        >
          {({getInputProps, getItemProps}) => (
            <div>
              <input data-testid="input" {...getInputProps()} />
              <div {...getItemProps({item: 'hi', 'data-testid': 'item-1'})} />
              <div {...getItemProps({item: 'hey', 'data-testid': 'item-2'})} />
            </div>
          )}
        </Downshift>
      )
    }
  }
  render(<HighlightedIndexController />)
  const input = screen.queryByTestId('input')
  const item = screen.queryByTestId('item-2')
  fireEvent.mouseMove(item)
  jest.runAllTimers()
  expect(scrollIntoView).not.toHaveBeenCalled()
  // now let's make sure that we can still scroll items into view
  // ↓
  fireEvent.keyDown(input, {key: 'ArrowDown'})
  expect(scrollIntoView).toHaveBeenCalledWith(item, undefined)
})