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

import CurrencySlider from 'components/CurrencySlider';

describe('CurrencySlider', () => {
  let component;
  const props = {
    attribute: 'attribute',
    max: 500000,
    min: 0,
    onChange: jest.fn(),
    value: 0
  };

  beforeEach(() => {
    component = mount(<CurrencySlider {...props} />);
  });

  afterEach(() => {
    component.unmount();
  });

  describe('autoSave enabled', () => {
    it('automatically saves when blurring the text field', () => {
      const textInput = component.find('.form-input');

      expect(component.prop('onChange')).not.toHaveBeenCalled();

      textInput.simulate('change', { target: { value: 20000 } });
      textInput.simulate('blur');

      expect(component.prop('onChange')).toHaveBeenCalled();
    });

    it('automatically saves when you finish moving the slider', () => {
      const { $slider } = component.instance();
      const newValue = 10000;

      expect(component.prop('onChange')).not.toHaveBeenCalled();

      $slider()
        .val(newValue)
        .change();

      expect(component.prop('onChange')).toHaveBeenCalled();
    });

    it('displays an error message when input is out of range', () => {
      component.setProps({ min: 1000, value: 1100 });
      const textInput = component.find('.form-input');

      expect(component.find('p')).not.toExist();

      textInput.simulate('change', { target: { value: 700 } });
      textInput.simulate('blur');

      expect(component.find('p').text()).toContain(
        `Please enter an amount larger than $${component.prop('min')}`
      );
    });
  });
});