test: add tests

Author: wiidede

src/Range.vue

@@ -42,8 +42,8 @@ const emits = defineEmits<{
 }>()
 
 defineSlots<{
-  top: (props: { data: U }) => any
-  bottom: (props: { data: U }) => any
+  top?: (props: { data: U }) => any
+  bottom?: (props: { data: U }) => any
 }>()
 
 const modelType = computed<'number' | 'data' | 'numberList' | 'dataList'>(() => {
@@ -131,7 +131,7 @@ watch(model, (val) => {
   else if (val.length < length) {
     for (let i = length - 1; i >= val.length; i--) {
       const index = indexMapReversed.value[i]
-      index > -1 && delete indexMap.value[index]
+      delete indexMap.value[index]
     }
     sort(val)
   }

src/utils.ts

@@ -28,3 +28,5 @@ export function value2percentage(value: number, min: number, max: number, step:
   const percentageStep = step / (max - min)
   return Math.round(percentage / percentageStep) * percentageStep
 }
+
+export const PromiseTimeout = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))

test/range.test.ts

@@ -1,6 +1,8 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { h } from 'vue'
+import { h, nextTick, ref } from 'vue'
+import type { RangeData } from '../src/type'
+import { PromiseTimeout } from '../src/utils'
 import { Range } from '../src/index'
 
 describe('range', () => {
@@ -94,4 +96,91 @@ describe('range', () => {
     })
     expect(wrapper.find('.m-range-mark-item').exists()).toBe(true)
   })
+
+  it('should work with drag', async () => {
+    const model = ref(0)
+    const wrapper = mount(Range, {
+      props: { modelValue: model, style: 'width:200px' },
+      attachTo: document.getElementById('app') || document.body,
+    })
+    const track = wrapper.find('.m-range-track')
+    // @ts-expect-error no mock of getBoundingClientRect
+    vi.spyOn(track.element, 'getBoundingClientRect', 'get').mockImplementation(() => () => ({ left: 0, top: 0, width: 200, height: 200 }))
+    const thumb = wrapper.findComponent({ name: 'RangeThumb' })
+    thumb.trigger('pointerdown', { clientX: 0 })
+
+    const mousemove = new MouseEvent('pointermove', {
+      screenX: 100,
+      screenY: 0,
+      clientX: 100,
+      clientY: 0,
+    })
+    window.dispatchEvent(mousemove)
+    await nextTick()
+    expect(model.value).toBe(50)
+
+    const mouseup = new MouseEvent('pointerup', {
+      screenX: 100,
+      screenY: 0,
+      clientX: 100,
+      clientY: 0,
+    })
+    window.dispatchEvent(mouseup)
+    await nextTick()
+    expect(model.value).toBe(50)
+  })
+
+  it('should work with outside model value change', async () => {
+    const model = ref<RangeData<number>[]>(Array.from({ length: 10 }, (_, i) => ({
+      value: i * 10,
+      data: i,
+    })))
+    mount(Range, {
+      props: {
+        modelValue: model,
+      },
+    })
+    model.value.splice(5, 1)
+    await PromiseTimeout(10)
+    expect(model.value).toMatchInlineSnapshot(`
+      [
+        {
+          "data": 0,
+          "value": 0,
+        },
+        {
+          "data": 1,
+          "value": 10,
+        },
+        {
+          "data": 2,
+          "value": 20,
+        },
+        {
+          "data": 3,
+          "value": 30,
+        },
+        {
+          "data": 4,
+          "value": 40,
+        },
+        {
+          "data": 6,
+          "value": 60,
+        },
+        {
+          "data": 7,
+          "value": 70,
+        },
+        {
+          "data": 8,
+          "value": 80,
+        },
+        {
+          "data": 9,
+          "value": 90,
+        },
+      ]
+    `)
+  })
 })