From 4672ad924551589c4f20f6742876bab0a5973a95 Mon Sep 17 00:00:00 2001
From: AcWrong02 <147061401+AcWrong02@users.noreply.github.com>
Date: Mon, 18 Dec 2023 14:12:30 +0800
Subject: [PATCH] fix(slider): [slider]The Slider component should prompt an
 error when min > max (#1156)

* docs(slider): [slider]remove the ref attribute of ref in basic-usage

* fix(slider): [slider]component should prompt an error when min>max

* test(slider): [slider]add unit test for the min and max props
---
 .../slider/basic-usage-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/slider/basic-usage.vue |  2 +-
 packages/renderless/src/slider/vue.ts         | 11 +++++-
 .../vue/src/slider/__tests__/slider.test.tsx  | 37 ++++++++++++++++---
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue
index 760b787e6..91ed87a95 100644
--- a/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/slider/basic-usage-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="setValue">设置值</tiny-button>
-    <tiny-slider v-model="value" ref="sliderRef"></tiny-slider>
+    <tiny-slider v-model="value"></tiny-slider>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/slider/basic-usage.vue b/examples/sites/demos/pc/app/slider/basic-usage.vue
index e908ac837..c96fc93b9 100644
--- a/examples/sites/demos/pc/app/slider/basic-usage.vue
+++ b/examples/sites/demos/pc/app/slider/basic-usage.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="setValue">设置值</tiny-button>
-    <tiny-slider v-model="value" ref="slider"></tiny-slider>
+    <tiny-slider v-model="value"></tiny-slider>
   </div>
 </template>
 
diff --git a/packages/renderless/src/slider/vue.ts b/packages/renderless/src/slider/vue.ts
index f431e5180..0b8d71fb6 100644
--- a/packages/renderless/src/slider/vue.ts
+++ b/packages/renderless/src/slider/vue.ts
@@ -165,7 +165,16 @@ export const renderless = (
     handleSlotInput: handleSlotInput(state)
   })
 
-  watch(() => props.modelValue, api.watchModelValue, { immediate: true })
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (props.max < props.min) {
+        throw new Error('Slider min should not be greater than max.')
+      }
+      api.watchModelValue(value)
+    },
+    { immediate: true }
+  )
   watch(() => state.activeValue, api.watchActiveValue, { immediate: true })
 
   watch(
diff --git a/packages/vue/src/slider/__tests__/slider.test.tsx b/packages/vue/src/slider/__tests__/slider.test.tsx
index 1c4d9c6e1..297f414f1 100644
--- a/packages/vue/src/slider/__tests__/slider.test.tsx
+++ b/packages/vue/src/slider/__tests__/slider.test.tsx
@@ -1,7 +1,7 @@
 import { mountPcMode } from '@opentiny-internal/vue-test-utils'
 import { describe, expect, test, vi } from 'vitest'
 import Slider from '@opentiny/vue-slider'
-import { nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
 
 let value = 40
 
@@ -18,9 +18,37 @@ describe('PC Mode', () => {
 
   test.todo('disabled 是否禁用')
 
-  test.todo('min 设置最小值。')
+  test('min 设置最小值。', async () => {
+    const value = ref(60)
+    mount(() => <Slider v-model={value.value} min={50} />)
 
-  test.todo('max 设置最大值。必需是整数，可以负数。必需大于所设置的最小值。')
+    await nextTick()
+    value.value = 40
+    await nextTick()
+    expect(value.value).toBe(50)
+    value.value = 120
+    await nextTick()
+    expect(value.value).toBe(100)
+  })
+
+  test('max 设置最大值。必需是整数，可以负数。必需大于所设置的最小值。', async () => {
+    const value = ref(60)
+
+    mount(() => <Slider v-model={value.value} min={-10} max={-5} />)
+
+    await nextTick()
+    expect(value.value).toBe(-5)
+  })
+
+  test('min 大于 max的时候报错', async () => {
+    try {
+      const value = ref(60)
+      mount(() => <Slider v-model={value.value} min={10} max={5} />)
+    } catch (error) {
+      expect(error).to.be.an('error')
+      expect(error.message).to.equal('Slider min should not be greater than max.')
+    }
+  })
 
   test.todo('step 设置滑块移动时，每步位移距离，必需是大于0的正整数。')
 
@@ -48,8 +76,7 @@ describe('PC Mode', () => {
         show-input={true}
         v-slots={{
           default: (slotScope) => <b class="onlyText">{slotScope.slotScope}%</b>
-        }}
-      ></Slider>
+        }}></Slider>
     ))
     expect(wrapper.find('.onlyText').text()).toBe(`${value}%`)
   })