{
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,
};
};
diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js
index cf0c203..56b75b4 100644
--- a/tests/unit/container.spec.js
+++ b/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 "../helper";
import { nextTick } from "vue";
const factory = (propsData, slots = {}) => {
@@ -131,22 +131,19 @@ describe("[ EllipseProgressContainer.vue ]", () => {
expect(spanWrapper.classes()).to.include("applied-class");
});
});
- // FIXME: throws "TypeError: Cannot convert undefined or null to object" for some unknown reason
- /*describe("#slots", () => {
+ describe("#slots", () => {
describe("#legend", () => {
it("renders provided slot content", () => {
const wrapper = mount(VueEllipseProgress, {
props: { progress: 50 },
slots: {
- legend: `
- Hello Circle
- `,
+ legend: `
Hello Circle`,
},
});
expect(wrapper.find("#my-slot").exists()).to.be.true;
});
});
- /!*describe("#legend-caption", () => {
+ describe("#legend-caption", () => {
it("renders provided slot content", () => {
const wrapper = mount(VueEllipseProgress, {
props: { progress: 50 },
@@ -176,8 +173,32 @@ describe("[ EllipseProgressContainer.vue ]", () => {
done();
}, 100);
});
- });*!/
- });*/
+ });
+ describe("#circle-progress", () => {
+ const wrapper = mount(VueEllipseProgress, {
+ props: { progress: 35 },
+ slots: {
+ "circle-progress": `
+
+
+ `,
+ },
+ });
+
+ it("renders provided slot", () => expect(wrapper.find("polygon").exists()).to.be.true);
+
+ it("replaces default progress circle", () => {
+ expect(wrapper.find(".ep-circle--progress").exists()).to.be.false;
+ });
+ });
+ });
describe("#data", () => {
const data = [
{ progress: 25, color: "red" },
@@ -230,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;
diff --git a/tests/unit/counter.spec.js b/tests/unit/counter.spec.js
index d795b8a..6b77fb0 100644
--- a/tests/unit/counter.spec.js
+++ b/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 = [