add tests for LoadingIndicator component #27

src/components/LoadingIndicator.vue

@@ -1,13 +1,13 @@
 <template>
-  <svg class="svg-container" height="20" width="20" viewBox="0 0 20 20">
+  <svg :class="['svg-container', animationClass ]" height="20" width="20" viewBox="0 0 20 20">
     <circle
-      :class="['loader-svg', 'bg', {'animate-bg': animationClass === 'progress' }]"
+      class="loader-svg bg"
       cx="10"
       cy="10"
       r="8"
     />
     <circle
-      :class="['loader-svg', animationClass ]"
+      class="loader-svg front"
       :style="{ strokeDasharray: circleProgress }"
       cx="10"
       cy="10"
@@ -47,24 +47,7 @@ export default {
   stroke: var(--color-gray-light-3);
 }
 
-.animate-bg{
+.loading .loader-svg.front {
-  animation: bg-animation 1.5s cubic-bezier(1,1,1,1) 0s infinite;
-}
-
-@keyframes bg-animation{
-  0% {
-    r: 8;
-  }
-  50% {
-    stroke: var(--color-gray-light-2);
-    r: 9;
-  }
-  100% {
-   r: 8;
-  }
-}
-
-.loading {
   stroke-dasharray: 40.24;
   animation: fill-animation-loading 1s cubic-bezier(1,1,1,1) 0s infinite;
 }
@@ -84,8 +67,26 @@ export default {
   }
 }
 
-.progress {
+.progress .loader-svg.front {
   stroke-dashoffset: 12.56;
   transition: stroke-dasharray 0.2s;
 }
+
+.progress .loader-svg.bg {
+  animation: bg-animation 1.5s cubic-bezier(1,1,1,1) 0s infinite;
+}
+
+@keyframes bg-animation{
+  0% {
+    r: 8;
+  }
+  50% {
+    stroke: var(--color-gray-light-2);
+    r: 9;
+  }
+  100% {
+   r: 8;
+  }
+}
+
 </style>

tests/unit/components/LoadingIndicator.spec.js

@@ -0,0 +1,25 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import LoadingIndicator from '@/components/LoadingIndicator.vue'
+
+let place
+describe('LoadingIndicator.vue', () => {
+  it('Calculates animation class', async () => {
+    const wrapper = shallowMount(LoadingIndicator, {
+      propsData: { progress: 0 }
+    })
+    expect(wrapper.find('svg').classes()).to.contain('progress')
+    await wrapper.setProps({ progress: undefined })
+    expect(wrapper.find('svg').classes()).to.not.contain('progress')
+    expect(wrapper.find('svg').classes()).to.contain('loading')
+  })
+
+  it('Calculates arc', async () => {
+    const wrapper = shallowMount(LoadingIndicator, {
+      propsData: { progress: 50 }
+    })
+    // The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
+    // should be 25.12
+    expect(wrapper.find('.loader-svg.front').element.style.strokeDasharray).to.equal('25.12, 25.12')
+  })
+})