// @flow
import React from 'react';
import { mountWrappedComponent, renderSnapshot } from '../../../../utils/tests';

import { TextArea } from '.';

const props = {
  label: 'Type something here',
  onChange: jest.fn(),
};

describe('TextArea', () => {
  it('implements onChange handler', () => {
    const spy = jest.fn();
    const wrapper = mountWrappedComponent(
      <TextArea {...props} onChange={spy} />,
    ).find('StyledTextarea');

    const mockEvent = { target: { value: 'hello world' } };
    wrapper.simulate('change', mockEvent);
    expect(spy).toHaveBeenCalledWith('hello world', expect.any(Object));
  });

  it('implements onFocus handler', () => {
    const spy = jest.fn();
    const wrapper = mountWrappedComponent(
      <TextArea {...props} onFocus={spy} />,
    ).find('StyledTextarea');

    wrapper.simulate('focus');
    expect(spy).toHaveBeenCalled();
  });

  it('implements onBlur handler', () => {
    const spy = jest.fn();
    const wrapper = mountWrappedComponent(
      <TextArea {...props} onBlur={spy} />,
    ).find('StyledTextarea');

    wrapper.simulate('focus');
    wrapper.simulate('blur');
    expect(spy).toHaveBeenCalled();
  });

  describe('Snapshots', () => {
    it('renders', () => {
      const textarea = renderSnapshot(<TextArea {...props} />);
      expect(textarea).toMatchSnapshot();
    });

    it('renders with custom height', () => {
      const textarea = renderSnapshot(<TextArea {...props} height="400px" />);
      expect(textarea).toMatchSnapshot();
    });

    it('renders without a label', () => {
      const textarea = renderSnapshot(<TextArea {...props} hideLabel />);
      expect(textarea).toMatchSnapshot();
    });
  });
});
