feat: add progress bar unit tests

packages/progress/src/progress.vue

@@ -2,9 +2,7 @@
   <div class="zan-progress">
     <div class="zan-progress__bar">
       <span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="zan-progress__bar__pivot" :style="pivotStyle">
+      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{currentPivotText}}</span>
-        {{pivotText}}
-      </span>
     </div>
   </div>
 </template>
@@ -29,7 +27,7 @@ export default {
   props: {
     percentage: {
       type: Number,
-      default: 0,
+      required: true,
       validate(value) {
         return value <= 100 && value >= 0;
       }
@@ -55,6 +53,9 @@ export default {
   },
 
   computed: {
+    currentPivotText() {
+      return this.pivotText ? this.pivotText : this.this.percentage.toString() + '%';
+    },
     componentColor() {
       return this.inactive ? '#cacaca' : this.color;
     },
@@ -65,7 +66,6 @@ export default {
         left: this.percentage + '%',
         marginLeft: '-14px'
       };
-      console.log(this.percentage);
       if (this.percentage <= 5) {
         pivotStyle.left = '0%';
         pivotStyle.marginLeft = '0';

test/unit/specs/progress.spec.js

@@ -0,0 +1,82 @@
+import Progress from 'packages/progress';
+import { mount } from 'avoriaz';
+
+describe('Progress', () => {
+  let wrapper;
+  let bar;
+  let pivot;
+  const initProgressBar = function(propsData) {
+    wrapper = mount(Progress, {
+      propsData: propsData
+    });
+    bar = wrapper.find('.zan-progress__bar__finished-portion')[0];
+    pivot = wrapper.find('.zan-progress__bar__pivot')[0];
+  };
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create active 3% progress bar', () => {
+    initProgressBar({ percentage: 3 });
+
+    expect(wrapper.hasClass('zan-progress')).to.be.true;
+    expect(bar.is('span')).to.be.true;
+    expect(bar.hasStyle('width', '3%'));
+
+    expect(pivot.is('span')).to.be.true;
+    expect(pivot.hasStyle('left', '0%'));
+    expect(pivot.hasStyle('marginLeft', '0'));
+    expect(pivot.text()).to.equal('3%');
+  });
+
+  it('create active 35% progress bar', () => {
+    initProgressBar({ percentage: 35 });
+
+    expect(wrapper.hasClass('zan-progress')).to.be.true;
+    expect(bar.is('span')).to.be.true;
+    expect(bar.hasStyle('width', '35%'));
+
+    expect(pivot.is('span')).to.be.true;
+    expect(pivot.hasStyle('left', '35%'));
+    expect(pivot.hasStyle('marginLeft', '-14px'));
+    expect(pivot.text()).to.equal('35%');
+  });
+
+  it('create active 98% progress bar', () => {
+    initProgressBar({ percentage: 98 });
+
+    expect(wrapper.hasClass('zan-progress')).to.be.true;
+    expect(bar.is('span')).to.be.true;
+    expect(bar.hasStyle('width', '98%'));
+
+    expect(pivot.is('span')).to.be.true;
+    expect(pivot.hasStyle('left', '100%'));
+    expect(pivot.hasStyle('marginLeft', '-28px'));
+    expect(pivot.text()).to.equal('98%');
+  });
+
+  it('create inactive 35% progress bar', () => {
+    initProgressBar({ percentage: 35, inactive: true });
+
+    expect(pivot.hasStyle('backgroundColor', '#cacaca'));
+  });
+
+  it('create progress bar with custom text', () => {
+    initProgressBar({ percentage: 35, pivotText: 'pivotText' });
+
+    expect(pivot.text()).to.equal('pivotText');
+  });
+
+  it('create progress bar with custom color', () => {
+    initProgressBar({ percentage: 35, color: 'red' });
+
+    expect(pivot.hasStyle('backgroundColor', 'red'));
+  });
+
+  it('create progress bar with text color', () => {
+    initProgressBar({ percentage: 35, textColor: 'red' });
+
+    expect(pivot.hasStyle('color', 'red'));
+  });
+});

test/unit/specs/switch.spec.js

@@ -1,7 +1,6 @@
 import Switch from 'packages/switch';
 import ZanLoading from 'packages/loading';
 import { mount } from 'avoriaz';
-// import { stub } from 'sinon';
 
 describe('Switch', () => {
   let wrapper;