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

import Range from '.';

describe('Range', () => {
  React.createRef = jest.fn();
  React.createRef.mockReturnValue({ current: { offsetWidth: 100 } });

  const hndl = jest.fn();
  const opts = {
    showMarks: 5,
    showLabels: true,
    limit: {
      lower: 10,
    },
  };

  const node = mount(
    <Range defaultValue={25} list="example" max={50} options={opts} step={5} updateInfo={hndl}>
      <datalist id="example">
        <option label="👍 Drag..." value={0} />
        <option label="👌 Halfway." value={25} />
        <option label="🤘 Done!" value={50} />
      </datalist>
    </Range>
  );

  it('displays the <Range> element', () => {
    expect(node.getDOMNode().classList).toContain('Range');
  });

  it('should handle input', () => {
    const spy = {
      persist: jest.fn(),
      target: {
        value: 5,
      },
    };

    node.find('input').simulate('input', spy);
    expect(spy.persist).toHaveBeenCalled();
  });
});
