fix: improve passed counter props to formatter

Author: setaman

src/components/VueEllipseProgress.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { getNumberIfValid, isValidNumber } from "../utils";
+import { getNumberIfValid, isValidNumber, defaultCounterTick } from "../utils";
 import props from "./interface";
 import CircleContainer from "./Circle/CircleContainer.vue";
 import Counter from "./Counter.vue";
@@ -62,7 +62,7 @@ export default {
       return this.data.length > 1;
     },
     isHTML() {
-      return /<[a-z/][\s\S]*>/i.test((this.legendFormatter({}) || "").toString().trim());
+      return /<[a-z/][\s\S]*>/i.test((this.legendFormatter(defaultCounterTick) || "").toString().trim());
     },
     circlesData() {
       if (this.isMultiple) {

src/utils.js

@@ -7,4 +7,20 @@ const getNumberIfValid = (prop) => {
   return false;
 };
 
+export const defaultCounterTick = {
+  currentValue: 0,
+  countProgress: 0,
+  currentFormattedValue: "0",
+  currentRawValue: 0,
+  duration: 0,
+  previousCountStepValue: 0,
+  start: 0,
+  end: 0,
+  difference: 0,
+  currentDifference: 0,
+  oneStepDifference: 0,
+  startTime: 0,
+  elapsed: 0,
+};
+
 export { getNumberIfValid, isValidNumber };

tests/helper.js

@@ -87,6 +87,22 @@ const mockProps = {
 };
 mockProps.loader = mockProps;
 
+export const defaultCounterTick = {
+  currentValue: 0,
+  countProgress: 0,
+  currentFormattedValue: "0",
+  currentRawValue: 0,
+  duration: 0,
+  previousCountStepValue: 0,
+  start: 0,
+  end: 0,
+  difference: 0,
+  currentDifference: 0,
+  oneStepDifference: 0,
+  startTime: 0,
+  elapsed: 0,
+};
+
 export { mockProps };
 
 export const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => resolve(), ms));

tests/unit/container.spec.js

@@ -5,6 +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";
 
 const factory = (propsData, slots = {}) => {
   return mount(VueEllipseProgress, {
@@ -193,12 +194,13 @@ describe("[ EllipseProgressContainer.vue ]", () => {
         expect(counterTickData).to.be.an("object");
         return "Nice!";
       };
-      factory({ legend: 120, legendFormatter: formatter, animation: "default 0 0" });
+      factory({ legendFormatter: formatter, animation: "default 0 0" });
     });
     it("passes at least progress and currentValue properties to #legendFormatter", () => {
       const formatter = (counterTick) => {
-        expect(counterTick.currentValue).to.be.a("number");
-        // expect(counterTick.progress).to.be.a("number");
+        for (const prop in defaultCounterTick) {
+          expect(counterTick).to.have.a.property(prop);
+        }
         return "Nice!";
       };
       factory({ progress: 1, legendFormatter: formatter, animation: "default 0 0" });