import Adapter from 'enzyme-adapter-react-16';
import React, { useState as useStateMock } from 'react';
import ReactTestRenderer from 'react-test-renderer';
import Enzyme, { mount } from 'enzyme';
import ContactPanel from 'app/modules/contact/components/contactPanel/contactPanel';
import { createContact } from 'app/testUtils/mocks/contact.mock';

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(),
}));

describe('ContactPanel component tests', () => {
  
  beforeEach(() => {
    // @ts-ignore
    useStateMock.mockImplementation(init => [ init, setState ]);
  });

  Enzyme.configure({ adapter: new Adapter() });

  const setState = jest.fn();
  const contact = createContact('test');
  const hitAreaSelector = '.js-hit-area';

  it('renders correctly', () => {
    const tree = ReactTestRenderer
      .create(<ContactPanel contact={contact} />)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });

  it('on mouser over sets popup visible to true', () => {
    const component = mount(<ContactPanel contact={contact}/>);
    component.find(hitAreaSelector).simulate('mouseOver');
    expect(setState).toBeCalledWith(true);
  });

  it('on mouser leave sets popup visible to false', () => {
    const component = mount(<ContactPanel contact={contact}/>);
    component.find(hitAreaSelector).simulate('mouseOver');
    component.find(hitAreaSelector).simulate('mouseOut');
    expect(setState).toBeCalledWith(false);
  });
});