diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index f7b2534e6..7ad45059b 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -2,9 +2,7 @@
-
- {{pivotText}}
-
+ {{currentPivotText}}
@@ -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';
diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
new file mode 100644
index 000000000..a6c897d6f
--- /dev/null
+++ b/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'));
+ });
+});
diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js
index 58f9a267b..4ebe06410 100644
--- a/test/unit/specs/switch.spec.js
+++ b/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;