// @flow
import React from 'react';
import { act } from 'react-dom/test-utils';
import { SearchInput, type SearchInputProps } from '.';
import { mountWrappedComponent } from '../../../../utils/tests';

describe('SearchInput', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  const countries = [
    { id: 'country-can', text: 'Canada', region: 'North America' },
    { id: 'country-usa', text: 'United States', region: 'North America' },
    { id: 'country-uae', text: 'United Arab Emirates', region: 'Middle East' },
    { id: 'country-fr', text: 'France', region: 'Europe' },
    { id: 'country-es', text: 'Spain', region: 'Europe' },
  ];

  const DEFAULT_PROPS: $Shape<SearchInputProps> = {
    searchResults: countries,
    onChange: jest.fn(),
  };

  it('implements onChange handler', () => {
    const spy = jest.fn();
    const component = mountWrappedComponent(
      <SearchInput {...DEFAULT_PROPS} onChange={spy} />,
    );
    const input = component.find('input');
    act(() => {
      input.simulate('focus');
      input.simulate('change', { target: { value: 'hello world' } });
    });

    expect(spy).toHaveBeenCalledWith('hello world');
  });
});
