fix(countdown): emit paused (jd-opensource#3062)

iCheng · May 8, 2024 · 731780c · 731780c
1 parent 0467755
commit 731780c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 30 deletions.
diff --git a/...VUE/countdown/__tests__/countdown.spec.ts → ...UE/countdown/__tests__/countdown.spec.tsx b/...VUE/countdown/__tests__/countdown.spec.ts → ...UE/countdown/__tests__/countdown.spec.tsx
@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils'
-import { nextTick, toRefs, reactive } from 'vue'
+import { nextTick, ref } from 'vue'
 import { Button, Countdown } from '@nutui/nutui'
 import { sleep } from '@/packages/utils/unit'
 
-test('endTime props', async () => {
+test('Countdown: endTime props', async () => {
   const wrapper = mount(Countdown, {
     props: {
       endTime: Date.now() + 1 * 50
@@ -14,7 +14,7 @@ test('endTime props', async () => {
   expect(wrapper.emitted('end')).toBeTruthy()
 })
 
-test('format props', async () => {
+test('Countdown: format props', async () => {
   const wrapper = mount(Countdown, {
     props: {
       endTime: Date.now() + 1 * 50,
@@ -55,28 +55,19 @@ test('format props', async () => {
   expect(wrapper.find('.nut-countdown__content').text() == '000毫秒').toBe(true)
 })
 
-test('paused props', async () => {
-  const wrapper = mount({
-    components: {
-      'nut-countdown': Countdown,
-      'nut-button': Button
-    },
-    template: `
-      <nut-countdown  :end-time="endTime" :paused="paused" />
-      <nut-button  @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
-    `,
-    setup() {
-      const state = reactive({
-        endTime: Date.now() + 1 * 50,
-        paused: false
-      })
-
-      const toggle = () => {
-        state.paused = !state.paused
-      }
-
-      return { ...toRefs(state), toggle }
-    }
+test('Countdown: paused props', async () => {
+  const paused = ref(false)
+  const endTime = ref(Date.now() + 1 * 50)
+  const toggle = () => {
+    paused.value = !paused.value
+  }
+  const wrapper = mount(() => {
+    return (
+      <>
+        <Countdown endTime={endTime.value} paused={paused.value} />
+        <Button onClick={toggle}>{paused.value ? 'start' : 'stop'}</Button>
+      </>
+    )
   })
 
   const button = wrapper.find('.nut-button')
@@ -88,7 +79,7 @@ test('paused props', async () => {
   expect(prevSnapShot === laterShapShot).toBeTruthy()
 })
 
-test('should render slot correctly', async () => {
+test('Countdown: should render slot correctly', async () => {
   const wrapper = mount(Countdown, {
     props: {
       endTime: Date.now() + 1 * 50
@@ -99,3 +90,63 @@ test('should render slot correctly', async () => {
   })
   expect(wrapper.text()).toEqual('slot content')
 })
+
+test('Countdown: should render slot correctly', async () => {
+  const wrapper = mount(Countdown, {
+    props: {
+      endTime: Date.now() + 1 * 50
+    },
+    slots: {
+      default: () => 'slot content'
+    }
+  })
+  expect(wrapper.text()).toEqual('slot content')
+})
+
+test('Countdown: ref methods', async () => {
+  const countdownRef = ref()
+  const start = () => {
+    countdownRef.value.start()
+  }
+  const pause = () => {
+    countdownRef.value.pause()
+  }
+  const reset = () => {
+    countdownRef.value.reset()
+  }
+  const restart = vi.fn()
+  const paused = vi.fn()
+  const wrapper = mount(() => {
+    return (
+      <>
+        <Countdown
+          ref={countdownRef}
+          time="20000"
+          autoStart={false}
+          format="ss:SS"
+          onRestart={restart}
+          onPaused={paused}
+        />
+        <Button class="start" onClick={start} />
+        <Button class="pause" onClick={pause} />
+        <Button class="reset" onClick={reset} />
+      </>
+    )
+  })
+  const countdown = wrapper.find('.nut-countdown__content')
+  expect(countdown.text()).toBe('20:00')
+
+  const btn1 = wrapper.find('.start')
+  btn1.trigger('click')
+  expect(restart).toBeCalledTimes(1)
+  expect(paused).toBeCalledTimes(0)
+
+  const btn2 = wrapper.find('.pause')
+  btn2.trigger('click')
+  expect(restart).toBeCalledTimes(1)
+  expect(paused).toBeCalledTimes(1)
+
+  const btn3 = wrapper.find('.pause')
+  btn3.trigger('click')
+  expect(countdown.text()).toBe('20:00')
+})
diff --git a/src/packages/__VUE/countdown/countdown.taro.vue b/src/packages/__VUE/countdown/countdown.taro.vue
@@ -105,8 +105,8 @@ const start = () => {
 const pause = () => {
   cancelAnimationFrame(timer.value!)
   counting.value = false
-  emit('restart', restTime.value)
-  emit('onRestart', restTime.value)
+  emit('paused', restTime.value)
+  emit('onPaused', restTime.value)
 }
 
 // 重置

diff --git a/src/packages/__VUE/countdown/countdown.vue b/src/packages/__VUE/countdown/countdown.vue
@@ -105,8 +105,8 @@ const start = () => {
 const pause = () => {
   cancelAnimationFrame(timer.value!)
   counting.value = false
-  emit('restart', restTime.value)
-  emit('onRestart', restTime.value)
+  emit('paused', restTime.value)
+  emit('onPaused', restTime.value)
 }
 
 // 重置