import React, { Component } from 'react';

export class Input extends Component {

  constructor(props) {
    super();

    const {
      value
    } = props;

    this.state = {
      value: value || ''
    };
  }

  handleChange = (evt) => {
    const {
      onChange
    } = this.props;

    this.setState(prevState => ({
      value: evt.target.value
    }));

    if (onChange) {
      onChange( evt.target.value);
    }

  }

  render() {
    const {
      value
    } = this.state;

    return (
      <input onChange={this.handleChange} value={value} data-testid="input" />
    )
  }
}



// test

test('will call onChange prop if changes occur', async () => {
	const spy = jest.fn();
  const {getByText, getByTestId, container} = render(<Input value="test" onChange={spy} />);

  expect(getByTestId('input')).toHaveAttribute('value', 'test');

  const input = getByTestId('input');

  input.value = 'testing';

  fireEvent.change(
    input
  );

	expect(getByTestId('input')).toHaveAttribute('value', 'testing');
	expect(spy).toHaveBeenCalled();
  // expect(container.firstChild).toMatchSnapshot();
});