import Vue from 'vue2'
import ScrollNavBar from '@/modules/scroll-nav-bar'
import instantiateComponent from '@/common/helpers/instantiate-component'
import { dispatchTap } from '../utils/event'

const current = '快车'
const labels = [
  '快车',
  '小巴',
  '专车',
  '顺风车',
  '代驾',
  '公交',
  '自驾租车',
  '豪华车',
  '二手车',
  '出租车'
]

describe('ScrollNavBar', () => {
  let vm

  afterEach(() => {
    if (vm) {
      vm.$parent.destroy()
      vm = null
    }
  })

  it('use', () => {
    Vue.use(ScrollNavBar)
    expect(Vue.component(ScrollNavBar.name))
      .to.be.a('function')
  })

  it('should render correct contents', (done) => {
    vm = createScrollNavBar()
    setTimeout(() => {
      expect(vm.$el.className)
        .to.equal('cube-scroll-nav-bar cube-scroll-nav-bar_horizontal')
      const items = vm.$el.querySelectorAll('.cube-scroll-nav-bar-item')
      expect(items.length)
        .to.equal(10)
      expect(items[0].className)
        .to.include('cube-scroll-nav-bar-item_active')
      vm.$updateProps({
        current: '二手车'
      })
      setTimeout(() => {
        expect(vm.$el.querySelector('.cube-scroll-nav-bar-item_active').textContent.trim())
          .equal('二手车')
        // click one
        dispatchTap(vm.$el.querySelectorAll('.cube-scroll-nav-bar-item')[2])
        setTimeout(() => {
          expect(vm.$el.querySelector('.cube-scroll-nav-bar-item_active').textContent.trim())
            .equal('专车')
          vm.$updateProps({
            current: '2',
            labels: labels.concat(['1', '2'])
          })
          setTimeout(() => {
            expect(vm.$el.querySelectorAll('.cube-scroll-nav-bar-item').length)
              .to.equal(12)
            expect(vm.$el.querySelector('.cube-scroll-nav-bar-item_active').textContent.trim())
              .equal('2')
            done()
          })
        })
      })
    }, 50)
  })

  it('should render correct contents - vertical', (done) => {
    vm = createScrollNavBar({
      direction: 'vertical',
      current: current,
      labels: labels
    })
    setTimeout(() => {
      vm.refresh()
      expect(vm.$el.className)
        .to.equal('cube-scroll-nav-bar cube-scroll-nav-bar_vertical')
      const items = vm.$el.querySelectorAll('.cube-scroll-nav-bar-item')
      expect(items.length)
        .to.equal(10)
      expect(items[0].className)
        .to.include('cube-scroll-nav-bar-item_active')
      done()
    }, 50)
  })

  it('should trigger events', (done) => {
    const changeHandler = sinon.spy()

    vm = createScrollNavBar({
      current: current,
      labels: labels
    }, {
      change: changeHandler
    })
    setTimeout(() => {
      dispatchTap(vm.$el.querySelectorAll('.cube-scroll-nav-bar-item')[0])
      setTimeout(() => {
        expect(changeHandler)
          .not.to.be.called
        dispatchTap(vm.$el.querySelectorAll('.cube-scroll-nav-bar-item')[2])
        setTimeout(() => {
          expect(changeHandler)
            .to.be.calledOnce
          expect(changeHandler)
            .to.be.calledWith('专车')
          done()
        })
      })
    }, 50)
  })

  function createScrollNavBar(props = { current: current, labels: labels }, events = {}) {
    return instantiateComponent(Vue, ScrollNavBar, {
      props,
      on: events
    })
  }
})
