fix: test

Author: xiaoyatong

src/packages/range/__test__/__snapshots__/range.spec.tsx.snap

@@ -41,8 +41,55 @@ exports[`range props test 1`] = `
 </div>
 `;
 
+exports[`range props test 2`] = `
+<div>
+  <div
+    class="nut-range-container test-range"
+  >
+    <div
+      class="min"
+    >
+      0
+    </div>
+    <div
+      class="nut-range"
+    >
+      <div
+        class="nut-range-bar"
+        style="width: 40%; left: 0%; transition: none;"
+      >
+        <div
+          class="nut-range-button-wrapper"
+        >
+          <div
+            class="nut-range-button"
+          >
+            <div
+              class="number"
+            >
+              40
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="max"
+    >
+      100
+    </div>
+  </div>
+</div>
+`;
+
 exports[`range test 1`] = `
 "<div><div class="nut-range-container"><div class="min">0</div><div class="nut-range"><div class="nut-range-bar" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left
                   "><div class="nut-range-button"><div class="number">30</div></div></div><div class="
                   nut-range-button-wrapper-right"><div class="nut-range-button"><div class="number">60</div></div></div></div></div><div class="max">100</div></div></div>"
 `;
+
+exports[`range test 2`] = `
+"<div><div class="nut-range-container"><div class="min">0</div><div class="nut-range"><div class="nut-range-bar" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left
+                  "><div class="nut-range-button"><div class="number">30</div></div></div><div class="
+                  nut-range-button-wrapper-right"><div class="nut-range-button"><div class="number">60</div></div></div></div></div><div class="max">100</div></div></div>"
+`;

src/packages/range/__test__/range.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import Range from '@/packages/range'
 
 test('range props test', () => {
@@ -160,3 +160,61 @@ test('desc test', () => {
   expect(container.querySelector('.max')?.innerHTML).toBe(state.maxDescription)
   expect(container.querySelector('.number')?.innerHTML).toBe('40%')
 })
+
+test('range click test', () => {
+  const { container } = render(
+    <Range defaultValue={40} style={{ color: 'red' }} />
+  )
+
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range click test', () => {
+  const state = {
+    value0: [30, 60],
+  }
+  const { container } = render(<Range range defaultValue={state.value0} />)
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range click disable test', () => {
+  const { container } = render(
+    <Range defaultValue={40} disabled style={{ color: 'red' }} />
+  )
+
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range click vertical test', () => {
+  const { container } = render(
+    <Range defaultValue={40} vertical style={{ color: 'red' }} />
+  )
+
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range touch test', () => {
+  const { container } = render(<Range defaultValue={40} />)
+
+  const track = container.querySelector('.nut-range-button')
+  const button = container.querySelector('.number')
+
+  if (track) {
+    fireEvent.touchStart(track, {
+      touches: [{ clientX: 0 }],
+    })
+    fireEvent.touchMove(track, {
+      touches: [{ clientX: 10 }],
+    })
+    fireEvent.touchEnd(track)
+    expect(button?.innerHTML).toBe('100')
+  }
+})

src/packages/range/range.taro.tsx

@@ -89,7 +89,7 @@ export const Range: FunctionComponent<
     finalValue: 0,
     onChange: handleChange,
   })
-  const [exactValue, setEaxctValue] = useState<RangeValue>(
+  const [exactValue, setExactValue] = useState<RangeValue>(
     () => value || defaultValue || 0
   )
   const marksRef = useRef<{ [key: string]: any }>({})
@@ -230,7 +230,7 @@ export const Range: FunctionComponent<
       total = rect.height
     }
     const value = min + (delta / total) * scope
-    setEaxctValue(current)
+    setExactValue(current)
     if (isRange(current)) {
       const [left, right] = current as any
       const middle = (left + right) / 2
@@ -248,7 +248,7 @@ export const Range: FunctionComponent<
       return
     }
     touch.start(event)
-    setEaxctValue(current)
+    setExactValue(current)
     if (isRange(current)) {
       setStartValue((current as number[]).map(format))
     } else {
@@ -283,7 +283,7 @@ export const Range: FunctionComponent<
     } else {
       newValue = startValue + diff
     }
-    setEaxctValue(newValue)
+    setExactValue(newValue)
     updateValue(newValue)
   }
   const onTouchEnd = () => {

src/packages/range/range.tsx

@@ -89,7 +89,7 @@ export const Range: FunctionComponent<
     finalValue: 0,
     onChange: handleChange,
   })
-  const [exactValue, setEaxctValue] = useState<RangeValue>(
+  const [exactValue, setExactValue] = useState<RangeValue>(
     () => value || defaultValue || 0
   )
   const marksRef = useRef<{ [key: string]: any }>({})
@@ -230,7 +230,7 @@ export const Range: FunctionComponent<
       total = rect.height
     }
     const value = min + (delta / total) * scope
-    setEaxctValue(current)
+    setExactValue(current)
     if (isRange(current)) {
       const [left, right] = current as any
       const middle = (left + right) / 2
@@ -248,7 +248,7 @@ export const Range: FunctionComponent<
       return
     }
     touch.start(event)
-    setEaxctValue(current)
+    setExactValue(current)
     if (isRange(current)) {
       setStartValue((current as number[]).map(format))
     } else {
@@ -283,7 +283,7 @@ export const Range: FunctionComponent<
     } else {
       newValue = startValue + diff
     }
-    setEaxctValue(newValue)
+    setExactValue(newValue)
     updateValue(newValue)
   }
   const onTouchEnd = () => {