test: fix all color tests

Author: setaman

package-lock.json

@@ -40,7 +40,7 @@
     "@vue/cli-service": "^4.5.9",
     "@vue/compiler-sfc": "^3.0.4",
     "@vue/eslint-config-airbnb": "^5.3.0",
-    "@vue/test-utils": "^2.0.0-beta.11",
+    "@vue/test-utils": "^2.0.0-beta.13",
     "babel-eslint": "^10.1.0",
     "chai": "^4.2.0",
     "eslint": "^7.15.0",

package.json

@@ -3,7 +3,7 @@ import CircleContainer from "@/components/Circle/CircleContainer.vue";
 import Gradient from "@/components/Gradient.vue";
 import { factory } from "@/../tests/helper";
 
-const localFactory = (colorObject) => factory({ container: CircleContainer, props: colorObject });
+const localFactory = (props) => factory({ container: CircleContainer, props });
 
 const gradientColor = {
   radial: false,
@@ -21,9 +21,9 @@ const gradientColor = {
   ],
 };
 
-const colorAsStringTests = (colorProp, color, selector, fill = false) => {
+const colorAsStringTests = (colorProp, color, selector, fill = false, half) => {
   describe("applies color as string", () => {
-    const wrapper = localFactory({ ...colorProp });
+    const wrapper = localFactory({ ...colorProp, half });
     const circleWrapper = wrapper.find(selector);
 
     it("do not recognize gradient colors", () => {
@@ -42,9 +42,9 @@ const colorAsStringTests = (colorProp, color, selector, fill = false) => {
   });
 };
 
-const gradientColorTests = (colorProp, selector, gradientURLPrefix, fill = false) => {
+const gradientColorTests = (colorProp, selector, gradientURLPrefix, fill = false, half) => {
   describe("applies gradient color correctly", () => {
-    const wrapper = localFactory(colorProp);
+    const wrapper = localFactory({ ...colorProp, half });
     const circleWrapper = wrapper.find(selector);
     const id = 0;
     const stopColorWrappers = wrapper.findAll("stop");
@@ -90,14 +90,14 @@ const colorTests = (colorProp, half = false, empty = false, gradientURLPrefix) =
 
   it("does not render fill circle", () => {
     expect(
-      localFactory({ [colorProp]: color })
+      localFactory({ [colorProp]: color, half })
         .find(`.ep-${half ? "half-" : ""}circle--${empty ? "empty" : "progress"}__fill`)
         .exists()
     ).to.be.false;
   });
 
-  colorAsStringTests({ [colorProp]: color }, color, circleSelector, false);
-  gradientColorTests({ [colorProp]: gradientColor }, circleSelector, gradientURLPrefix, false);
+  colorAsStringTests({ [colorProp]: color }, color, circleSelector, false, half);
+  gradientColorTests({ [colorProp]: gradientColor }, circleSelector, gradientURLPrefix, false, half);
 };
 
 const colorFillTests = (colorProp, half = false, empty = false, gradientURLPrefix) => {
@@ -109,14 +109,14 @@ const colorFillTests = (colorProp, half = false, empty = false, gradientURLPrefi
 
   it("renders fill circle", () => {
     expect(
-      localFactory({ [colorProp]: color })
+      localFactory({ [colorProp]: color, half })
         .find(circleSelector)
         .exists()
     ).to.be.true;
   });
 
-  colorAsStringTests({ [colorProp]: color }, color, circleSelector, true);
-  gradientColorTests({ [colorProp]: gradientColor }, circleSelector, gradientURLPrefix, true);
+  colorAsStringTests({ [colorProp]: color }, color, circleSelector, true, half);
+  gradientColorTests({ [colorProp]: gradientColor }, circleSelector, gradientURLPrefix, true, half);
 };
 
 describe("Colors", () => {

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

@@ -126,7 +126,6 @@ describe("[ EllipseProgressContainer.vue ]", () => {
             "legend-caption": '<span id="my-slot">Hello Circle</span>',
           },
         });
-        console.log(wrapper.html());
         expect(wrapper.get("#my-slot"));
       });
     });