import React from 'react'
import { shallow } from 'enzyme'
import Slider from '.'
import { SliderInput, SliderIndicator } from './Wrappers'
import 'jest-styled-components'
import theme from 'theme'

describe('components/Sliders/components/Slider', () => {
  let slider
  let sliderData = {
    title: 'How much do you invest per trade',
    name: 'slider1',
    value: 0,
    min: 0,
    max: 500,
    order: 0,
    handleChange: jest.fn()
  }

  it('should match snapshot', () => {
    slider = shallow(<Slider {...sliderData} />)
    expect(slider).toMatchSnapshot()
  })
})

describe('components/Sliders/components/Slider/Wrappers/SliderInput', () => {
  let styledSlider
  let styledSliderData = {
    title: 'How much do you invest per trade',
    name: 'slider1',
    value: 250,
    min: 0,
    max: 500,
    handleChange: jest.fn()
  }

  it('should have a blue background before the slider thumb and a transparent white background after', () => {
    const gradientPercent = styledSliderData.value / styledSliderData.max * 100
    const blueColor = theme.colors['blue-ribbon']
    const blueGradientArg = `${blueColor} ${gradientPercent}`
    const blueRegex = new RegExp(blueGradientArg, 'g')
    styledSlider = shallow(<SliderInput {...styledSliderData} />)

    expect(styledSlider).toHaveStyleRule('background', blueRegex, {
      modifier: '::-webkit-slider-runnable-track'
    })
  })
})

describe('components/Sliders/components/Slider/Wrappers/SliderIndicator', () => {
  let sliderIndicator
  let sliderIndicatorData = {
    value: 250,
    max: 500
  }

  it('should have a blue background before the slider thumb and a transparent white background after', () => {
    const gradientPercent =
      sliderIndicatorData.value / sliderIndicatorData.max * 100
    const blueColor = theme.colors['blue-ribbon']
    const blueGradientArg = `${blueColor} ${gradientPercent}`
    const blueRegex = new RegExp(blueGradientArg, 'g')
    sliderIndicator = shallow(<SliderIndicator {...sliderIndicatorData} />)

    expect(sliderIndicator).toHaveStyleRule('background', blueRegex)
  })
})
