import React from 'react'
import { shallow, mount } from 'enzyme'
import Sliders from '.'

describe('components/Sliders', () => {
  let sliders
  let slidersData

  beforeEach(() => {
    slidersData = {
      tradeVol: 250,
      tradeFreq: 200,
      savingsCalcType: 'etf'
    }
  })

  it('should match snapshot', () => {
    sliders = shallow(<Sliders />).setState({ ...slidersData })
    expect(sliders).toMatchSnapshot()
  })

  it('should set correct result value when etf is selected', () => {
    sliders = mount(<Sliders />).setState({ ...slidersData })
    sliders.update()
    const amountString = sliders.find('Wrappers__SlidersResultAmount').text()
    expect(amountString).toEqual('13,220€')
  })

  it('should set correct result value when realEstate is selected', () => {
    slidersData.savingsCalcType = 'realEstate'
    sliders = mount(<Sliders />).setState({ ...slidersData })
    sliders.update()
    const amountString = sliders.find('Wrappers__SlidersResultAmount').text()
    expect(amountString).toEqual('2,280€')
  })

  describe('when a user adjusts a slider', () => {
    let sliders
    let range

    beforeEach(() => {
      sliders = mount(<Sliders />).setState(...slidersData)
      sliders.update()
      range = sliders
        .find('Slider')
        .first()
        .find('input')
    })

    it('should update the corresponding slider state', () => {
      range.simulate('change', {
        target: { name: 'tradingVol', value: 50 }
      })
      sliders.update()
      expect(sliders.state().tradingVol).toBe(50)
    })
  })
})
