github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Steps: add test (#561)

pull/569/head
cinwell.li 2016-10-21 14:57:14 +08:00 committed by FuryBean
parent 7bc214ce2f
commit d2a2376329
3 changed files with 125 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/docs/zh-cn/upload.md
View File

@ -46,7 +46,7 @@
::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
```html
<el-upload
action="http://jsonplaceholder.typicode.com/posts/"
action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove">
<el-button size="small" type="primary">点击上传</el-button>
@ -74,7 +74,7 @@
::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
```html
<el-upload
action="http://jsonplaceholder.typicode.com/posts/"
action="//jsonplaceholder.typicode.com/posts/"
type="drag"
:multiple="true"
:on-preview="handlePreview"
@ -108,7 +108,7 @@
::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
```html
<el-upload
action="http://jsonplaceholder.typicode.com/posts/"
action="//jsonplaceholder.typicode.com/posts/"
type="drag"
:thumbnail-mode="true"
:on-preview="handlePreview"

4
packages/theme-default/src/step.css
View File

@ -36,14 +36,14 @@
@when horizontal {
top: 15px;
height: 2px;
left: 32px;
left: 30px;
right: 0;
}
@when vertical {
width: 2px;
box-sizing: border-box;
top: 32px;
top: 30px;
bottom: 0;
}
}

120
test/unit/specs/steps.spec.js Normal file
View File

@ -0,0 +1,120 @@
import { createVue } from '../util';
import Vue from 'vue';
describe('Steps', () => {
it('create', () => {
const vm = createVue(`
<el-steps>
<el-step title="step1"></el-step>
<el-step title="step2"></el-step>
<el-step title="step3"></el-step>
</el-steps>
`);
expect(vm.$el.querySelectorAll('.el-step')).to.length(3);
});
it('space', done => {
const vm = createVue(`
<el-steps>
<el-step title="step1"></el-step>
<el-step title="step2"></el-step>
<el-step title="step3"></el-step>
<el-step title="step4"></el-step>
</el-steps>
`);
const vm2 = createVue(`
<el-steps :space="100">
<el-step title="step1"></el-step>
<el-step title="step2"></el-step>
<el-step title="step3"></el-step>
<el-step title="step4"></el-step>
</el-steps>
`);
Vue.nextTick(_ => {
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.width').equal('25%');
expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.width').equal('100px');
done();
});
});
it('processStatus', done => {
const vm = createVue(`
<el-steps :active="1" process-status="error">
<el-step title="step1"></el-step>
<el-step title="step2"></el-step>
<el-step title="step3"></el-step>
</el-steps>
`);
vm.$nextTick(_ => {
expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
done();
});
});
it('finishStatus', done => {
const vm = createVue(`
<el-steps :active="1" finish-status="error">
<el-step title="abc"></el-step>
<el-step title="abc2"></el-step>
</el-steps>
`);
vm.$nextTick(_ => {
expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
done();
});
});
it('active', done => {
const vm = createVue({
template: `
<el-steps :active="active" finish-status="error">
<el-step title="abc"></el-step>
<el-step title="abc2"></el-step>
</el-steps>
`,
data() {
return { active: 0 };
}
});
vm.$nextTick(_ => {
expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(0);
vm.active = 2;
vm.$nextTick(_ => {
expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(2);
done();
});
});
});
it('create vertical', () => {
const vm = createVue(`
<el-steps direction="vertical">
<el-step title="aaa"></el-step>
<el-step title="bbb"></el-step>
</el-steps>
`);
expect(vm.$el.querySelector('.is-vertical')).to.exist;
});
it('vertical:height', done => {
const vm = createVue(`
<el-steps direction="vertical" :space="200">
<el-step title="aaa"></el-step>
<el-step title="bbb"></el-step>
</el-steps>
`);
vm.$nextTick(_ => {
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.height').equal('200px');
done();
});
});
});