fix(rate): improve test & code

packages/rate/__tests__/rate.spec.ts

@@ -8,25 +8,23 @@ describe('Rate.vue', () => {
         max: 10,
       },
     })
-    const vm = wrapper.vm
-    const stars = vm.$el.querySelectorAll('.el-rate__item')
+    const stars = wrapper.findAll('.el-rate__item')
     expect(stars.length).toEqual(10)
   })
 
   test('with texts', () => {
-    const vm = mount(Rate, {
+    const wrapper = mount(Rate, {
       props: {
         showText: true,
         modelValue: 4,
         texts: ['1', '2', '3', '4', '5'],
       },
-    }).vm
-
-    const text = vm.$el.querySelector('.el-rate__text')
+    })
+    const text = wrapper.find('.el-rate__text').element
     expect(text.textContent).toEqual('4')
   })
 
-  test('value change', async done => {
+  test('value change', async () => {
     const wrapper = mount(Rate, {
       props: {
         modelValue: 0,
@@ -35,11 +33,10 @@ describe('Rate.vue', () => {
     const vm = wrapper.vm
     await wrapper.setProps({ modelValue: 3 })
     expect(vm.modelValue).toEqual(3)
-    done()
   })
 
   test('click', () => {
-    const vm = mount({
+    const wrapper = mount({
       template: `
         <div>
           <el-rate v-model="value1" />
@@ -57,9 +54,9 @@ describe('Rate.vue', () => {
     }, {
       props: {
       },
-    }).vm
-
-    const thirdStar = vm.$el.querySelectorAll('.el-rate__item')[2]
+    })
+    const vm = wrapper.vm
+    const thirdStar = wrapper.findAll('.el-rate__item')[2].element as HTMLElement
 
     thirdStar.click()
     expect(vm.value1).toEqual(3)

packages/rate/doc/basic.vue

@@ -19,12 +19,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 const basic = defineComponent({
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   data() {
     return {
+      value: null,
       value1: null,
       value2: null,
-      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
     }
   },
 })

packages/rate/src/index.vue

@@ -116,7 +116,7 @@ export default defineComponent({
     },
     texts: {
       type: Array as PropType<string[]>,
-      default: () => ['极差', '失望', '一般', '满意', '惊喜'],
+      default: () => ['Extremely bad','Disappointed','Fair','Satisfied','Surprise'],
     },
     scoreTemplate: {
       type: String,
@@ -125,16 +125,11 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
-    // inject
-    const elForm = inject<ElForm>('elForm')
-
-    // data
     const currentValue = ref(props.modelValue)
-    const pointerAtLeftHalf = ref(true)
-    const hoverIndex = ref(-1)
 
-    // computed
+    const elForm = inject<ElForm>('elForm')
     const rateDisabled = computed(() => props.disabled || (elForm || {}).disabled)
+
     const text = computed(() => {
       let result = ''
       if (props.showScore) {
@@ -150,6 +145,17 @@ export default defineComponent({
       return result
     })
 
+    function getValueFromMap(value: unknown, map: Record<string, unknown>) {
+      const matchedKeys = Object.keys(map)
+        .filter(key => {
+          const val = map[key]
+          const excluded = isObject(val) ? val.excluded : false
+          return excluded ? value < key : value <= key
+        })
+        .sort((a: never, b: never) => a - b)
+      const matchedValue = map[matchedKeys[0]]
+      return isObject(matchedValue) ? matchedValue.value : (matchedValue || '')
+    }
     const valueDecimal = computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100)
     const colorMap = computed(() => isArray(props.colors)
       ? {
@@ -182,50 +188,23 @@ export default defineComponent({
     const decimalIconClass = computed(() => getValueFromMap(props.modelValue, classMap.value))
     const voidClass = computed(() => rateDisabled.value ? props.disabledVoidIconClass : props.voidIconClass)
     const activeClass = computed(() => getValueFromMap(currentValue.value, classMap.value))
-
     const classes = computed(() => {
-      let result = []
-      let i = 0
+      let result = Array(props.max)
       let threshold = currentValue.value
       if (props.allowHalf && currentValue.value !== Math.floor(currentValue.value)) {
         threshold--
       }
-      for (; i < threshold; i++) {
-        result.push(activeClass.value)
-      }
-      for (; i < props.max; i++) {
-        result.push(voidClass.value)
-      }
+      result.fill(activeClass.value, 0, threshold)
+      result.fill(voidClass.value, threshold, props.max)
       return result
     })
 
-    // watch
+    const pointerAtLeftHalf = ref(true)
     watch(() => props.modelValue, val => {
       currentValue.value = val
       pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue)
     })
 
-    // methods
-    // function getMigratingConfig() {
-    //   return {
-    //     props: {
-    //       'text-template': 'text-template is renamed to score-template.',
-    //     },
-    //   }
-    // }
-
-    function getValueFromMap(value: unknown, map: Record<string, unknown>) {
-      const matchedKeys = Object.keys(map)
-        .filter(key => {
-          const val = map[key]
-          const excluded = isObject(val) ? val.excluded : false
-          return excluded ? value < key : value <= key
-        })
-        .sort((a: never, b: never) => a - b)
-      const matchedValue = map[matchedKeys[0]]
-      return isObject(matchedValue) ? matchedValue.value : (matchedValue || '')
-    }
-
     function showDecimalIcon(item: number) {
       let showWhenDisabled = rateDisabled.value && valueDecimal.value > 0 && item - 1 < props.modelValue && item > props.modelValue
       /* istanbul ignore next */
@@ -286,6 +265,7 @@ export default defineComponent({
       return _currentValue
     }
 
+    const hoverIndex = ref(-1)
     function setCurrentValue(value: number, event: MouseEvent) {
       if (rateDisabled.value) {
         return