fix(RollingText): should restart rolling after calling reset when auto-start is true (#11991)

* fix(RollingText): should restart rolling after calling the reset method when auto-start prop is true

* test: update test case

packages/vant/src/rolling-text/RollingText.tsx

@@ -1,6 +1,13 @@
-import { ref, defineComponent, computed, type ExtractPropTypes } from 'vue';
+import {
+  ref,
+  defineComponent,
+  computed,
+  watch,
+  type ExtractPropTypes,
+} from 'vue';
 
 // Utils
+import { raf } from '@vant/use';
 import {
   createNamespace,
   makeArrayProp,
@@ -98,16 +105,29 @@ export default defineComponent({
       return 0.2 * (len - 1 - i);
     };
 
-    const isStart = ref(false);
+    const rolling = ref(props.autoStart);
 
     const start = () => {
-      isStart.value = true;
+      rolling.value = true;
     };
 
     const reset = () => {
-      isStart.value = false;
+      rolling.value = false;
+
+      if (props.autoStart) {
+        raf(() => start());
+      }
     };
 
+    watch(
+      () => props.autoStart,
+      (value) => {
+        if (value) {
+          start();
+        }
+      }
+    );
+
     useExpose<RollingTextExpose>({
       start,
       reset,
@@ -122,7 +142,7 @@ export default defineComponent({
             }
             duration={props.duration}
             direction={props.direction}
-            isStart={props.autoStart || isStart.value}
+            isStart={rolling.value}
             delay={getDelay(i, targetNumArr.value.length)}
           />
         ))}

packages/vant/src/rolling-text/test/index.spec.ts

@@ -1,13 +1,97 @@
-import { RollingText } from '..';
+import { RollingText, type RollingTextInstance } from '..';
-import { mount } from '../../../test';
+import { later, mount } from '../../../test';
+
+const itemWrapperClass = '.van-roll-single-down__box';
+const animationClass = 'van-roll-single-down__ani';
 
 test('should render comp', () => {
   const wrapper = mount(RollingText, {
     props: {
-      'start-num': 0,
+      startNum: 0,
-      'target-num': 123,
+      targetNum: 123,
     },
   });
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should start rolling when auto-start prop is true', async () => {
+  const wrapper = mount(RollingText, {
+    props: {
+      startNum: 0,
+      targetNum: 123,
+      autoStart: true,
+    },
+  });
+
+  expect(wrapper.find(itemWrapperClass).classes()).toContain(animationClass);
+});
+
+test('should not start rolling when auto-start prop is false', async () => {
+  const wrapper = mount(RollingText, {
+    props: {
+      startNum: 0,
+      targetNum: 123,
+      autoStart: false,
+    },
+  });
+
+  expect(wrapper.find(itemWrapperClass).classes()).not.toContain(
+    animationClass
+  );
+});
+
+test('should start rolling after calling the start method', async () => {
+  const wrapper = mount<RollingTextInstance>(RollingText, {
+    props: {
+      startNum: 0,
+      targetNum: 123,
+      autoStart: false,
+    },
+  });
+  const instance = wrapper.vm;
+
+  instance.start();
+  await later();
+  expect(wrapper.find(itemWrapperClass).classes()).toContain(animationClass);
+});
+
+test('should reset the animation after calling the reset method', async () => {
+  const wrapper = mount<RollingTextInstance>(RollingText, {
+    props: {
+      startNum: 0,
+      targetNum: 123,
+      autoStart: false,
+    },
+  });
+  const instance = wrapper.vm;
+
+  instance.start();
+  await later();
+  expect(wrapper.find(itemWrapperClass).classes()).toContain(animationClass);
+
+  instance.reset();
+  await later();
+  expect(wrapper.find(itemWrapperClass).classes()).not.toContain(
+    animationClass
+  );
+});
+
+test('should restart rolling after calling the reset method when auto-start prop is true', async () => {
+  const wrapper = mount<RollingTextInstance>(RollingText, {
+    props: {
+      startNum: 0,
+      targetNum: 123,
+      autoStart: true,
+    },
+  });
+  const instance = wrapper.vm;
+
+  instance.reset();
+  await later();
+  expect(wrapper.find(itemWrapperClass).classes()).not.toContain(
+    animationClass
+  );
+  await later(50);
+  expect(wrapper.find(itemWrapperClass).classes()).toContain(animationClass);
+});