element-plus/packages/slider/__tests__/slider.spec.ts

import { mount } from '@vue/test-utils'
import { nextTick, h } from 'vue'
import Slider from '../src/index.vue'

import { jestMock } from '../../utils/jestMock'

describe('Slider', () => {
  it('create', () => {
    const wrapper = mount(Slider)
    expect(wrapper.props().modelValue).toBe(0)
  })


  it('should not exceed min and max', done => {

    const wrapper = mount({
      template: `
        <slider v-model="value" :min="50"></slider>
      `,
      components: { Slider },
      data() {
        return {
          value: 60,
        }
      },
    })
    setTimeout(() => {
      wrapper.vm.value = 40
      nextTick().then(() => {
        expect(wrapper.vm.value).toBe(50)
        wrapper.vm.value = 120
        nextTick().then(() => {
          expect(wrapper.vm.value).toBe(100)
          done()
        })
      })
    }, 10)
  })

  it('show tooltip', () => {
    const wrapper = mount({
      template: `
        <div>
          <slider v-model="value">
          </slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0,
        }
      },
    })
    const slider: any = wrapper.findComponent({ name:'ElSliderButton' })
    slider.vm.handleMouseEnter()
    expect(slider.vm.tooltipVisible).toBeTruthy()
    slider.vm.handleMouseLeave()
    expect(slider.vm.tooltipVisible).toBeFalsy()
  })

  it('hide tooltip', () => {
    const wrapper = mount({
      template: `
        <div>
          <slider v-model="value" :show-tooltip="false">
          </slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0,
        }
      },
    })
    expect(wrapper.findComponent({ name:'ElPopper' }).exists()).toBeFalsy()
  })

  it('format tooltip', async() => {
    const wrapper = mount({
      template: `
        <div>
          <slider ref="slider" v-model="value" :format-tooltip="formatTooltip">
          </slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0,
        }
      },
      methods: {
        formatTooltip(val) {
          return '$' + val
        },
      },
    })
    const slider:any = wrapper.findComponent({ name:'ElSliderButton' })
    nextTick().then(() => {
      expect(slider.vm.formatValue).toBe('$0')
    })
  })

  it('drag', done => {
    const wrapper = mount({
      template: `
        <div style="width: 200px;">
          <slider v-model="value" :vertical="vertical"></slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          vertical: false,
          value: 0,
        }
      },
    }, {
      attachTo: document.body,
    })
    const mockClientWidth = jestMock(
      wrapper.find('.el-slider__runway').element,
      'clientWidth',
      () => 200,
      'get')
    const slider = wrapper.findComponent({ name:'ElSliderButton' })
    slider.trigger('mousedown',{ clientX: 0 })
    const mousemove = document.createEvent('MouseEvent')
    mousemove.initMouseEvent('mousemove', true, true, window, 1, 100, 0, 100, 0, false, false, true, false, 0, null)
    window.dispatchEvent(mousemove)
    const mouseup = document.createEvent('MouseEvent')
    mouseup.initMouseEvent('mouseup', true, true, window, 1, 100, 0, 100, 0, false, false, true, false, 0, null)
    window.dispatchEvent(mouseup)
    setTimeout(() => {
      expect(wrapper.vm.value === 50).toBeTruthy()
      mockClientWidth.mockRestore()
      wrapper.vm.vertical = true
      wrapper.vm.value = 0
      nextTick(() => {
        expect(wrapper.vm.value === 0).toBeTruthy()

        const mockClientHeight = jestMock(
          wrapper.find('.el-slider__runway').element,
          'clientHeight',
          () => 200,
          'get')
        slider.trigger('mousedown',{ clientY: 0 })
        const mousemove = document.createEvent('MouseEvent')
        mousemove.initMouseEvent('mousemove', true, true, window, 1, 0, -100, 0, -100, false, false, true, false, 0, null)
        window.dispatchEvent(mousemove)
        const mouseup = document.createEvent('MouseEvent')
        mouseup.initMouseEvent('mouseup', true, true, window, 1, 0, -100, 0, -100, false, false, true, false, 0, null)
        window.dispatchEvent(mouseup)
        setTimeout(() => {
          expect(wrapper.vm.value === 50).toBeTruthy()
          mockClientHeight.mockRestore()
          done()
        }, 10)
      })
    }, 10)
  })

  it('accessibility', done => {
    const wrapper = mount({
      template: `
        <div>
          <slider v-model="value"></slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0.1,
        }
      },
    })
    const slider:any = wrapper.findComponent({ name:'ElSliderButton' })
    slider.vm.onRightKeyDown()
    setTimeout(() => {
      expect(wrapper.vm.value).toBe(1)
      slider.vm.onLeftKeyDown()
      setTimeout(() => {
        expect(wrapper.vm.value).toBe(0)
        done()
      }, 10)
    }, 10)
  })


  it('step', done => {
    const wrapper = mount({
      template: `
        <div style="width: 200px;">
          <slider v-model="value" :min="0" :max="1" :step="0.1"></slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0,
        }
      },
    }, {
      attachTo: document.body,
    })
    const mockClientWidth = jestMock(
      wrapper.find('.el-slider__runway').element,
      'clientWidth',
      () => 200,
      'get')
    const slider:any = wrapper.findComponent({ name:'ElSliderButton' })
    nextTick().then(() => {
      slider.trigger('mousedown',{ clientX: 0 })
      const mousemove = document.createEvent('MouseEvent')
      mousemove.initMouseEvent('mousemove', true, true, window, 1, 100, 0, 100, 0, false, false, true, false, 0, null)
      window.dispatchEvent(mousemove)
      const mouseup = document.createEvent('MouseEvent')
      mouseup.initMouseEvent('mouseup', true, true, window, 1, 100, 0, 100, 0, false, false, true, false, 0, null)
      window.dispatchEvent(mouseup)
      setTimeout(() => {
        expect(wrapper.vm.value === 0.5).toBeTruthy()
        mockClientWidth.mockRestore()
        done()
      }, 10)
    })
  })


  it('click', done => {
    const wrapper = mount({
      template: `
        <div>
          <slider v-model="value"></slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0,
        }
      },
    })
    const slider:any = wrapper.findComponent({ name:'ElSlider' })
    setTimeout(() => {
      slider.vm.onSliderClick({ clientX: 100 })
      setTimeout(() => {
        expect(wrapper.vm.value > 0).toBeTruthy()
        done()
      }, 10)
    }, 10)
  })

  it('change event', done => {
    const wrapper = mount({
      template: `
        <div style="width: 200px">
          <slider v-model="value" @change="onChange">
          </slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          data: 0,
          value: 0,
        }
      },
      methods: {
        onChange(val) {
          this.data = val
        },
      },
    })
    const slider:any = wrapper.findComponent({ name:'ElSlider' })
    const mockRectLeft = jestMock(
      wrapper.find('.el-slider__runway').element,
      'getBoundingClientRect',
      () => {
        return {
          left: 0,
        }
      })
    const mockClientWidth = jestMock(
      wrapper.find('.el-slider__runway').element,
      'clientWidth',
      () => 200,
      'get')
    setTimeout(() => {
      expect(wrapper.vm.data).toBe(0)
      slider.vm.onSliderClick({ clientX: 100 })
      setTimeout(() => {
        expect(wrapper.vm.data === 50).toBeTruthy()
        mockRectLeft.mockRestore()
        mockClientWidth.mockRestore()
        done()
      }, 10)
    }, 10)
  })

  it('disabled', done => {
    const wrapper = mount({
      template: `
        <div>
          <slider v-model="value" disabled></slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0,
        }
      },
    })
    const mockClientWidth = jestMock(
      wrapper.find('.el-slider__runway').element,
      'clientWidth',
      () => 200,
      'get')
    const slider:any = wrapper.findComponent({ name:'ElSliderButton' })
    slider.vm.onButtonDown({ clientX: 0 })
    const mousemove = document.createEvent('MouseEvent')
    mousemove.initMouseEvent('mousemove', true, true, window, 1, 50, 0, 50, 0, false, false, true, false, 0, null)
    window.dispatchEvent(mousemove)
    const mouseup = document.createEvent('MouseEvent')
    mouseup.initMouseEvent('mouseup', true, true, window, 1, 50, 0, 50, 0, false, false, true, false, 0, null)
    window.dispatchEvent(mouseup)
    setTimeout(() => {
      expect(wrapper.vm.value).toBe(0)
      mockClientWidth.mockRestore()
      done()
    }, 10)
  })

  // TODO: waiting for InputNumber refactored.

  // it('show input', done => {
  //   const wrapper = mount({
  //     template: `
  //       <div>
  //         <slider v-model="value" show-input></slider>
  //       </div>
  //     `,
  //     components: { Slider },
  //     data() {
  //       return {
  //         value: 0,
  //       }
  //     },
  //   })
  //   setTimeout(() => {
  //     wrapper.find('.el-input-number').trigger('keyup')
  //     const inputNumber = wrapper.getComponent('ElInputNumber')
  //     inputNumber.vm.setCurrentValue(40)
  //     setTimeout(() => {
  //       expect(wrapper.vm.value).toBe(40)
  //       done()
  //     }, 10)
  //   }, 10)
  // })

  it('show stops', () => {
    const wrapper = mount(Slider, {
      props: {
        showStops: true,
        step: 10,
      },
    })
    const stops = wrapper.findAll('.el-slider__stop')
    expect(stops.length).toBe(9)
  })


  it('vertical mode', done => {
    const wrapper = mount({
      template: `
        <div>
          <slider vertical v-model="value" height="200px"></slider>
        </div>
      `,
      components: { Slider },
      data() {
        return {
          value: 0,
        }
      },
    }, {
      attachTo: document.body,
    })
    const mockRectBottom = jestMock(
      wrapper.find('.el-slider__runway').element,
      'getBoundingClientRect',
      () => {
        return {
          bottom: 200,
        }
      })
    const mockClientHeight = jestMock(
      wrapper.find('.el-slider__runway').element,
      'clientHeight',
      () => 200,
      'get')
    const slider:any = wrapper.getComponent({ name: 'ElSlider' })
    setTimeout(() => {
      slider.vm.onSliderClick({ clientY: 100 })
      setTimeout(() => {
        expect(wrapper.vm.value > 0).toBeTruthy()
        mockRectBottom.mockRestore()
        mockClientHeight.mockRestore()
        done()
      }, 10)
    }, 10)
  })

  describe('range', () => {
    it('basic ranged slider', () => {
      const wrapper = mount({
        template: `
        <div>
          <slider v-model="value" range></slider>
        </div>
      `,
        components: { Slider },
        data() {
          return {
            value: [10, 20],
          }
        },
      })
      const sliders = wrapper.findAllComponents({ name:'ElSliderButton' })
      expect(sliders.length).toBe(2)
    })

    it('should not exceed min and max', done => {
      const wrapper = mount({
        template: `
          <div>
            <slider v-model="value" range :min="50">
            </slider>
          </div>
        `,
        components: { Slider },
        data() {
          return {
            value: [50, 60],
          }
        },
      })
      setTimeout(() => {
        wrapper.vm.value = [40, 60]
        setTimeout(() => {
          expect(wrapper.vm.value).toStrictEqual([50, 60])
          wrapper.vm.value = [50, 120]
          setTimeout(() => {
            expect(wrapper.vm.value).toStrictEqual([50, 100])
            done()
          }, 10)
        }, 10)
      }, 10)
    })


    it('click', done => {
      const wrapper = mount({
        template: `
          <div style="width: 200px;">
            <slider range v-model="value"></slider>
          </div>
        `,
        components: { Slider },
        data() {
          return {
            value: [0, 100],
          }
        },
      }, {
        attachTo: document.body,
      })
      const mockRectLeft = jestMock(
        wrapper.find('.el-slider__runway').element,
        'getBoundingClientRect',
        () => {
          return {
            left: 0,
          }
        })
      const mockClientWidth = jestMock(
        wrapper.find('.el-slider__runway').element,
        'clientWidth',
        () => 200,
        'get')
      const slider:any = wrapper.getComponent({ name: 'ElSlider' })
      setTimeout(() => {
        slider.vm.onSliderClick({ clientX: 100 })
        setTimeout(() => {
          // Because mock the clientWidth, so the targetValue is 50.
          // The behavior of the setPosition method in the useSlider.ts file should be that the value of the second button is 50
          expect(wrapper.vm.value[0] === 0).toBeTruthy()
          expect(wrapper.vm.value[1] === 50).toBeTruthy()
          mockRectLeft.mockRestore()
          mockClientWidth.mockRestore()
          done()
        }, 10)
      }, 10)
    })

    it('responsive to dynamic min and max', done => {
      const wrapper = mount({
        template: `
          <div>
            <slider v-model="value" range :min="min" :max="max">
            </slider>
          </div>
        `,
        components: { Slider },
        data() {
          return {
            min: 0,
            max: 100,
            value: [50, 80],
          }
        },
      })
      setTimeout(() => {
        wrapper.vm.min = 60
        setTimeout(() => {
          expect(wrapper.vm.value).toStrictEqual([60, 80])
          wrapper.vm.min = 30
          wrapper.vm.max = 40
          setTimeout(() => {
            expect(wrapper.vm.value).toStrictEqual([40, 40])
            done()
          }, 10)
        }, 10)
      }, 10)
    })

    it('show stops', done => {
      const wrapper = mount({
        template: `
          <div>
            <slider
              v-model="value"
              range
              :step="10"
              show-stops></slider>
          </div>
        `,
        components: { Slider },
        data() {
          return {
            value: [30, 60],
          }
        },
      })
      setTimeout(() => {
        const stops = wrapper.findAll('.el-slider__stop')
        expect(stops.length).toBe(5)
        done()
      }, 10)
    })

    it('marks', async() => {
      const wrapper = mount({
        template: `
          <div>
            <slider
              v-model="value"
              range
              :step="10"
              :marks="marks"
              :min="20"
              show-stops></slider>
          </div>
        `,
        components: { Slider },
        data() {
          return {
            value: [30, 60],
            marks: {
              0: '0°C',
              8: '8°C',
              37: '37°C',
              50: {
                style: {
                  color: '#f50',
                },
                label: h('strong', '50°C'),
              },
            },
          }
        },
      })

      nextTick().then(() => {
        const stops = wrapper.findAll('.el-slider__marks-stop.el-slider__stop')
        const marks = wrapper.findAll('.el-slider__marks .el-slider__marks-text')
        expect(marks.length).toBe(2)
        expect(stops.length).toBe(2)
      })
    })
  })
})