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

describe('components/Sliders/components/Slider/components/NumberTicks', () => {
  let numberTicks
  let numberTicksData = {
    value: 0,
    min: 0,
    max: 500
  }

  it('should match snapshot', () => {
    numberTicks = shallow(<NumberTicks {...numberTicksData} />)
    expect(numberTicks).toMatchSnapshot()
  })
})

describe('components/Sliders/components/Slider/components/NumberTicks/Wrappers', () => {
  let numberTick
  let numberTickData = {
    value: 250,
    max: 500,
    order: 1
  }
  it('should be blue when its value exceeds its location', () => {
    numberTick = shallow(<NumberTick {...numberTickData} />)
    expect(numberTick).toHaveStyleRule('color', theme.colors['blue-ribbon'])
  })

  it('should not be blue when its value does not exceed its location', () => {
    numberTickData.value = 0
    numberTick = shallow(<NumberTick {...numberTickData} />)
    expect(numberTick).toHaveStyleRule(
      'color',
      theme.colors['border-transparent'].replace(/ /g, '')
    )
  })

  it('should still be blue on last element when the value equals max', () => {
    numberTickData.value = 500
    numberTick = shallow(<NumberTick {...numberTickData} />)
    expect(numberTick).toHaveStyleRule('color', theme.colors['blue-ribbon'])
  })
})
