import React from 'react';
import { shallow, mount } from 'enzyme';

import ColorPicker from '.';

describe('ColorPicker', () => {
  it('should display the ColorPicker element', () => {
    const node = shallow(<ColorPicker />);
    expect(node.hasClass('ColorPicker')).toBe(true);
  });

  it('should propgate changes to parent component', () => {
    const spy = jest.fn();
    const node = shallow(<ColorPicker onChange={spy} />);
    const input = node.find('input');

    input.simulate('change', { target: { value: '123' } });
    expect(spy).toHaveBeenCalledWith({ target: { value: '123' } });
  });

  it('should set color via prop', () => {
    const node = mount(<ColorPicker color={'#000'} />);
    const input = node.find('input');
    expect(input.prop('value')).toStrictEqual('#000');
  });

  it('should set color internally', () => {
    const node = mount(<ColorPicker />);
    const input = node.find('input');

    input.simulate('change', { target: { value: '#000' } });

    setTimeout(() => {
      expect(input.prop('value')).toStrictEqual('#000');
    }, 100);
  });
});
