From a6b0d3d97b56cc92edd3209c86f55c2767ca02fb Mon Sep 17 00:00:00 2001
From: NikitaKA <nikita.ak.85@gmail.com>
Date: Sun, 5 Sep 2021 23:46:45 +0300
Subject: [PATCH] Add optional start value property

---
 src/AnimatedNumber.vue            | 13 +++++++++--
 src/App.vue                       | 12 ++++++++++
 tests/unit/AnimatedNumber.spec.js | 38 +++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/AnimatedNumber.vue b/src/AnimatedNumber.vue
index 269f920..ebd4362 100644
--- a/src/AnimatedNumber.vue
+++ b/src/AnimatedNumber.vue
@@ -11,6 +11,10 @@ export default {
       default: '0',
       required: true,
     },
+    start: {
+      type: [Number, String],
+      default: '0',
+    },
     formatValue: {
       type: Function,
       default: value => value,
@@ -38,13 +42,18 @@ export default {
   data() {
     return {
       animatedValue: 0,
+      fromValue: 0,
     };
   },
+  created() {
+    this.fromValue = this.start;
+  },
   mounted() {
     this.animateValue(this.value);
   },
   watch: {
-    value(value) {
+    value(value, prev) {
+      this.fromValue = prev;
       this.animateValue(value);
     },
   },
@@ -62,7 +71,7 @@ export default {
       } = this;
       anime({
         targets: this,
-        animatedValue: value,
+        animatedValue: [this.fromValue, value],
         duration,
         easing,
         update,
diff --git a/src/App.vue b/src/App.vue
index 06e6cec..5539610 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,19 +4,26 @@
       <label for="">Value: </label>
       <input type="number" v-model="value">
     </div>
+    <div>
+      <label for="">Start value: </label>
+      <input type="number" v-model="start">
+    </div>
     <div>
       <label for="">Duration of animation: </label>
       <input type="number" v-model="duration">
     </div>
     <animated-number
       :value="value"
+      :start="start"
       :formatValue="formatToPrice"
       :duration="duration"
       :run="run"
+      :key="key"
     />
     <hr>
     <button @click="increase">Increase 500</button>
     <button @click="decrease">Decrease 500</button>
+    <button @click="apply">Apply start value</button>
   </div>
 </template>
 <script>
@@ -29,8 +36,10 @@ export default {
   data() {
     return {
       value: 399,
+      start: 0,
       duration: 1000,
       i: 0,
+      key: 0,
     };
   },
   methods: {
@@ -43,6 +52,9 @@ export default {
     decrease() {
       this.value = Number(this.value) - 500;
     },
+    apply() {
+      this.key = this.key + 1;
+    },
     begin(anim) {
       console.log(anim.progress);
     },
diff --git a/tests/unit/AnimatedNumber.spec.js b/tests/unit/AnimatedNumber.spec.js
index f9c61ba..14d0405 100644
--- a/tests/unit/AnimatedNumber.spec.js
+++ b/tests/unit/AnimatedNumber.spec.js
@@ -36,6 +36,44 @@ describe('AnimatedNumber.vue', () => {
     }, durationOfAnimation + 100);
   });
 
+  it('should start animation with initial value: integer', (done) => {
+    const start = 15;
+    wrapper = shallow(AnimatedNumber, {
+      propsData: {
+        value,
+        start,
+      },
+    });
+
+    setTimeout(() => {
+      expect(wrapper.text()).toBe(start.toString());
+    }, 0);
+
+    setTimeout(() => {
+      expect(wrapper.text()).toBe(value.toString());
+      done();
+    }, durationOfAnimation + 100);
+  });
+
+  it('should start animation with initial value: float', (done) => {
+    const start = 15.14;
+    wrapper = shallow(AnimatedNumber, {
+      propsData: {
+        value,
+        start,
+      },
+    });
+
+    setTimeout(() => {
+      expect(wrapper.text()).toBe(start.toString());
+    }, 0);
+
+    setTimeout(() => {
+      expect(wrapper.text()).toBe(value.toString());
+      done();
+    }, durationOfAnimation + 100);
+  });
+
   it('respect the time of the delay', (done) => {
     const delay = 50;
     durationOfAnimation = 10;