test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 12:18:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #573 from baiyaaaaa/test/component/progress

Browse Source 
add progress test
This commit is contained in:
杨奕 2016-10-21 17:54:44 +08:00 committed by GitHub
commit 9f77e088c5
3 changed files with 86 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/zh-cn/progress.md
View File

@ -20,7 +20,7 @@
```html
<el-progress :percentage="0"></el-progress>
<el-progress :percentage="70"></el-progress>
<el-progress :percentage="70" :show-text="false"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>
```

4
packages/progress/src/progress.vue
View File

@ -42,10 +42,6 @@
default: 'line',
validator: val => ['line', 'circle'].indexOf(val) > -1
},
size: {
type: String,
validator: val => !val || ['large', 'small'].indexOf(val) > -1
},
percentage: {
type: Number,
default: 0,

85
test/unit/specs/progress.spec.js Normal file
View File

@ -0,0 +1,85 @@
import { createVue } from '../util';
describe('Progress', () => {
it('create', () => {
const vm = createVue({
template: `
<div>
<el-progress ref="percent0" :percentage="0"></el-progress>
<el-progress ref="percent50" :percentage="50"></el-progress>
<el-progress ref="percent100" :percentage="100"></el-progress>
</div>
`
}, true);
expect(vm.$refs.percent0.$el.querySelector('.el-progress__text').innerText).to.be.equal('0%');
expect(vm.$refs.percent0.$el.querySelector('.el-progress-bar__inner').style.width).to.be.equal('0%');
expect(vm.$refs.percent50.$el.querySelector('.el-progress__text').innerText).to.be.equal('50%');
expect(vm.$refs.percent50.$el.querySelector('.el-progress-bar__inner').style.width).to.be.equal('50%');
expect(vm.$refs.percent100.$el.querySelector('.el-progress__text').innerText).to.be.equal('100%');
expect(vm.$refs.percent100.$el.querySelector('.el-progress-bar__inner').style.width).to.be.equal('100%');
});
it('status', () => {
const vm = createVue({
template: `
<div>
<el-progress ref="lineSuccess" :percentage="100" status="success"></el-progress>
<el-progress ref="lineException" :percentage="0" status="exception"></el-progress>
<el-progress type="circle" ref="circleSuccess" :percentage="100" status="success"></el-progress>
<el-progress type="circle" ref="circleException" :percentage="0" status="exception"></el-progress>
</div>
`
}, true);
expect(vm.$refs.lineSuccess.$el.classList.contains('is-success')).to.be.true;
expect(vm.$refs.lineSuccess.$el.querySelector('.el-progress__text .el-icon-circle-check')).to.be.exist;
expect(vm.$refs.lineException.$el.classList.contains('is-exception')).to.be.true;
expect(vm.$refs.lineException.$el.querySelector('.el-progress__text .el-icon-circle-cross')).to.be.exist;
expect(vm.$refs.circleSuccess.$el.classList.contains('is-success')).to.be.true;
expect(vm.$refs.circleSuccess.$el.querySelector('.el-progress__text .el-icon-check')).to.be.exist;
expect(vm.$refs.circleException.$el.classList.contains('is-exception')).to.be.true;
expect(vm.$refs.circleException.$el.querySelector('.el-progress__text .el-icon-close')).to.be.exist;
});
it('text inside', () => {
const vm = createVue({
template: `
<el-progress :percentage="50" text-inside></el-progress>
`
}, true);
expect(vm.$el.classList.contains('el-progress--text-inside')).to.be.true;
});
it('stroke width', () => {
const vm = createVue({
template: `
<el-progress :percentage="50" :stroke-width="8"></el-progress>
`
}, true);
expect(vm.$el.querySelector('.el-progress-bar__outer').style.height).to.be.equal('8px');
});
it('show text', () => {
const vm = createVue({
template: `
<el-progress :percentage="50" :show-text="false"></el-progress>
`
}, true);
expect(vm.$el.querySelector('.el-progress__text')).to.not.exist;
});
it('circle', () => {
const vm = createVue({
template: `
<el-progress type="circle" :percentage="50"></el-progress>
`
}, true);
expect(vm.$el.classList.contains('el-progress--circle')).to.be.true;
});
it('width', () => {
const vm = createVue({
template: `
<el-progress type="circle" :percentage="50" :width="120"></el-progress>
`
}, true);
expect(vm.$el.querySelector('.el-progress-circle').style.height).to.be.equal('120px');
expect(vm.$el.querySelector('.el-progress-circle').style.width).to.be.equal('120px');
});
});