fix(CountDown): should clear timer when deactivated (#4919)

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();
   },

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 () => {
+test('pause when destroyed', () => {
-  const pause = jest.fn();
+  const wrapper = mount(CountDown);
-  const wrapper = mount(CountDown, {
+  expect(wrapper.vm.counting).toBeTruthy();
-    mocks: {
+  wrapper.destroy();
-      pause
+  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();
 });