test(slider): add test files

packages/slider/__tests__/slider.spec.ts

@@ -0,0 +1,604 @@
+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)
+      })
+    })
+  })
+})