Merge pull request #97 from setaman/v2-fix-tests

V2 fix tests

Author: setaman

package-lock.json

@@ -38,15 +38,15 @@
     "@vue/cli-plugin-eslint": "^4.5.9",
     "@vue/cli-plugin-unit-mocha": "^4.5.9",
     "@vue/cli-service": "^4.5.9",
-    "@vue/compiler-sfc": "^3.0.4",
+    "@vue/compiler-sfc": "^3.0.5",
     "@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",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.2.0",
-    "eslint-plugin-vue": "^7.2.0",
+    "eslint": "^7.17.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-vue": "^7.4.0",
     "node-sass": "^5.0.0",
     "prettier": "^2.2.1",
     "sass-loader": "^10.1.0",

package.json

@@ -38,46 +38,21 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress
-          :size="200"
-          :progress="progress"
-          :legend="1315.56"
-          animation="rs 2000 500"
-          :loading="loading"
-          :reverse="true"
-          :thickness="20"
-          :empty-thickness="10"
-          dot="10 red"
-          :loader="{ thickness: 40, color: 'red' }"
-          line-mode="bottom"
-          :no-data="noData"
-          :determinate="determinate"
-        >
-          <template v-slot:default="{ counterTick }">
-            <span
-              :style="` transition: 0.5s; font-weight: bold; font-size: 1.6rem; color: ${
-                counterTick.currentValue < 600 ? 'red' : 'yellow'
-              };`"
-            >
-              {{ formattedPrice(counterTick.currentValue) }}
-            </span>
-          </template>
-        </ve-progress>
+        <ve-progress :size="200" loading :progress="progress" legend="345,12345"> </ve-progress>
       </div>
       <ve-progress
-        dot="20 green"
         :loading="loading"
         :size="200"
-        :progress="progress"
+        :thickness="10"
+        :progress="50"
         :legend-value="125.1"
         half
-        line-mode="out 20"
         :no-data="noData"
         :determinate="determinate"
         :loader="{ thickness: 40, color: 'red' }"
       >
         <template v-slot:legend-caption>
-          <p slot="legend-caption">TASKS DONE</p>
+          <p id="slot-id" slot="legend-caption">TASKS DONE</p>
         </template>
       </ve-progress>
     </div>

src/App.vue

@@ -8,6 +8,7 @@
     }"
   >
     <circle
+      v-if="options.emptyColorFill !== 'transparent'"
       class="ep-circle--empty__fill"
       :r="emptyFillRadius"
       :cx="position"
@@ -36,12 +37,8 @@
       :stroke-width="emptyThickness"
     >
     </circle>
-    <fade-in-transition>
-      <g v-if="isLoading">
-        <circle-loader :options="options.loader" />
-      </g>
-    </fade-in-transition>
     <circle
+      v-if="options.colorFill !== 'transparent'"
       class="ep-circle--progress__fill"
       :r="fillRadius"
       :cx="position"
@@ -51,6 +48,11 @@
       :style="{ transition: styles.transition }"
     >
     </circle>
+    <fade-in-transition>
+      <g v-if="isLoading">
+        <circle-loader :options="options.loader" />
+      </g>
+    </fade-in-transition>
     <circle
       class="ep-circle--progress"
       :class="animationClass"

src/components/Circle/Circle.vue

@@ -8,7 +8,9 @@
     }"
   >
     <path
+      v-if="options.emptyColorFill !== 'transparent'"
       :fill="computedEmptyColorFill"
+      class="ep-half-circle--empty__fill"
       :d="emptyFillPath"
       :style="{
         transition: styles.transition,
@@ -31,19 +33,19 @@
       :class="{ 'ep-circle--nodata': !dataIsAvailable }"
     >
     </path>
-    <fade-in-transition>
-      <g v-if="isLoading">
-        <half-circle-loader :options="options.loader" />
-      </g>
-    </fade-in-transition>
-
     <path
+      v-if="options.colorFill !== 'transparent'"
       class="ep-half-circle--progress__fill"
       :d="fillPath"
       :fill="computedColorFill"
       :style="{ transition: styles.transition }"
     >
     </path>
+    <fade-in-transition>
+      <g v-if="isLoading">
+        <half-circle-loader :options="options.loader" />
+      </g>
+    </fade-in-transition>
     <path
       :stroke-width="thickness"
       class="ep-half-circle--progress ep-circle--progress"

src/components/Circle/HalfCircle.vue

@@ -4,7 +4,7 @@
       :stroke-width="thickness"
       class="ep-half-circle--loader animation__loading"
       :d="path"
-      :fill="computedColorFill"
+      fill="transparent"
       :stroke="computedColor"
       :stroke-dasharray="circumference"
       :stroke-linecap="options.line"

src/components/Circle/HalfCircleLoader.vue

@@ -1,5 +1,5 @@
 import { emptyRadius, fillRadius, radius } from "@/components/Circle/radiusCalculation";
-import { isValidNumber } from "../../utils";
+import { isValidNumber } from "@/utils";
 
 const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => resolve(), ms));
 
@@ -101,7 +101,7 @@ export default {
     },
 
     dash() {
-      return this.options.dot;
+      return this.options.dash;
     },
     emptyDasharray() {
       if (!this.dash.count || !this.dash.spacing) {

src/components/Circle/circleMixin.js

@@ -1,10 +1,12 @@
+import { isValidNumber } from "@/utils";
+
 const colorConfig = (defaultColor = "transparent") => ({
   type: [String, Object],
   required: false,
   default: defaultColor,
   validator: (value) => {
-    if (typeof value === "string" && value) {
-      return true;
+    if (typeof value === "string") {
+      return value;
     }
     if (typeof value === "object" && value.colors) {
       return value.colors.every((config) => config.color && config.offset);
@@ -14,7 +16,12 @@ const colorConfig = (defaultColor = "transparent") => ({
 });
 
 const validateLoaderProps = (loaderOptions) =>
-  Object.keys(loaderOptions).every((option) => options[option].validator(loaderOptions[option]));
+  Object.keys(loaderOptions).every((option) => {
+    if (option === "opacity") {
+      return isValidNumber(loaderOptions[option]) && loaderOptions[option] >= 0;
+    }
+    return options[option].validator(loaderOptions[option]);
+  });
 
 const linePosition = {
   type: String,

src/components/interface.js

@@ -1,15 +1,15 @@
 import { getNumberIfValid, isValidNumber } from "@/utils";
 
-export const lineModeParser = (options) => {
-  const lineModeConfig = options.lineMode.trim().split(" ");
-  const mode = options.multiple ? "multiple" : lineModeConfig[0];
+export const lineModeParser = (lineMode, multiple) => {
+  const lineModeConfig = lineMode.trim().split(" ");
+  const mode = multiple ? "multiple" : lineModeConfig[0];
   return {
     mode,
     offset: getNumberIfValid(lineModeConfig[1]) || 0,
   };
 };
 
-const animationParser = (animation) => {
+export const animationParser = (animation) => {
   const animationConfig = animation.trim().split(" ");
   return {
     type: animationConfig[0],
@@ -18,7 +18,7 @@ const animationParser = (animation) => {
   };
 };
 
-const dashParser = (dash) => {
+export const dashParser = (dash) => {
   const dashConfig = dash.trim().split(" ");
   const isStrict = dashConfig[0] === "strict";
   if (!isStrict) {
@@ -30,7 +30,7 @@ const dashParser = (dash) => {
   };
 };
 
-export const dotParser = (dot) => {
+export const dotParser = (dot, circleSize) => {
   let dotSize = 0;
   let dotColor = "white";
   let styles = {};
@@ -44,38 +44,34 @@ export const dotParser = (dot) => {
   }
   return {
     ...styles,
-    size: dotSize,
+    size: calcThickness(dotSize, circleSize),
     color: dotColor,
   };
 };
 
-export const calcThickness = (thickness, size) => {
+export const calcThickness = (thickness, circleSize) => {
   const value = parseFloat(thickness);
-  return thickness.toString().includes("%") ? (value * size) / 100 : value;
+  return thickness.toString().includes("%") ? (value * circleSize) / 100 : value;
 };
 
-const parseLinePosition = (linePosition) => {
+export const linePositionParser = (linePosition) => {
   const [position, offset] = linePosition.toString().split(" ");
   return {
     position,
-    offset: offset || 0,
+    offset: parseFloat(offset) || 0,
   };
 };
 
-export const parseOptions = (options) => {
-  const dot = dotParser(options.dot);
-  const globalDot = dotParser(options.globalDot);
-  return {
-    ...options,
-    thickness: calcThickness(options.thickness, options.size),
-    emptyThickness: calcThickness(options.emptyThickness, options.size),
-    globalThickness: calcThickness(options.globalThickness, options.size),
-    dot: { ...dot, size: calcThickness(dot.size, options.size) },
-    globalDot: { ...globalDot, size: calcThickness(globalDot.size, options.size) },
-    dash: dashParser(options.dash),
-    lineMode: lineModeParser(options),
-    linePosition: parseLinePosition(options.linePosition),
-    emptyLinePosition: parseLinePosition(options.emptyLinePosition),
-    animation: animationParser(options.animation),
-  };
-};
+export const parseOptions = (options) => ({
+  ...options,
+  thickness: calcThickness(options.thickness, options.size),
+  emptyThickness: calcThickness(options.emptyThickness, options.size),
+  globalThickness: calcThickness(options.globalThickness, options.size),
+  dot: dotParser(options.dot, options.size),
+  globalDot: dotParser(options.globalDot, options.size),
+  dash: dashParser(options.dash),
+  lineMode: lineModeParser(options.lineMode, options.multiple),
+  linePosition: linePositionParser(options.linePosition),
+  emptyLinePosition: linePositionParser(options.emptyLinePosition),
+  animation: animationParser(options.animation),
+});

src/components/optionsParser.js

@@ -0,0 +1,75 @@
+import { mount } from "@vue/test-utils";
+
+const mockProps = {
+  id: 0,
+  index: 0,
+  multiple: false,
+  data: [],
+  progress: 50,
+  legend: null,
+  size: 200,
+  thickness: 10,
+  globalThickness: 10,
+  emptyThickness: 10,
+  line: "round",
+  lineMode: {
+    mode: "normal",
+    offset: 0,
+  },
+  linePosition: {
+    position: "center",
+    offset: 0,
+  },
+  emptyLinePosition: {
+    position: "center",
+    offset: 0,
+  },
+  color: "#3f79ff",
+  emptyColor: "#e6e9f0",
+  colorFill: "transparent",
+  emptyColorFill: "transparent",
+  fontSize: null,
+  fontColor: null,
+  animation: {
+    type: "default",
+    duration: 1000,
+    delay: 400,
+  },
+  hideLegend: true,
+  legendClass: "",
+  angle: -90,
+  loading: false,
+  noData: false,
+  dash: "",
+  half: false,
+  gap: 0,
+  globalGap: 0,
+  determinate: false,
+  dot: {
+    size: 0,
+    color: "white",
+  },
+  globalDot: {
+    size: 0,
+    color: "white",
+  },
+  reverse: false,
+  legendFormatter: null,
+  loader: {},
+  previousCircles: [],
+};
+mockProps.loaderOptions = mockProps;
+
+export { mockProps };
+
+export const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => resolve(), ms));
+
+export const setCircleProps = async (wrapper, props = {}) => {
+  return wrapper.setProps({ options: { ...wrapper.props("options"), ...props } });
+};
+export const factory = ({ container, props = {}, isCircleFactory = true }) => {
+  const propsData = isCircleFactory ? { options: { ...mockProps, ...props } } : props;
+  return mount(container, {
+    propsData,
+  });
+};

tests/helper.js

@@ -5,7 +5,7 @@ module.exports = {
   rules: {
     "no-unused-expressions": 0,
     "no-multi-assign": 0,
-    "no-unused-vars": 1,
+    "no-unused-vars": "warn",
     "prefer-destructuring": 0,
     "no-restricted-syntax": 0,
     "guard-for-in": 0,