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

import { TextArea } from './text-area.component';

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('with hidden label', () => {
    itIsAccessible(
      <TextArea {...props} placeholder="placeholder text" hideLabel />,
    );
  });

  itIsAccessible(<TextArea {...props} placeholder="placeholder text" />);
});
