fix: correctly handle skipped animation

Author: setaman

src/App.vue

@@ -44,7 +44,10 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress :progress="progress" animation="bounce 3000 300" :legend-formatter="customFormatter"
+        <ve-progress :progress="progress" animation="default 0 0" :legend="120" :legend-formatter="({ currentValue }) => `Formatted: ${currentValue}`">
+        </ve-progress>
+
+<!--        <ve-progress :progress="progress" animation="bounce 3000 300" :legend-formatter="customFormatter"
                      :loading="loading">
           <template #legend>
             <span id="my-slot">Hello Circle</span>
@@ -68,7 +71,7 @@
               fill="transparent"
               :style="attrs.styles"
             />
-            <!--              <line
+            &lt;!&ndash;              <line
               ref="polygon"
               :stroke-dashoffset="attrs.strokeDashOffset / 4"
               :stroke-dasharray="lineLength"
@@ -80,7 +83,7 @@
               stroke="blue"
               stroke-width="4"
               fill="none"
-            />-->
+            />&ndash;&gt;
           </template>
           <template #legend>
             <span id="my-slot">Hello custom Circle</span>
@@ -173,7 +176,7 @@
           <template #legend>
             <span id="my-slot">Hello custom Circle</span>
           </template>
-        </ve-progress>
+        </ve-progress>-->
         <!--        <ve-progress
                   :progress="progress"
                   :determinate="determinate"

src/components/Circle/circleMixin.js

@@ -166,7 +166,7 @@ export default {
       circle.addEventListener("animationstart", this.toggleIsAnimationPlaying, false);
       circle.addEventListener("animationend", this.toggleIsAnimationPlaying, false);
     }
-    if (!this.options.loading) {
+    if (this.options.animation.delay && !this.options.loading) {
       // await initial delay before applying animations
       await wait(this.options.animation.delay);
     }

src/components/Counter.vue

@@ -134,7 +134,7 @@ export default {
     },
   },
   mounted() {
-    if (!this.loading) {
+    if (!this.loading && this.duration) {
       setTimeout(() => {
         this.raf = requestAnimationFrame(this.count);
       }, this.delay);

src/components/optionsParser.js

@@ -11,10 +11,12 @@ export const lineModeParser = (lineMode, multiple) => {
 
 export const animationParser = (animation) => {
   const animationConfig = animation.trim().split(" ");
+  const duration = isValidNumber(animationConfig[1]) ? parseFloat(animationConfig[1]) : 1000;
+  const delay = isValidNumber(animationConfig[2]) ? parseFloat(animationConfig[2]) : 400;
   return {
     type: animationConfig[0],
-    duration: isValidNumber(animationConfig[1]) ? parseFloat(animationConfig[1]) : 1000,
-    delay: isValidNumber(animationConfig[2]) ? parseFloat(animationConfig[2]) : 400,
+    duration: duration >= 0 ? duration : 0,
+    delay: delay >= 0 ? delay : 0,
   };
 };
 

tests/unit/container.spec.js

@@ -5,7 +5,7 @@ import CircleContainer from "@/components/Circle/CircleContainer.vue";
 import Counter from "@/components/Counter.vue";
 import { animationParser, dotParser, dashParser, lineModeParser, linePositionParser } from "@/components/optionsParser";
 import props from "@/components/interface";
-import { defaultCounterTick } from "@/../tests/helper";
+import { defaultCounterTick, wait } from "@/../tests/helper";
 import { nextTick } from "vue";
 
 const factory = (propsData, slots = {}) => {
@@ -251,14 +251,15 @@ describe("[ EllipseProgressContainer.vue ]", () => {
       };
       factory({ progress: 1, legendFormatter: formatter, animation: "default 0 0" });
     });
-    it("renders the custom formatted value", (done) => {
+    it("renders the custom formatted value", async () => {
       const customFormat = (value) => `Formatted: ${value}`;
       const formatter = ({ currentValue }) => customFormat(currentValue);
       const wrapper = factory({ legend: 120, legendFormatter: formatter, animation: "default 0 0" });
-      setTimeout(() => {
-        expect(wrapper.find(".ep-legend--value__counter").element.textContent).to.equal(customFormat(120));
-        done();
-      }, 100);
+
+      await wait(200);
+      await nextTick();
+
+      expect(wrapper.find(".ep-legend--value__counter").element.textContent).to.equal(customFormat(120));
     });
     it("isHTML returns false by default ", () => {
       expect(factory({ legendFormatter: () => "Custom" }).vm.isHTML).to.be.false;

tests/unit/counter.spec.js

@@ -2,6 +2,8 @@ import { expect } from "chai";
 import { mount } from "@vue/test-utils";
 import Counter from "@/components/Counter.vue";
 import VueEllipseProgress from "@/components/VueEllipseProgress.vue";
+import { nextTick } from "vue";
+import { wait } from "../helper";
 
 const factory = (propsData, slots) => {
   return mount(VueEllipseProgress, {
@@ -31,15 +33,17 @@ global.cancelAnimationFrame = (id) => clearTimeout(id);
 
 describe("[ Counter.vue ]", () => {
   describe("#value", async () => {
-    it("renders the final value correctly", (done) => {
+    it("renders the final value correctly", async () => {
       const counterWrapper = factory({
         legend: "50.00",
         animation: `default 0 0`,
       }).findComponent(Counter);
-      setTimeout(() => {
-        expect(counterWrapper.element.textContent).to.equal("50.00");
-      }, 100);
-      done();
+
+      // need to await RAF tick, tests is flaky
+      await wait(200);
+      await nextTick();
+
+      expect(counterWrapper.element.textContent).to.equal("50.00");
     });
 
     const values = [