import React from 'react'
import { shallow } from 'enzyme'
import SliderTicks from '.'
import { SliderTick } from './Wrappers'
import 'jest-styled-components'
import theme from 'theme'

describe('components/Sliders/components/Slider/components/SliderTicks', () => {
  let sliderTicks
  let sliderTicksData = {
    value: 0,
    max: 500,
    tickCount: 8
  }

  it('should match snapshot', () => {
    sliderTicks = shallow(<SliderTicks {...sliderTicksData} />)
    expect(sliderTicks).toMatchSnapshot()
  })
})

describe('components/Sliders/components/Slider/components/SliderTicks/Wrappers', () => {
  let sliderTick
  let sliderTickData = {
    value: 250,
    max: 500,
    order: 1,
    tickCount: 8
  }

  it('should be blue when its value is exceeded', () => {
    sliderTick = shallow(<SliderTick {...sliderTickData} />)
    expect(sliderTick).toHaveStyleRule(
      'border-left',
      `1px solid ${theme.colors['blue-ribbon']}`
    )
  })

  it('should not be blue when its value is not exceeded', () => {
    sliderTickData.value = 0
    sliderTick = shallow(<SliderTick {...sliderTickData} />)
    expect(sliderTick).toHaveStyleRule(
      'border-left',
      `1px solid ${theme.colors['border-transparent'].replace(/ /g, '')}`
    )
  })
})
