test: add circle-progress slot test

Author: setaman

src/App.vue

@@ -104,15 +104,16 @@
           </template>
         </ve-progress>
 
-        <ve-progress :progress="progress" animation="bounce 3000 300" :loading="loading">
+        <ve-progress :size="400" :progress="progress" animation="bounce 3000 300" :loading="loading">
           <template #circle-progress="{ attrs }">
-            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="none" viewBox="0 0 53 53"
+            <svg xmlns="http://www.w3.org/2000/svg" :width="attrs.size" :height="attrs.size" fill="none" viewBox="0 0 53 53"
                  version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
               <path ref="customPath" fill="url(&quot;#SvgjsLinearGradient1660&quot;)"
-                    :stroke-width="1"
+                    :stroke-width="1.5"
                     :stroke="attrs.color"
                     :stroke-dashoffset="attrs.calculateProgressOffset(163.32911682128906)"
                     :stroke-dasharray="163.32911682128906"
+                    :stroke-linecap="attrs.line"
                     :style="attrs.baseStyles"
                     d="M52.1 26.5c0 3.2-4.3 5.6-5.5 8.4-1.2 2.9.1 7.6-2.1 9.8-2.2 2.2-6.9.9-9.8 2.1-2.8 1.2-5.2 5.5-8.4 5.5s-5.6-4.3-8.4-5.5c-2.9-1.2-7.6.1-9.8-2.1-2.2-2.2-.9-6.9-2.1-9.8C4.8 32.1.5 29.7.5 26.5s4.3-5.6 5.5-8.4c1.2-2.9-.1-7.6 2.1-9.8 2.2-2.2 6.9-.9 9.8-2.1C20.7 5 23.1.7 26.3.7s5.6 4.3 8.4 5.5c2.9 1.2 7.6-.1 9.8 2.1 2.2 2.2.9 6.9 2.1 9.8 1.2 2.8 5.5 5.2 5.5 8.4Z"></path>
               <defs>

tests/unit/container.spec.js

@@ -174,6 +174,30 @@ describe("[ EllipseProgressContainer.vue ]", () => {
         }, 100);
       });
     });
+    describe("#circle-progress", () => {
+      const wrapper = mount(VueEllipseProgress, {
+        props: { progress: 35 },
+        slots: {
+          "circle-progress": `
+              <template #default="attrs" >
+                <polygon
+                  ref="polygon"
+                  :stroke-dashoffset="attrs.strokeDashOffset"
+                  :stroke-dasharray="582.4922485351562"
+                  points="10,10 190,100 10,190"
+                  style="fill: lime; stroke: purple; stroke-width: 3"
+                  :style="attrs.styles"
+                />
+              </template>`,
+        },
+      });
+
+      it("renders provided slot", () => expect(wrapper.find("polygon").exists()).to.be.true);
+
+      it("replaces default progress circle", () => {
+        expect(wrapper.find(".ep-circle--progress").exists()).to.be.false;
+      });
+    });
   });
   describe("#data", () => {
     const data = [