chore(slider): fix story tests (#4464)

* chore(slider): fix story tests * fix: watch setter
epicmaxco · Jan 31, 2025 · bac09fd · bac09fd
1 parent c33a9f7
commit bac09fd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/packages/ui/src/components/va-slider/VaSlider.stories.ts b/packages/ui/src/components/va-slider/VaSlider.stories.ts
@@ -8,15 +8,15 @@ import { VaSlider } from './'
 
 function getSlider () {
   return {
-    slider: getStoryId('slider'),
+    slider: getStoryId('slider').querySelector('[role="slider"]') as HTMLElement,
     sliderTrack: getStorySelector('.va-slider__track'),
     sliderThumb: getStorySelector('.va-slider__handler'),
   }
 }
 
 function getSliderAll () {
   return {
-    slider: getStoryIdAll('slider'),
+    slider: [...getStoryIdAll('slider')].map((el) => el.querySelector('[role="slider"]') as HTMLElement),
     sliderTrack: getStorySelectorAll('.va-slider__track:not([class*=" "])'),
     sliderThumb: getStorySelectorAll('.va-slider__handler'),
   }

diff --git a/packages/ui/src/components/va-slider/VaSlider.vue b/packages/ui/src/components/va-slider/VaSlider.vue
@@ -670,7 +670,7 @@ const sliderAriaAttributes = (value: number, order: 0 | 1) => {
     role: 'slider',
     'aria-valuemin': minComputed.value,
     'aria-valuemax': maxComputed.value,
-    'aria-valuenow:': value,
+    'aria-valuenow': value,
     'aria-valuetext': String(value),
     'aria-label': props.range
       ? order === 0

diff --git a/packages/ui/src/utils/watch-setter.ts b/packages/ui/src/utils/watch-setter.ts
@@ -1,8 +1,5 @@
-import { ComputedRef, Ref } from 'vue'
-
-const isComputedRef = <T>(value: Ref<T>): value is ComputedRef<any> & { _setter: (v: T) => void} => {
-  return typeof value === 'object' && '_setter' in value
-}
+import { Ref } from 'vue'
+import { warn } from './console'
 
 // TODO: Maybe it is better to tweak useStateful
 /**
@@ -12,10 +9,20 @@ const isComputedRef = <T>(value: Ref<T>): value is ComputedRef<any> & { _setter:
  * @notice you likely want to watch when value is changed, not setter is called.
  */
 export const watchSetter = <T>(ref: Ref<T>, cb: (newValue: T) => void) => {
-  if (!isComputedRef(ref)) { return }
-  const originalSetter = ref._setter
+  let key: 'setter' | '_setter'
+
+  if ('_setter' in ref) {
+    key = '_setter' as const
+  } else if ('setter' in ref) {
+    key = 'setter' as const
+  } else {
+    warn('watchSetter', 'Ref does not have setter', ref)
+    return
+  }
+
+  const originalSetter = (ref as any)[key]
 
-  ref._setter = (newValue: T) => {
+  ;(ref as any)[key] = (newValue: T) => {
     cb(newValue)
     originalSetter(newValue)
   }