test: add dot default value test

Author: setaman

tests/helper.js

@@ -47,9 +47,11 @@ const mockProps = {
   determinate: false,
   dot: {
     size: 0,
+    color: "white",
   },
   globalDot: {
     size: 0,
+    color: "white",
   },
   reverse: false,
   legendFormatter: null,

tests/unit/circle/circle-dot.spec.js

@@ -5,49 +5,22 @@ import CircleDot from "@/components/Circle/CircleDot.vue";
 import { animationParser, dotParser } from "@/components/optionsParser";
 import { factory } from "@/../tests/helper";
 
-const localFactory = (props, container = Circle) => factory({ container, props });
+const localFactory = (props = {}, container = Circle) => factory({ container, props });
 
 describe("#dot", () => {
   const progress = 50;
   const thickness = 5;
   const size = 500;
   const globalDot = "5%";
 
-  // TODO: move to container
-  /* it(`parses property as Number correctly`, () => {
-    const wrapper = localFactory({ progress, size, dot: dotParser(0) });
-    expect(wrapper.vm.parsedDot.size).to.equal("0");
-    expect(wrapper.vm.parsedDot.color).to.equal("white");
-  });
-  it(`parses property as String correctly`, () => {
-    const wrapper = localFactory({ progress, size, dot: dotParser("5% red") });
-    expect(wrapper.vm.parsedDot.size).to.equal("5%");
-    expect(wrapper.vm.parsedDot.color).to.equal("red");
-  });
-  it(`parses property as Object correctly`, () => {
-    const wrapper = localFactory({ progress, size, dot: dotParser({ size: 10, backgroundColor: "green" }) });
-    expect(wrapper.vm.parsedDot.size).to.equal(10);
-    expect(wrapper.vm.parsedDot.color).to.equal("white");
-    expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
-  });
+  it("applies default dot value correctly", () => {
+    const wrapper = localFactory({}, CircleContainer);
+    const dotSpanWrapper = wrapper.find(".ep-circle--progress__dot");
 
-  it(`converts the size percent value to pixel correctly`, () => {
-    const dot = "5%";
-    const wrapper = localFactory({ progress, size, dot: dotParser(dot) });
-    const dotPixelSize = calculateThickness(dot);
-    expect(wrapper.vm.dotSize).to.equal(dotPixelSize);
+    expect(dotSpanWrapper.element.style.width).to.equal("0px");
+    expect(dotSpanWrapper.element.style.height).to.equal("0px");
+    expect(dotSpanWrapper.element.style.backgroundColor).to.equal("white");
   });
-  it("applies default value correctly", () => {
-    const wrapper = factory({ progress }, VueEllipseProgress);
-    const circleWrapper = wrapper.findComponent(Circle);
-    const circleContainerWrapper = wrapper.findComponent(CircleContainer);
-
-    expect(wrapper.props("dot")).to.equal(0);
-    expect(circleContainerWrapper.props("dot")).to.equal(0);
-    expect(circleWrapper.vm.parsedDot.size).to.equal("0");
-    expect(circleWrapper.vm.parsedDot.color).to.equal("white");
-    expect(circleWrapper.vm.dotSize).to.equal(0);
-  }); */
 
   it(`calculates and applies correct rotation of the dot container depending on progress`, (done) => {
     const wrapper = localFactory(

tests/unit/container.spec.js

@@ -106,7 +106,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
       expect(spanWrapper.classes()).to.include("applied-class");
     });
   });
-  describe("#slots", () => {
+  /* describe("#slots", () => {
     describe("#legend-value", () => {
       it("renders provided slot content", () => {
         const wrapper = mount(VueEllipseProgress, {
@@ -155,7 +155,7 @@ describe("[ EllipseProgressContainer.vue ]", () => {
         expect(wrapper.findComponent(Counter).findAll("span")).to.have.lengthOf(2);
       });
     });
-  });
+  }); */
   describe("#data", () => {
     const data = [
       { progress: 25, color: "red" },
@@ -223,4 +223,42 @@ describe("[ EllipseProgressContainer.vue ]", () => {
       });
     });
   });
+  describe("Options parsers", () => {
+    describe("#dot parser", () => {
+      it(`parses property as Number correctly`, () => {
+        const parsedDot = dotParser(0);
+        expect(parsedDot.size).to.equal("0");
+        expect(parsedDot.color).to.equal("white");
+      });
+      it(`parses property as String correctly`, () => {
+        const wrapper = localFactory({ progress, size, dot: dotParser("5% red") });
+        expect(wrapper.vm.parsedDot.size).to.equal("5%");
+        expect(wrapper.vm.parsedDot.color).to.equal("red");
+      });
+      it(`parses property as Object correctly`, () => {
+        const wrapper = localFactory({ progress, size, dot: dotParser({ size: 10, backgroundColor: "green" }) });
+        expect(wrapper.vm.parsedDot.size).to.equal(10);
+        expect(wrapper.vm.parsedDot.color).to.equal("white");
+        expect(wrapper.vm.parsedDot.backgroundColor).to.equal("green");
+      });
+
+      it(`converts the size percent value to pixel correctly`, () => {
+        const dot = "5%";
+        const wrapper = localFactory({ progress, size, dot: dotParser(dot) });
+        const dotPixelSize = calculateThickness(dot);
+        expect(wrapper.vm.dotSize).to.equal(dotPixelSize);
+      });
+      it("applies default value correctly", () => {
+        const wrapper = factory({ progress }, VueEllipseProgress);
+        const circleWrapper = wrapper.findComponent(Circle);
+        const circleContainerWrapper = wrapper.findComponent(CircleContainer);
+
+        expect(wrapper.props("dot")).to.equal(0);
+        expect(circleContainerWrapper.props("dot")).to.equal(0);
+        expect(circleWrapper.vm.parsedDot.size).to.equal("0");
+        expect(circleWrapper.vm.parsedDot.color).to.equal("white");
+        expect(circleWrapper.vm.dotSize).to.equal(0);
+      });
+    });
+  });
 });