From b630b6b035381566d47ad1bf460c7a976d6e60d3 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 4 Nov 2019 20:32:39 +0800
Subject: [PATCH] fix(CountDown): should clear timer when deactivated (#4919)

---
 src/count-down/index.js           | 15 +++++++++++
 src/count-down/test/index.spec.js | 44 ++++++++++++++++++++++++++-----
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/count-down/index.js b/src/count-down/index.js
index 5b75b6817..b39ba03ff 100644
--- a/src/count-down/index.js
+++ b/src/count-down/index.js
@@ -44,6 +44,21 @@ export default createComponent({
     }
   },
 
+  activated() {
+    if (this.keepAlivePaused) {
+      this.counting = true;
+      this.keepAlivePaused = false;
+      this.tick();
+    }
+  },
+
+  deactivated() {
+    if (this.counting) {
+      this.pause();
+      this.keepAlivePaused = true;
+    }
+  },
+
   beforeDestroy() {
     this.pause();
   },
diff --git a/src/count-down/test/index.spec.js b/src/count-down/test/index.spec.js
index bef0f6058..28c3be1a3 100644
--- a/src/count-down/test/index.spec.js
+++ b/src/count-down/test/index.spec.js
@@ -1,6 +1,9 @@
+import Vue from 'vue';
 import CountDown from '..';
 import { mount, later } from '../../../test/utils';
 
+Vue.use(CountDown);
+
 test('macro task finish event', async () => {
   const wrapper = mount(CountDown, {
     propsData: {
@@ -150,15 +153,42 @@ test('incomplate format prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('pause when destroyed', async () => {
-  const pause = jest.fn();
-  const wrapper = mount(CountDown, {
-    mocks: {
-      pause
+test('pause when destroyed', () => {
+  const wrapper = mount(CountDown);
+  expect(wrapper.vm.counting).toBeTruthy();
+  wrapper.destroy();
+  expect(wrapper.vm.counting).toBeFalsy();
+});
+
+test('pause when deactivated', async () => {
+  const wrapper = mount({
+    template: `
+      <keep-alive>
+        <van-count-down v-if="render" ref="countDown" time="100" />
+      </keep-alive>
+    `,
+    data() {
+      return {
+        render: true
+      };
+    },
+    methods: {
+      getCountDown() {
+        return this.$refs.countDown;
+      }
     }
   });
 
-  wrapper.destroy();
+  const countDown = wrapper.vm.getCountDown();
+  expect(countDown.counting).toBeTruthy();
 
-  expect(wrapper.vm.counting).toBeFalsy();
+  wrapper.setData({ render: false });
+  expect(countDown.counting).toBeFalsy();
+  wrapper.setData({ render: true });
+  expect(countDown.counting).toBeTruthy();
+
+  countDown.pause();
+  wrapper.setData({ render: false });
+  wrapper.setData({ render: true });
+  expect(countDown.counting).toBeFalsy();
 });