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

import EditChartNote from './index';

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

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

  it('should save the chart note on submit', () => {
    const saveChartNote = jest.fn();
    const component = mount(<EditChartNote note="foo" saveChartNote={saveChartNote} />);
    const input = component.find('textarea');
    input.simulate('change', {
      target: { value: 'bar' },
    });
    component.find('Button').at(1).find('button').at(0).simulate('click')
    expect(saveChartNote).toHaveBeenCalledWith('', 'bar');
  });
});