From c28fc3e7c5cabeb02369fdee383e7a7273620fc7 Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Sat, 21 Mar 2020 19:34:42 +0100 Subject: [PATCH 01/46] test: prepare tests for v1.0.0 --- tests/unit/.eslintrc.js | 5 + tests/unit/circle.spec.js | 838 --------------------- tests/unit/circle/circle-animation.spec.js | 116 +++ tests/unit/circle/circle-colors.spec.js | 183 +++++ tests/unit/circle/circle-line.spec.js | 335 ++++++++ tests/unit/circle/circle.spec.js | 198 +++++ tests/unit/container.spec.js | 22 +- 7 files changed, 852 insertions(+), 845 deletions(-) delete mode 100644 tests/unit/circle.spec.js create mode 100644 tests/unit/circle/circle-animation.spec.js create mode 100644 tests/unit/circle/circle-colors.spec.js create mode 100644 tests/unit/circle/circle-line.spec.js create mode 100644 tests/unit/circle/circle.spec.js diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js index bf3479f..eccf653 100644 --- a/tests/unit/.eslintrc.js +++ b/tests/unit/.eslintrc.js @@ -1,5 +1,10 @@ module.exports = { env: { mocha: true + }, + rules: { + "no-unused-expressions": 0, + "no-multi-assign": 0, + "no-unused-vars": 1, } }; diff --git a/tests/unit/circle.spec.js b/tests/unit/circle.spec.js deleted file mode 100644 index b25b1cc..0000000 --- a/tests/unit/circle.spec.js +++ /dev/null @@ -1,838 +0,0 @@ -import { expect } from "chai"; -import { mount } from "@vue/test-utils"; -import Container from "../../src/components/VueEllipseProgress.vue"; -import Circle from "../../src/components/Circle/CircleProgress.vue"; -import HalfCircle from "../../src/components/Circle/HalfCircleProgress.vue"; -import Gradient from "../../src/components/Gradient.vue"; - -const wait = (ms = 400) => new Promise(resolve => setTimeout(() => resolve(), ms)); - -const factory = propsData => { - return mount(Container, { - propsData: { - ...propsData - }, - stubs: { - CountUp: true - } - }); -}; - -describe("[ CircleProgress.vue ]", () => { - describe("#progress", () => { - it("calculates the progress circle stroke offset correctly", () => { - const progress = 60; - const size = 200; - const thickness = 4; - - const wrapper = factory({ - size, - progress, - thickness, - emptyThickness: thickness, - animation: { - type: "default", - duration: 10, - delay: 10 - } - }); - - const radius = size / 2 - thickness / 2; - const circumference = radius * 2 * Math.PI; - const expectedOffset = circumference - (progress / 100) * circumference; - - const circleWrapper = wrapper.find(Circle); - - expect(circleWrapper.vm.progressOffset).to.equal(expectedOffset); - }); - }); - describe("#thickness", () => { - it("renders the progress circle line stroke thickness correctly", () => { - const progress = 60; - const thickness = 4; - - const wrapper = factory({ - progress, - thickness - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - - expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${thickness}`); - }); - it("renders and calculates the progress circle line stroke relative thickness correctly", () => { - const progress = 60; - const size = 200; - const thickness = "5%"; - const relativeThickness = (parseInt(thickness, 10) * size) / 100; - - const wrapper = factory({ - progress, - thickness - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - - expect(circleWrapper.vm.thickness).to.equal(relativeThickness); - expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`); - }); - }); - describe("#emptyTthickness", () => { - it("renders the empty circle line stroke thickness correctly", () => { - const progress = 60; - const emptyThickness = 4; - - const wrapper = factory({ - progress, - emptyThickness - }); - const circleWrapper = wrapper.find(Circle); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${emptyThickness}`); - }); - it("renders and calculates the empty circle line stroke relative thickness correctly", () => { - const progress = 60; - const size = 200; - const emptyThickness = "5%"; - const relativeThickness = (parseInt(emptyThickness, 10) * size) / 100; - - const wrapper = factory({ - progress, - emptyThickness - }); - const circleWrapper = wrapper.find(Circle); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - expect(circleWrapper.vm.emptyThickness).to.equal(relativeThickness); - expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`); - }); - }); - describe("#size", () => { - it("calculates and sets the position of the circles correctly", () => { - const progress = 60; - const size = 200; - const position = 200 / 2; - - const wrapper = factory({ - progress, - size - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - expect(circleWrapper.vm.position).to.equal(position); - - expect(circleProgressWrapper.element.getAttribute("cx")).to.equal(`${position}`); - expect(circleProgressWrapper.element.getAttribute("cy")).to.equal(`${position}`); - - expect(circleEmptyWrapper.element.getAttribute("cx")).to.equal(`${position}`); - expect(circleEmptyWrapper.element.getAttribute("cy")).to.equal(`${position}`); - }); - it("calculates the circumference of the progress circles correctly", () => { - const progress = 60; - const size = 200; - const thickness = 4; - const radius = size / 2 - thickness / 2; - const circumference = radius * 2 * Math.PI; - - const wrapper = factory({ - size, - progress, - thickness, - emptyThickness: thickness - }); - const circleWrapper = wrapper.find(Circle); - expect(circleWrapper.vm.circumference).to.equal(circumference); - }); - }); - describe("#line", () => { - it("renders line type correctly", () => { - const progress = 60; - let line = "round"; - - const wrapper = factory({ - progress, - line - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`); - - line = "square"; - wrapper.setProps({ line }); - expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`); - - line = "butt"; - wrapper.setProps({ line }); - expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`); - }); - }); - describe("#lineMode", () => { - describe("#lineMode.mode", () => { - const progress = 50; - const size = 200; - const baseRadius = 200 / 2; - - describe("#lineMode.mode.normal", () => { - let thickness = 20; - let emptyThickness = 10; - const wrapper = factory({ - progress, - thickness, - emptyThickness, - lineMode: { - mode: "normal", - offset: 0 - }, - size - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => { - it("in case #thickness >= #emptyThickness", () => { - let expectedProgressCircleRadius = baseRadius - thickness / 2; - let expectedEmptyCircleRadius = expectedProgressCircleRadius; - let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - - thickness = emptyThickness = 10; - - wrapper.setProps({ thickness, emptyThickness }); - - expectedProgressCircleRadius = baseRadius - thickness / 2; - expectedEmptyCircleRadius = expectedProgressCircleRadius; - progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - it("in case #thickness >= #emptyThickness and #lineMode.offset", () => { - const offset = 10; // must be ignored in this mode - wrapper.setProps({ lineMode: { mode: "normal", offset } }); - let expectedProgressCircleRadius = baseRadius - thickness / 2; - let expectedEmptyCircleRadius = expectedProgressCircleRadius; - let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - - thickness = emptyThickness = 10; - - wrapper.setProps({ thickness, emptyThickness }); - - expectedProgressCircleRadius = baseRadius - thickness / 2; - expectedEmptyCircleRadius = expectedProgressCircleRadius; - progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - it("in case #thickness < #emptyThickness", () => { - thickness = 10; - emptyThickness = 20; - - wrapper.setProps({ thickness, emptyThickness }); - - const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; - const expectedProgressCircleRadius = expectedEmptyCircleRadius; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - it("in case #thickness < #emptyThickness and #lineMode.offset", () => { - const offset = 10; // must be ignored in this mode - wrapper.setProps({ lineMode: { mode: "normal", offset } }); - thickness = 10; - emptyThickness = 20; - - wrapper.setProps({ thickness, emptyThickness, lineMode: { mode: "normal", offset } }); - - const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; - const expectedProgressCircleRadius = expectedEmptyCircleRadius; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - }); - }); - describe("#lineMode.mode.in", () => { - const offset = 10; - const thickness = 20; - const emptyThickness = 10; - const wrapper = factory({ - progress, - thickness, - emptyThickness, - lineMode: { - mode: "in", - offset - }, - size - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - it("circles does not exceed the size and aligns properly in relation to each other", () => { - const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; - const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 - thickness / 2 - offset; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - }); - describe("#lineMode.mode.in-over", () => { - const offset = 10; // must be ignored in this mode - const thickness = 20; - const emptyThickness = 10; - const wrapper = factory({ - progress, - thickness, - emptyThickness, - lineMode: { - mode: "in-over", - offset - }, - size - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - it("circles does not exceed the size and aligns properly in relation to each other", () => { - const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; - const expectedProgressCircleRadius = baseRadius - thickness / 2; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - }); - describe("#lineMode.mode.out", () => { - const offset = 10; - const thickness = 10; - const emptyThickness = 10; - const wrapper = factory({ - progress, - thickness, - emptyThickness, - lineMode: { - mode: "out", - offset - }, - size - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - it("circles does not exceed the size and aligns properly in relation to each other", () => { - const expectedProgressCircleRadius = baseRadius - emptyThickness / 2; - const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2 - thickness / 2 - offset; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - }); - describe("#lineMode.mode.out-over", () => { - const offset = 10; // must be ignored in this mode - let thickness = 20; - let emptyThickness = 10; - const wrapper = factory({ - progress, - thickness, - emptyThickness, - lineMode: { - mode: "out-over", - offset - }, - size - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => { - it("in case #thickness >= #emptyThickness", () => { - let expectedProgressCircleRadius = baseRadius - thickness / 2; - let expectedEmptyCircleRadius = expectedProgressCircleRadius - thickness / 2 + emptyThickness / 2; - let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - - thickness = emptyThickness = 10; - - wrapper.setProps({ thickness, emptyThickness }); - - expectedProgressCircleRadius = baseRadius - thickness / 2; - expectedEmptyCircleRadius = expectedProgressCircleRadius; - progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - it("in case #thickness < #emptyThickness", () => { - thickness = 10; - emptyThickness = 20; - - wrapper.setProps({ thickness, emptyThickness }); - - const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; - const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 + thickness / 2; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - }); - }); - describe("#lineMode.mode.top", () => { - const offset = 10; // must be ignored in this mode - const thickness = 20; - const emptyThickness = 20; - const wrapper = factory({ - progress, - thickness, - emptyThickness, - lineMode: { - mode: "top", - offset - }, - size - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - it("circles does not exceed the size and aligns properly in relation to each other", () => { - const expectedProgressCircleRadius = baseRadius - thickness / 2; - const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - }); - describe("#lineMode.mode.bottom", () => { - const offset = 10; // must be ignored in this mode - let thickness = 40; - let emptyThickness = 10; - const wrapper = factory({ - progress, - thickness, - emptyThickness, - lineMode: { - mode: "bottom", - offset - }, - size - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => { - it("in case #thickness * 2 > #emptyThickness", () => { - const expectedProgressCircleRadius = baseRadius - thickness / 2; - const expectedEmptyCircleRadius = expectedProgressCircleRadius + emptyThickness / 2; - const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - it("in case #thickness * 2 <= #emptyThickness", () => { - thickness = 10; - emptyThickness = 20; - - wrapper.setProps({ thickness, emptyThickness }); - - let expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; - let expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2; - let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - - thickness = emptyThickness = 20; - - wrapper.setProps({ thickness, emptyThickness }); - - expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; - expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2; - progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); - emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); - expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); - expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); - }); - }); - }); - }); - }); - describe("#color", () => { - const color = "#3f79ff"; - const wrapper = factory({ - progress: 50, - color - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - - it("applies color correctly", () => { - expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`${color}`); - }); - it("applies gradient color correctly", () => { - const gradientColor = { - gradient: { - radial: false, - colors: [ - { - color: "red", - offset: 0, - opacity: 1 - }, - { - color: "blue", - offset: 0, - opacity: 1 - } - ] - } - }; - wrapper.setProps({ - color: gradientColor - }); - const gradientWrapper = wrapper.find(Gradient); - expect(wrapper.contains(Gradient)).to.be.true; - expect(gradientWrapper.contains("linearGradient")).to.be.true; - const linearGradientWrapper = gradientWrapper.find("linearGradient"); - expect(linearGradientWrapper.findAll("stop").length).to.equal(gradientColor.gradient.colors.length); - }); - }); - describe("#colorFill", () => { - const colorFill = "#3f79ff"; - const wrapper = factory({ - progress: 50, - colorFill - }); - - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - - it("applies color correctly", () => { - expect(circleProgressWrapper.element.getAttribute("fill")).to.equal(`${colorFill}`); - }); - it("applies gradient fill color correctly", () => { - const gradientColorFill = { - gradient: { - radial: true, - colors: [ - { - color: "red", - offset: 0, - opacity: 1 - }, - { - color: "blue", - offset: 0, - opacity: 1 - } - ] - } - }; - wrapper.setProps({ - colorFill: gradientColorFill - }); - const gradientWrapper = wrapper.find(Gradient); - expect(wrapper.contains(Gradient)).to.be.true; - expect(gradientWrapper.contains("radialGradient")).to.be.true; - const radialGradientWrapper = gradientWrapper.find("radialGradient"); - expect(radialGradientWrapper.findAll("stop").length).to.equal(gradientColorFill.gradient.colors.length); - }); - }); - describe("#emptyColor", () => { - const emptyColor = "#3f79ff"; - const wrapper = factory({ - progress: 50, - emptyColor - }); - - const circleWrapper = wrapper.find(Circle); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - it("applies empty color correctly", () => { - expect(circleEmptyWrapper.element.getAttribute("stroke")).to.equal(`${emptyColor}`); - }); - it("applies empty gradient color correctly", () => { - const emptyGradientColor = { - gradient: { - radial: false, - colors: [ - { - color: "red", - offset: 0, - opacity: 1 - }, - { - color: "blue", - offset: 0, - opacity: 1 - } - ] - } - }; - wrapper.setProps({ - emptyColor: emptyGradientColor - }); - const gradientWrapper = wrapper.find(Gradient); - expect(wrapper.contains(Gradient)).to.be.true; - expect(gradientWrapper.contains("linearGradient")).to.be.true; - const linearGradientWrapper = gradientWrapper.find("linearGradient"); - expect(linearGradientWrapper.findAll("stop").length).to.equal(emptyGradientColor.gradient.colors.length); - }); - }); - describe("#emptyColorFill", () => { - const emptyColorFill = "#3f79ff"; - const wrapper = factory({ - progress: 50, - emptyColorFill - }); - - const circleWrapper = wrapper.find(Circle); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - it("applies empty color correctly", () => { - expect(circleEmptyWrapper.element.getAttribute("fill")).to.equal(`${emptyColorFill}`); - }); - it("applies empty gradient fill color correctly", () => { - const emptyGradientColorFill = { - gradient: { - radial: true, - colors: [ - { - color: "red", - offset: 0, - opacity: 1 - }, - { - color: "blue", - offset: 0, - opacity: 1 - } - ] - } - }; - wrapper.setProps({ - emptyColorFill: emptyGradientColorFill - }); - const gradientWrapper = wrapper.find(Gradient); - expect(wrapper.contains(Gradient)).to.be.true; - expect(gradientWrapper.contains("radialGradient")).to.be.true; - const radialGradientWrapper = gradientWrapper.find("radialGradient"); - expect(radialGradientWrapper.findAll("stop").length).to.equal(emptyGradientColorFill.gradient.colors.length); - }); - }); - describe("#animation", () => { - describe("#animation.type", () => { - const wrapper = factory({ - progress: 50 - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - it("applies @default animation class by default", () => { - expect(circleProgressWrapper.classes()).to.include("animation__default"); - }); - it("applies @rs animation class correctly", () => { - wrapper.setProps({ - animation: { - type: "rs", - duration: 100, - delay: 100 - } - }); - expect(circleProgressWrapper.classes()).to.include("animation__rs"); - }); - it("applies @loop animation class correctly", () => { - wrapper.setProps({ - animation: { - type: "loop", - duration: 100, - delay: 100 - } - }); - expect(circleProgressWrapper.classes()).to.include("animation__loop"); - }); - it("applies @bounce animation class correctly", () => { - wrapper.setProps({ - animation: { - type: "bounce", - duration: 100, - delay: 100 - } - }); - expect(circleProgressWrapper.classes()).to.include("animation__bounce"); - }); - it("applies @reverse animation class correctly", () => { - wrapper.setProps({ - animation: { - type: "reverse", - duration: 100, - delay: 100 - } - }); - expect(circleProgressWrapper.classes()).to.include("animation__reverse"); - }); - }); - describe("#animation.duration", () => { - const wrapper = factory({ - progress: 50 - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - it("applies default @1000 duration value as transition", () => { - expect(circleProgressWrapper.element.style.transition).to.equal("1000ms"); - }); - it("applies provided duration value as transition", () => { - wrapper.setProps({ - animation: { - type: "rs", - duration: 500, - delay: 100 - } - }); - expect(circleProgressWrapper.element.style.transition).to.equal("500ms"); - }); - it("applies @0 duration value as transition", () => { - wrapper.setProps({ - animation: { - type: "rs", - duration: 0, - delay: 100 - } - }); - expect(circleProgressWrapper.element.style.transition).to.equal("0ms"); - }); - }); - describe("#animation.delay", () => { - it("applies default @400 delay value as animation-delay", () => { - const wrapper = factory({ - progress: 50 - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - expect(circleProgressWrapper.element.style.animationDelay).to.equal("400ms"); - }); - it("applies provided delay value as animation-delay", () => { - const wrapper = factory({ - progress: 50, - animation: { - type: "rs", - duration: 1000, - delay: 1000 - } - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - expect(circleProgressWrapper.element.style.animationDelay).to.equal("1000ms"); - }); - it("applies @0 delay value as animation-delay", () => { - const wrapper = factory({ - progress: 50, - animation: { - type: "rs", - duration: 1000, - delay: 0 - } - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - expect(circleProgressWrapper.element.style.animationDelay).to.equal("0ms"); - }); - it("resets animation-delay value to 0 after animation played", async () => { - const wrapper = factory({ - progress: 50, - animation: { - type: "rs", - duration: 200, - delay: 100 - } - }); - const circleWrapper = wrapper.find(Circle); - const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); - await wait(300); - expect(circleProgressWrapper.element.style.animationDelay).to.equal("0ms"); - }); - }); - }); - describe("#half", () => { - const progress = 60; - const size = 200; - const thickness = 10; - - const wrapper = factory({ - progress, - thickness, - size, - half: true, - animation: { - type: "none", - duration: 0, - delay: 0 - } - }); - - const radius = size / 2 - thickness / 2; - const position = size / 2 - radius; - const expectedPath = ` M ${position}, ${size / 2} a ${radius},${radius} 0 1,1 ${radius * 2},0`; - - const circleWrapper = wrapper.find(HalfCircle); - const circleProgressWrapper = circleWrapper.find(".ep-circle--progress"); - const circleEmptyWrapper = circleWrapper.find(".ep-circle--empty"); - - it("calculates and sets the position of the half circles correctly", () => { - expect(circleWrapper.vm.position).to.equal(position); - expect(circleWrapper.vm.path).to.equal(expectedPath); - - expect(circleProgressWrapper.element.getAttribute("d")).to.equal(`${expectedPath}`); - expect(circleEmptyWrapper.element.getAttribute("d")).to.equal(`${expectedPath}`); - }); - it("calculates the progress circle stroke offset correctly", async () => { - const circumference = (radius * 2 * Math.PI) / 2; - const expectedOffset = circumference - (progress / 100) * circumference; - expect(circleWrapper.vm.progressOffset).to.equal(expectedOffset); - expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${expectedOffset}`); - }); - }); - describe("#dash", () => { - const dash = "10 10"; - - const wrapper = factory({ - progress: 50, - dash - }); - - const circleWrapper = wrapper.find(Circle); - const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); - - it("applies the #dash value as string correctly", () => { - expect(circleEmptyWrapper.element.getAttribute("stroke-dasharray")).to.equal(`${dash}`); - }); - }); -}); diff --git a/tests/unit/circle/circle-animation.spec.js b/tests/unit/circle/circle-animation.spec.js new file mode 100644 index 0000000..3a0fafd --- /dev/null +++ b/tests/unit/circle/circle-animation.spec.js @@ -0,0 +1,116 @@ +import { expect } from "chai"; +import { mount } from "@vue/test-utils"; +import Container from "../../../src/components/VueEllipseProgress.vue"; +import Circle from "../../../src/components/Circle/CircleProgress.vue"; + +const wait = (ms = 400) => new Promise(resolve => setTimeout(() => resolve(), ms)); + +const factory = propsData => { + return mount(Container, { + propsData: { + ...propsData + }, + stubs: { + CountUp: true + } + }); +}; + +export default () => { + describe("#animation", () => { + describe("#animation.type", () => { + const wrapper = factory({ + progress: 50 + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + it("applies @default animation class by default", () => { + expect(circleProgressWrapper.classes()).to.include("animation__default"); + }); + it("applies @rs animation class correctly", () => { + wrapper.setProps({ + animation: "rs" + }); + expect(circleProgressWrapper.classes()).to.include("animation__rs"); + }); + it("applies @loop animation class correctly", () => { + wrapper.setProps({ + animation: "loop" + }); + expect(circleProgressWrapper.classes()).to.include("animation__loop"); + }); + it("applies @bounce animation class correctly", () => { + wrapper.setProps({ + animation: "bounce" + }); + expect(circleProgressWrapper.classes()).to.include("animation__bounce"); + }); + it("applies @reverse animation class correctly", () => { + wrapper.setProps({ + animation: "reverse" + }); + expect(circleProgressWrapper.classes()).to.include("animation__reverse"); + }); + }); + describe("#animation.duration", () => { + const wrapper = factory({ + progress: 50 + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + it("applies default @1000 duration value as transition", () => { + expect(circleProgressWrapper.element.style.transition).to.equal("1000ms"); + }); + it("applies provided duration value as transition", () => { + wrapper.setProps({ + animation: "rs 500" + }); + expect(circleProgressWrapper.element.style.transition).to.equal("500ms"); + }); + it("applies @0 duration value as transition", () => { + wrapper.setProps({ + animation: "rs 0" + }); + expect(circleProgressWrapper.element.style.transition).to.equal("0ms"); + }); + }); + describe("#animation.delay", () => { + it("applies default @400 delay value as animation-delay", () => { + const wrapper = factory({ + progress: 50 + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + expect(circleProgressWrapper.element.style.animationDelay).to.equal("400ms"); + }); + it("applies provided delay value as animation-delay", () => { + const wrapper = factory({ + progress: 50, + animation: "rs 1000 1000" + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + expect(circleProgressWrapper.element.style.animationDelay).to.equal("1000ms"); + }); + it("applies @0 delay value as animation-delay", () => { + const wrapper = factory({ + progress: 50, + animation: "rs 1000 0" + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + expect(circleProgressWrapper.element.style.animationDelay).to.equal("0ms"); + }); + it("resets animation-delay value to 0 after animation played", async () => { + const wrapper = factory({ + progress: 50, + animation: "rs 100 100" + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + await wait(300); + expect(circleProgressWrapper.element.style.animationDelay).to.equal("0ms"); + }); + }); + }); +}; diff --git a/tests/unit/circle/circle-colors.spec.js b/tests/unit/circle/circle-colors.spec.js new file mode 100644 index 0000000..ae6e219 --- /dev/null +++ b/tests/unit/circle/circle-colors.spec.js @@ -0,0 +1,183 @@ +import { expect } from "chai"; +import { mount } from "@vue/test-utils"; +import Container from "../../../src/components/VueEllipseProgress.vue"; +import Circle from "../../../src/components/Circle/CircleProgress.vue"; +import Gradient from "../../../src/components/Gradient.vue"; + +const factory = propsData => { + return mount(Container, { + propsData: { + ...propsData + }, + stubs: { + CountUp: true + } + }); +}; + +export default () => { + describe("#color", () => { + const color = "#3f79ff"; + const wrapper = factory({ + progress: 50, + color + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + + it("applies color correctly", () => { + expect(circleProgressWrapper.element.getAttribute("stroke")).to.equal(`${color}`); + }); + it("applies gradient color correctly", () => { + const gradientColor = { + gradient: { + radial: false, + colors: [ + { + color: "red", + offset: 0, + opacity: 1 + }, + { + color: "blue", + offset: 0, + opacity: 1 + } + ] + } + }; + wrapper.setProps({ + color: gradientColor + }); + const gradientWrapper = wrapper.find(Gradient); + expect(wrapper.contains(Gradient)).to.be.true; + expect(gradientWrapper.contains("linearGradient")).to.be.true; + const linearGradientWrapper = gradientWrapper.find("linearGradient"); + expect(linearGradientWrapper.findAll("stop").length).to.equal(gradientColor.gradient.colors.length); + }); + }); + describe("#colorFill", () => { + const colorFill = "#3f79ff"; + const wrapper = factory({ + progress: 50, + colorFill + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + + it("applies color correctly", () => { + expect(circleProgressWrapper.element.getAttribute("fill")).to.equal(`${colorFill}`); + }); + it("applies gradient fill color correctly", () => { + const gradientColorFill = { + gradient: { + radial: true, + colors: [ + { + color: "red", + offset: 0, + opacity: 1 + }, + { + color: "blue", + offset: 0, + opacity: 1 + } + ] + } + }; + wrapper.setProps({ + colorFill: gradientColorFill + }); + const gradientWrapper = wrapper.find(Gradient); + expect(wrapper.contains(Gradient)).to.be.true; + expect(gradientWrapper.contains("radialGradient")).to.be.true; + const radialGradientWrapper = gradientWrapper.find("radialGradient"); + expect(radialGradientWrapper.findAll("stop").length).to.equal(gradientColorFill.gradient.colors.length); + }); + }); + describe("#emptyColor", () => { + const emptyColor = "#3f79ff"; + const wrapper = factory({ + progress: 50, + emptyColor + }); + + const circleWrapper = wrapper.find(Circle); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + it("applies empty color correctly", () => { + expect(circleEmptyWrapper.element.getAttribute("stroke")).to.equal(`${emptyColor}`); + }); + it("applies empty gradient color correctly", () => { + const emptyGradientColor = { + gradient: { + radial: false, + colors: [ + { + color: "red", + offset: 0, + opacity: 1 + }, + { + color: "blue", + offset: 0, + opacity: 1 + } + ] + } + }; + wrapper.setProps({ + emptyColor: emptyGradientColor + }); + const gradientWrapper = wrapper.find(Gradient); + expect(wrapper.contains(Gradient)).to.be.true; + expect(gradientWrapper.contains("linearGradient")).to.be.true; + const linearGradientWrapper = gradientWrapper.find("linearGradient"); + expect(linearGradientWrapper.findAll("stop").length).to.equal(emptyGradientColor.gradient.colors.length); + }); + }); + describe("#emptyColorFill", () => { + const emptyColorFill = "#3f79ff"; + const wrapper = factory({ + progress: 50, + emptyColorFill + }); + + const circleWrapper = wrapper.find(Circle); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + it("applies empty color correctly", () => { + expect(circleEmptyWrapper.element.getAttribute("fill")).to.equal(`${emptyColorFill}`); + }); + it("applies empty gradient fill color correctly", () => { + const emptyGradientColorFill = { + gradient: { + radial: true, + colors: [ + { + color: "red", + offset: 0, + opacity: 1 + }, + { + color: "blue", + offset: 0, + opacity: 1 + } + ] + } + }; + wrapper.setProps({ + emptyColorFill: emptyGradientColorFill + }); + const gradientWrapper = wrapper.find(Gradient); + expect(wrapper.contains(Gradient)).to.be.true; + expect(gradientWrapper.contains("radialGradient")).to.be.true; + const radialGradientWrapper = gradientWrapper.find("radialGradient"); + expect(radialGradientWrapper.findAll("stop").length).to.equal(emptyGradientColorFill.gradient.colors.length); + }); + }); +}; diff --git a/tests/unit/circle/circle-line.spec.js b/tests/unit/circle/circle-line.spec.js new file mode 100644 index 0000000..696adfd --- /dev/null +++ b/tests/unit/circle/circle-line.spec.js @@ -0,0 +1,335 @@ +import { expect } from "chai"; +import { mount } from "@vue/test-utils"; +import Container from "../../../src/components/VueEllipseProgress.vue"; +import Circle from "../../../src/components/Circle/CircleProgress.vue"; +import HalfCircle from "../../../src/components/Circle/HalfCircleProgress.vue"; + +const factory = propsData => { + return mount(Container, { + propsData: { + ...propsData + }, + stubs: { + CountUp: true + } + }); +}; + +export default () => { + describe("#line", () => { + it("renders line type correctly", () => { + const progress = 60; + let line = "round"; + + const wrapper = factory({ + progress, + line + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`); + + line = "square"; + wrapper.setProps({ line }); + expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`); + + line = "butt"; + wrapper.setProps({ line }); + expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`); + }); + }); + describe("#lineMode", () => { + describe("#lineMode.mode", () => { + const progress = 50; + const size = 200; + const baseRadius = 200 / 2; + + describe("#lineMode.mode.normal", () => { + let thickness = 20; + let emptyThickness = 10; + const wrapper = factory({ + progress, + thickness, + emptyThickness, + lineMode: "normal 0", + size + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => { + it("in case #thickness >= #emptyThickness", () => { + let expectedProgressCircleRadius = baseRadius - thickness / 2; + let expectedEmptyCircleRadius = expectedProgressCircleRadius; + let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + + thickness = emptyThickness = 10; + + wrapper.setProps({ thickness, emptyThickness }); + + expectedProgressCircleRadius = baseRadius - thickness / 2; + expectedEmptyCircleRadius = expectedProgressCircleRadius; + progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + it("in case #thickness >= #emptyThickness and #lineMode.offset = 10", () => { + // offset must be ignored in this mode + wrapper.setProps({ lineMode: "normal 10" }); + let expectedProgressCircleRadius = baseRadius - thickness / 2; + let expectedEmptyCircleRadius = expectedProgressCircleRadius; + let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + + thickness = emptyThickness = 10; + + wrapper.setProps({ thickness, emptyThickness }); + + expectedProgressCircleRadius = baseRadius - thickness / 2; + expectedEmptyCircleRadius = expectedProgressCircleRadius; + progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + it("in case #thickness < #emptyThickness", () => { + thickness = 10; + emptyThickness = 20; + + wrapper.setProps({ thickness, emptyThickness }); + + const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; + const expectedProgressCircleRadius = expectedEmptyCircleRadius; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + it("in case #thickness < #emptyThickness and #lineMode.offset", () => { + // offset must be ignored in this mode + thickness = 10; + emptyThickness = 20; + + wrapper.setProps({ thickness, emptyThickness, lineMode: "normal 10" }); + + const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; + const expectedProgressCircleRadius = expectedEmptyCircleRadius; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + }); + }); + describe("#lineMode.mode.in", () => { + const offset = 10; + const thickness = 20; + const emptyThickness = 10; + const wrapper = factory({ + progress, + thickness, + emptyThickness, + lineMode: `in ${offset}`, + size + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + it("circles does not exceed the size and aligns properly in relation to each other", () => { + const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; + const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 - thickness / 2 - offset; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + }); + describe("#lineMode.mode.in-over", () => { + const offset = 10; // must be ignored in this mode + const thickness = 20; + const emptyThickness = 10; + const wrapper = factory({ + progress, + thickness, + emptyThickness, + lineMode: `in ${offset}`, + size + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + it("circles does not exceed the size and aligns properly in relation to each other", () => { + const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; + const expectedProgressCircleRadius = baseRadius - thickness / 2; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + }); + describe("#lineMode.mode.out", () => { + const offset = 10; + const thickness = 10; + const emptyThickness = 10; + const wrapper = factory({ + progress, + thickness, + emptyThickness, + lineMode: `out ${offset}`, + size + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + it("circles does not exceed the size and aligns properly in relation to each other", () => { + const expectedProgressCircleRadius = baseRadius - emptyThickness / 2; + const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2 - thickness / 2 - offset; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + }); + describe("#lineMode.mode.out-over", () => { + const offset = 10; // must be ignored in this mode + let thickness = 20; + let emptyThickness = 10; + const wrapper = factory({ + progress, + thickness, + emptyThickness, + lineMode: `out-over ${offset}`, + size + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => { + it("in case #thickness >= #emptyThickness", () => { + let expectedProgressCircleRadius = baseRadius - thickness / 2; + let expectedEmptyCircleRadius = expectedProgressCircleRadius - thickness / 2 + emptyThickness / 2; + let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + + thickness = emptyThickness = 10; + + wrapper.setProps({ thickness, emptyThickness }); + + expectedProgressCircleRadius = baseRadius - thickness / 2; + expectedEmptyCircleRadius = expectedProgressCircleRadius; + progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + it("in case #thickness < #emptyThickness", () => { + thickness = 10; + emptyThickness = 20; + + wrapper.setProps({ thickness, emptyThickness }); + + const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; + const expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2 + thickness / 2; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + }); + }); + describe("#lineMode.mode.top", () => { + const offset = 10; // must be ignored in this mode + const thickness = 20; + const emptyThickness = 20; + const wrapper = factory({ + progress, + thickness, + emptyThickness, + lineMode: `top ${offset}`, + size + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + it("circles does not exceed the size and aligns properly in relation to each other", () => { + const expectedProgressCircleRadius = baseRadius - thickness / 2; + const expectedEmptyCircleRadius = expectedProgressCircleRadius - emptyThickness / 2; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + }); + describe("#lineMode.mode.bottom", () => { + const offset = 10; // must be ignored in this mode + let thickness = 40; + let emptyThickness = 10; + const wrapper = factory({ + progress, + thickness, + emptyThickness, + lineMode: `bottom ${offset}`, + size + }); + + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + describe("radius of the circles does not exceed the size and aligns properly in relation to each other", () => { + it("in case #thickness * 2 > #emptyThickness", () => { + const expectedProgressCircleRadius = baseRadius - thickness / 2; + const expectedEmptyCircleRadius = expectedProgressCircleRadius + emptyThickness / 2; + const progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + const emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + it("in case #thickness * 2 <= #emptyThickness", () => { + thickness = 10; + emptyThickness = 20; + + wrapper.setProps({ thickness, emptyThickness }); + + let expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; + let expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2; + let progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + let emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + + thickness = emptyThickness = 20; + + wrapper.setProps({ thickness, emptyThickness }); + + expectedEmptyCircleRadius = baseRadius - emptyThickness / 2; + expectedProgressCircleRadius = expectedEmptyCircleRadius - emptyThickness / 2; + progressCircleRadius = circleProgressWrapper.element.getAttribute("r"); + emptyCircleRadius = circleEmptyWrapper.element.getAttribute("r"); + expect(progressCircleRadius).to.equal(`${expectedProgressCircleRadius}`); + expect(emptyCircleRadius).to.equal(`${expectedEmptyCircleRadius}`); + }); + }); + }); + }); + }); +}; diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js new file mode 100644 index 0000000..b32aade --- /dev/null +++ b/tests/unit/circle/circle.spec.js @@ -0,0 +1,198 @@ +import { expect } from "chai"; +import { mount } from "@vue/test-utils"; +import Container from "../../../src/components/VueEllipseProgress.vue"; +import Circle from "../../../src/components/Circle/CircleProgress.vue"; +import HalfCircle from "../../../src/components/Circle/HalfCircleProgress.vue"; + +import lineTest from "./circle-line.spec"; +import animationTest from "./circle-animation.spec"; + +const factory = propsData => { + return mount(Container, { + propsData: { + ...propsData + }, + stubs: { + CountUp: true + } + }); +}; + +describe("[ CircleProgress.vue ]", () => { + describe("#progress", () => { + it("calculates the progress circle stroke offset correctly", () => { + const progress = 60; + const size = 200; + const thickness = 4; + + const wrapper = factory({ + size, + progress, + thickness, + emptyThickness: thickness, + animation: "default 0 0" + }); + + const radius = size / 2 - thickness / 2; + const circumference = radius * 2 * Math.PI; + const expectedOffset = circumference - (progress / 100) * circumference; + + const circleWrapper = wrapper.find(Circle); + + expect(circleWrapper.vm.progressOffset).to.equal(expectedOffset); + }); + }); + describe("#thickness", () => { + it("renders the progress circle line stroke thickness correctly", () => { + const progress = 60; + const thickness = 4; + + const wrapper = factory({ + progress, + thickness + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + + expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${thickness}`); + }); + it("renders and calculates the progress circle line stroke relative thickness correctly", () => { + const progress = 60; + const size = 200; + const thickness = "5%"; + const relativeThickness = (parseInt(thickness, 10) * size) / 100; + + const wrapper = factory({ + progress, + thickness + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + + expect(circleWrapper.vm.thickness).to.equal(relativeThickness); + expect(circleProgressWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`); + }); + }); + describe("#emptyTthickness", () => { + it("renders the empty circle line stroke thickness correctly", () => { + const progress = 60; + const emptyThickness = 4; + + const wrapper = factory({ + progress, + emptyThickness + }); + const circleWrapper = wrapper.find(Circle); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${emptyThickness}`); + }); + it("renders and calculates the empty circle line stroke relative thickness correctly", () => { + const progress = 60; + const size = 200; + const emptyThickness = "5%"; + const relativeThickness = (parseInt(emptyThickness, 10) * size) / 100; + + const wrapper = factory({ + progress, + emptyThickness + }); + const circleWrapper = wrapper.find(Circle); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + expect(circleWrapper.vm.emptyThickness).to.equal(relativeThickness); + expect(circleEmptyWrapper.element.getAttribute("stroke-width")).to.equal(`${relativeThickness}`); + }); + }); + describe("#size", () => { + it("calculates and sets the position of the circles correctly", () => { + const progress = 60; + const size = 200; + const position = 200 / 2; + + const wrapper = factory({ + progress, + size + }); + const circleWrapper = wrapper.find(Circle); + const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + expect(circleWrapper.vm.position).to.equal(position); + + expect(circleProgressWrapper.element.getAttribute("cx")).to.equal(`${position}`); + expect(circleProgressWrapper.element.getAttribute("cy")).to.equal(`${position}`); + + expect(circleEmptyWrapper.element.getAttribute("cx")).to.equal(`${position}`); + expect(circleEmptyWrapper.element.getAttribute("cy")).to.equal(`${position}`); + }); + it("calculates the circumference of the progress circles correctly", () => { + const progress = 60; + const size = 200; + const thickness = 4; + const radius = size / 2 - thickness / 2; + const circumference = radius * 2 * Math.PI; + + const wrapper = factory({ + size, + progress, + thickness, + emptyThickness: thickness + }); + const circleWrapper = wrapper.find(Circle); + expect(circleWrapper.vm.circumference).to.equal(circumference); + }); + }); + // lineTest(); + // animationTest(); + describe("#half", () => { + const progress = 60; + const size = 200; + const thickness = 10; + + const wrapper = factory({ + progress, + thickness, + size, + half: true, + animation: "default 0 0" + }); + + const radius = size / 2 - thickness / 2; + const position = size / 2 - radius; + const expectedPath = ` M ${position}, ${size / 2} a ${radius},${radius} 0 1,1 ${radius * 2},0`; + + const circleWrapper = wrapper.find(HalfCircle); + const circleProgressWrapper = circleWrapper.find(".ep-circle--progress"); + const circleEmptyWrapper = circleWrapper.find(".ep-circle--empty"); + + it("calculates and sets the position of the half circles correctly", () => { + expect(circleWrapper.vm.position).to.equal(position); + expect(circleWrapper.vm.path).to.equal(expectedPath); + + expect(circleProgressWrapper.element.getAttribute("d")).to.equal(`${expectedPath}`); + expect(circleEmptyWrapper.element.getAttribute("d")).to.equal(`${expectedPath}`); + }); + it("calculates the progress circle stroke offset correctly", async () => { + const circumference = (radius * 2 * Math.PI) / 2; + const expectedOffset = circumference - (progress / 100) * circumference; + expect(circleWrapper.vm.progressOffset).to.equal(expectedOffset); + expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${expectedOffset}`); + }); + }); + describe("#dash", () => { + const dash = "10 10"; + + const wrapper = factory({ + progress: 50, + dash + }); + + const circleWrapper = wrapper.find(Circle); + const circleEmptyWrapper = circleWrapper.find("circle.ep-circle--empty"); + + it("applies the #dash value as string correctly", () => { + expect(circleEmptyWrapper.element.getAttribute("stroke-dasharray")).to.equal(`${dash}`); + }); + }); +}); diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js index 23d5ccc..ebada46 100644 --- a/tests/unit/container.spec.js +++ b/tests/unit/container.spec.js @@ -3,7 +3,7 @@ import { shallowMount, mount } from "@vue/test-utils"; import Container from "../../src/components/VueEllipseProgress.vue"; describe("[ EllipseProgressContainer.vue ]", () => { - describe("rendering", () => { + /* describe("rendering", () => { it("renders the progress and empty circles", () => { const wrapper = mount(Container, { propsData: { progress: 50 } @@ -12,7 +12,7 @@ describe("[ EllipseProgressContainer.vue ]", () => { expect(wrapper.find("circle.ep-circle--empty").exists()).to.equal(true); expect(wrapper.find("circle.ep-circle--progress").exists()).to.equal(true); }); - }); + }); */ describe("#size", () => { it("sets the size of the container correctly", () => { const size = 250; @@ -43,7 +43,7 @@ describe("[ EllipseProgressContainer.vue ]", () => { delay: 300 }; const wrapper = shallowMount(Container, { - propsData: { animation, progress: 50 } + propsData: { animation: `${animation.type} ${animation.duration} ${animation.delay}`, progress: 50 } }); expect(wrapper.element.style.transition).to.equal(`${animation.duration}ms ease-in-out`); }); @@ -92,7 +92,7 @@ describe("[ EllipseProgressContainer.vue ]", () => { it("counts the decimals correctly", () => { let progress = 40; const wrapper = shallowMount(Container, { - propsData: { animation, progress } + propsData: { animation: `${animation.type} ${animation.duration} ${animation.delay}`, progress } }); expect(wrapper.vm.countDecimals).to.equal(0); @@ -124,7 +124,7 @@ describe("[ EllipseProgressContainer.vue ]", () => { const progress = 40; it("counts the decimals correctly", () => { const wrapper = shallowMount(Container, { - propsData: { animation, progress } + propsData: { animation: `${animation.type} ${animation.duration} ${animation.delay}`, progress } }); expect(wrapper.vm.countDecimals).to.equal(0); @@ -163,7 +163,11 @@ describe("[ EllipseProgressContainer.vue ]", () => { }; it("hides the legend, if true", () => { const wrapper = shallowMount(Container, { - propsData: { animation, noData: true, progress: 50 } + propsData: { + animation: `${animation.type} ${animation.duration} ${animation.delay}`, + noData: true, + progress: 50 + } }); const spanWrapper = wrapper.find(".ep-legend--value"); expect(spanWrapper.classes()).to.include("ep-hidden"); @@ -177,7 +181,11 @@ describe("[ EllipseProgressContainer.vue ]", () => { }; it("hides the legend, if true", () => { const wrapper = shallowMount(Container, { - propsData: { animation, noData: true, progress: 50 } + propsData: { + animation: `${animation.type} ${animation.duration} ${animation.delay}`, + noData: true, + progress: 50 + } }); const spanWrapper = wrapper.find(".ep-legend--value"); expect(spanWrapper.classes()).to.include("ep-hidden"); From b950b78d84da2b66f1b2171665b9f1d644e43441 Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Sat, 21 Mar 2020 19:36:55 +0100 Subject: [PATCH 02/46] fix: remove transition from container --- package.json | 2 +- src/components/VueEllipseProgress.vue | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index da76881..ee3c232 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-ellipse-progress", - "version": "1.0.0-beta.0", + "version": "1.0.0-beta.1", "private": false, "description": "A Vue.js component to create beautiful animated circular progress bars", "main": "./dist/vue-ellipse-progress.umd.min.js", diff --git a/src/components/VueEllipseProgress.vue b/src/components/VueEllipseProgress.vue index b0305ae..477965f 100644 --- a/src/components/VueEllipseProgress.vue +++ b/src/components/VueEllipseProgress.vue @@ -4,7 +4,6 @@ :style="{ maxWidth: `${size}px`, maxHeight: `${size}px`, - transition: `${animation.duration}ms ease-in-out` }" >
From 055d6e09f3655ecba60b963a39775af50f36e4ad Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Sat, 21 Mar 2020 19:37:48 +0100 Subject: [PATCH 03/46] test: remove transition test from container --- tests/unit/container.spec.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js index ebada46..5b48492 100644 --- a/tests/unit/container.spec.js +++ b/tests/unit/container.spec.js @@ -35,19 +35,6 @@ describe("[ EllipseProgressContainer.vue ]", () => { expect(svgWrapper.element.getAttribute("height")).to.equal("250"); }); }); - describe("#transition", () => { - it("sets the transition property of the container correctly", () => { - const animation = { - type: "default", - duration: 1000, - delay: 300 - }; - const wrapper = shallowMount(Container, { - propsData: { animation: `${animation.type} ${animation.duration} ${animation.delay}`, progress: 50 } - }); - expect(wrapper.element.style.transition).to.equal(`${animation.duration}ms ease-in-out`); - }); - }); describe("#angle", () => { it("sets the rotation of the svg container correctly", () => { const angle = 40; From 33d7de2b034ea78621db4f7dbfc2823174ed97bd Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Sat, 21 Mar 2020 19:40:15 +0100 Subject: [PATCH 04/46] test: remove rotation test from container --- tests/unit/container.spec.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/tests/unit/container.spec.js b/tests/unit/container.spec.js index 5b48492..67bd32f 100644 --- a/tests/unit/container.spec.js +++ b/tests/unit/container.spec.js @@ -37,19 +37,10 @@ describe("[ EllipseProgressContainer.vue ]", () => { }); describe("#angle", () => { it("sets the rotation of the svg container correctly", () => { - const angle = 40; - const wrapper = shallowMount(Container, { - propsData: { angle, progress: 50 } - }); - const svgWrapper = wrapper.find("svg"); - expect(svgWrapper.element.style.transform).to.equal(`rotate(${angle}deg)`); + // TODO: move to circle }); it("sets the rotation of the svg container to default, if not defined", () => { - const wrapper = shallowMount(Container, { - propsData: { progress: 50 } - }); - const svgWrapper = wrapper.find("svg"); - expect(svgWrapper.element.style.transform).to.equal("rotate(-90deg)"); + // TODO: move to circle }); }); describe("#progress", () => { @@ -91,7 +82,6 @@ describe("[ EllipseProgressContainer.vue ]", () => { wrapper.setProps({ progress }); expect(wrapper.vm.countDecimals).to.equal(4); }); - // FIXME: Produces error, see corresponding issue it("forces noData state, if invalid", () => { const progress = "s3ome"; const wrapper = shallowMount(Container, { From f66c1a6966ff5e3a119bd2c5a5e699c1c9fa6245 Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Sat, 21 Mar 2020 19:52:00 +0100 Subject: [PATCH 05/46] test: fix #thickness and #emptyThikness tests --- src/App.vue | 10 +++++++++- tests/unit/circle/circle.spec.js | 4 ++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index f246b8a..0d566f1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -67,7 +67,15 @@ animation="loop 700 300" > - + + { export default () => { describe("#animation", () => { - describe("#animation.type", () => { + describe("#animation.type", async () => { const wrapper = factory({ progress: 50 }); const circleWrapper = wrapper.find(Circle); const circleProgressWrapper = circleWrapper.find("circle.ep-circle--progress"); + await wait(100); it("applies @default animation class by default", () => { const classes = circleProgressWrapper.classes(); expect(classes) diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js index a00e61a..a325930 100644 --- a/tests/unit/circle/circle.spec.js +++ b/tests/unit/circle/circle.spec.js @@ -178,7 +178,7 @@ describe("[ CircleProgress.vue ]", () => { it("calculates the progress circle stroke offset correctly", async () => { const circumference = (radius * 2 * Math.PI) / 2; const expectedOffset = circumference - (progress / 100) * circumference; - await wait(400); + await wait(1); expect(circleWrapper.vm.progressOffset).to.equal(expectedOffset); expect(circleProgressWrapper.element.style.strokeDashoffset).to.equal(`${expectedOffset}`); }); From 83f4296a8974010e76e8733ca6a18078c77a6fa2 Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Thu, 2 Apr 2020 20:43:53 +0200 Subject: [PATCH 12/46] test: reduce #lineMode test code redundancies --- src/App.vue | 37 +++---- tests/unit/circle/circle-line.spec.js | 119 ++++++--------------- tests/unit/circle/circle-thickness.spec.js | 80 ++++++++++++++ tests/unit/circle/circle.spec.js | 70 ++---------- 4 files changed, 134 insertions(+), 172 deletions(-) create mode 100644 tests/unit/circle/circle-thickness.spec.js diff --git a/src/App.vue b/src/App.vue index be1bf9c..647858e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,6 +23,10 @@ Animation + + --> - @@ -151,37 +149,9 @@ export default { data: () => ({ line: "round", circles: [ - { - progress: 0, - thickness: 40, - animation: "rs 2000 2000", - loading: false, - half: true - }, - { - progress: 55, - thickness: 40, - color: "blue", - // angle: "-90", - loading: false, - animation: "bounce 2000 400" - }, - { - progress: 35, - thickness: 40, - color: "red", - // angle: "155", - loading: false, - animation: "loop 2000 600" - }, - { - progress: 15, - thickness: 40, - color: "yellow", - // angle: "165", - loading: false, - animation: "reverse 2000 800" - } + { progress: 25, color: "red", gap: 25, thickness: 5 }, + { progress: 35, color: "blue", gap: 10, thickness: 5 }, + { progress: 55, color: "green" } ], determinate: false, loading: false, diff --git a/tests/unit/circle/circle.spec.js b/tests/unit/circle/circle.spec.js index b7361d2..1490c4b 100644 --- a/tests/unit/circle/circle.spec.js +++ b/tests/unit/circle/circle.spec.js @@ -2,8 +2,9 @@ import { expect } from "chai"; import { mount } from "@vue/test-utils"; import Vue from "vue"; import Circle from "../../../src/components/Circle/CircleProgress.vue"; -import CircleContainer from "../../../src/components/Circle/EpCircleContainer.vue"; +import EpCircleContainer from "../../../src/components/Circle/EpCircleContainer.vue"; import HalfCircle from "../../../src/components/Circle/HalfCircleProgress.vue"; +import VueEllipseProgress from "../../../src/components/VueEllipseProgress.vue"; import lineTest from "./circle-line.spec"; import thicknessTest from "./circle-thickness.spec"; @@ -209,7 +210,7 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => { }); }); describe("#angle", () => { - const circleContainerWrapper = factory({ progress: 50 }, CircleContainer); + const circleContainerWrapper = factory({ progress: 50 }, EpCircleContainer); it("sets the rotation of the svg container to default, if not defined", () => { expect(circleContainerWrapper.element.style.transform).to.equal("rotate(-90deg)"); }); @@ -220,6 +221,48 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => { expect(circleContainerWrapper.element.style.transform).to.equal(`rotate(${angle}deg)`); }); }); + describe("#data", () => { + const size = 200; + const globalThickness = 10; + const globalGap = 10; + + const data = [ + { progress: 25, color: "red", gap: 25, thickness: 5 }, + { progress: 35, color: "blue", gap: 10, thickness: 5 }, + { progress: 55, color: "green" } + ]; + const wrapper = factory({ data, gap: globalGap, thickness: globalThickness, size }, VueEllipseProgress); + const circleWrappers = wrapper.findAll(Circle); + it("calculates the radius of each circle correctly depending on #thickness and #gap ", () => { + for (let i = 0; i < data.length; i++) { + const circleData = data[i]; + const circleGap = circleData.gap !== undefined ? circleData.gap : globalGap; + const circleThickness = circleData.thickness !== undefined ? circleData.thickness : globalThickness; + + let radius; + const baseRadius = size / 2 - circleThickness / 2; + if (i > 0) { + const previousCirclesData = data.filter((props, index) => index < i); + const previousCirclesThickness = previousCirclesData + .map(({ gap, thickness }) => { + const g = gap !== undefined ? gap : globalGap; + const t = thickness !== undefined ? thickness : globalThickness; + return g + t; + }) + .reduce((acc, current) => acc + current); + + radius = baseRadius - (previousCirclesThickness + circleGap); + } else { + radius = baseRadius; + } + const circleProgressWrapper = circleWrappers.at(i).find("circle.ep-circle--progress"); + const circleEmptyWrapper = circleWrappers.at(i).find("circle.ep-circle--empty"); + expect(circleProgressWrapper.element.getAttribute("r")).to.equal(`${radius}`); + expect(circleEmptyWrapper.element.getAttribute("r")).to.equal(`${radius}`); + } + }); + }); + /* thicknessTest(); lineTest(); animationTest(); From c6199c26427b314c67668559447b8f15cb9eba08 Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Sun, 19 Apr 2020 16:01:12 +0200 Subject: [PATCH 38/46] fix: multiple circles radius calculation --- package.json | 2 +- src/components/Circle/circleMixin.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 0749121..e09638a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-ellipse-progress", - "version": "1.0.0-beta.10", + "version": "1.0.0-beta.11", "private": false, "description": "A Vue.js component to create beautiful animated circular progress bars", "main": "./dist/vue-ellipse-progress.umd.min.js", diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js index 3fe18b5..6fa3bc3 100644 --- a/src/components/Circle/circleMixin.js +++ b/src/components/Circle/circleMixin.js @@ -35,7 +35,7 @@ export default { const { offset } = this.parsedLineMode; if (this.multiple) { - return this.normalLineModeRadius - this.previousCirclesThickness; + return this.baseRadius - this.previousCirclesThickness; } switch (this.parsedLineMode.mode) { @@ -61,7 +61,7 @@ export default { const { offset } = this.parsedLineMode; if (this.multiple) { - return this.normalLineModeRadius - this.previousCirclesThickness; + return this.baseRadius - this.previousCirclesThickness; } switch (this.parsedLineMode.mode) { @@ -166,10 +166,16 @@ export default { }, previousCirclesThickness() { if (this.index === 0) return 0; - return this.data + const currentCircleGap = isValidNumber(this.data[this.index].gap) ? this.data[this.index].gap : this.gap; + const previousCirclesGap = this.data .filter((data, i) => i < this.index) - .map(data => (data.thickness || this.thickness) + (data.gap || this.gap)) + .map(data => { + const thickness = isValidNumber(data.thickness) ? data.thickness : this.thickness; + const gap = isValidNumber(data.gap) ? data.gap : this.gap; + return thickness + gap; + }) .reduce((acc, current) => acc + current); + return previousCirclesGap + currentCircleGap; }, styles() { return { From c4a1087b955c8bd237e4106d19173d1c079ed958 Mon Sep 17 00:00:00 2001 From: Sergej Atamantschuk Date: Sun, 19 Apr 2020 17:48:10 +0200 Subject: [PATCH 39/46] test: add randomized #data tests to cover more cases --- src/App.vue | 55 +++++++++++++++++++++++++++++--- tests/unit/circle/circle.spec.js | 42 ++++++++++++++++-------- 2 files changed, 79 insertions(+), 18 deletions(-) diff --git a/src/App.vue b/src/App.vue index be38306..dd229e9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -40,11 +40,11 @@
-->