import React from 'react';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import EditTitle from './index';

configure({ adapter: new Adapter() });
describe('EditTitle', () => {
  it('should update the name on change', () => {
    const component = mount(<EditTitle name="foo" saveChanges={() => {}} />);
    const input = component.find('input');
    input.simulate('change', {
      target: { value: 'bar' },
    });
    expect(component.state('name')).toBe('bar');
  });

  it('should save the name on blur', () => {
    const saveChanges = jest.fn();
    const component = mount(<EditTitle name="foo" saveChanges={saveChanges} />);
    const input = component.find('input');
    input.simulate('change', {
      target: { value: 'bar' },
    });
    input.simulate('blur');
    expect(saveChanges).toHaveBeenCalledWith('bar');
  });

  it('should save the name on click', () => {
    const saveChanges = jest.fn();
    const component = mount(<EditTitle name="foo" saveChanges={saveChanges} />);
    const input = component.find('input');
    input.simulate('change', {
      target: { value: 'bar' },
    });
    component.find('Button').at(0).find('button').at(0).simulate('click');
    expect(saveChanges).toHaveBeenCalledWith('bar');
  });
});