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

Test/component/form (#687)

Browse Source 
Form: add test
This commit is contained in:
baiyaaaaa 2016-10-27 21:57:40 +08:00 committed by FuryBean
parent 14495f6189
commit 5d925ed69f
5 changed files with 586 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/docs/zh-cn/form.md
View File

@ -792,8 +792,8 @@
|---------- |-------------- |---------- |-------------------------------- |-------- |
| model | 表单数据对象 | object | — | — |
| rules | 表单验证规则 | object | — | — |
| type | 表单类型 | string | stacked, inline, horizontal | horizontal |
| label-align | 表单域标签的水平对齐位置 | string | right,left | right |
| inline | 行内表单模式 | boolean | — | false |
| label-position | 表单域标签的位置 | string | right/left/top | right |
| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | — | — |

1
packages/form/src/form-item.vue
View File

@ -85,7 +85,6 @@
methods: {
validate(trigger, cb) {
var rules = this.getFilteredRule(trigger);
if (!rules || rules.length === 0) {
cb && cb();
return true;

2
packages/form/src/form.vue
View File

@ -15,7 +15,6 @@
props: {
model: Object,
rules: Object,
type: String,
labelPosition: String,
labelWidth: String,
labelSuffix: {
@ -35,6 +34,7 @@
this.fields[field.prop] = field;
this.fieldLength++;
});
/* istanbul ignore next */
this.$on('el.form.removeField', (field) => {
delete this.fields[field.prop];
this.fieldLength--;

12
test/unit/specs/dropdown.spec.js
View File

@ -4,7 +4,7 @@ describe('Dropdown', () => {
it('create', done => {
const vm = createVue({
template: `
<el-dropdown>
<el-dropdown ref="dropdown">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
</span>
@ -18,19 +18,19 @@ describe('Dropdown', () => {
</el-dropdown>
`
}, true);
let dropdownElm = vm.$el;
let dropdown = vm.$refs.dropdown;
let dropdownElm = dropdown.$el;
let triggerElm = dropdownElm.children[0];
triggerEvent(triggerElm, 'mouseenter');
setTimeout(_ => {
var dropdownMenu = document.querySelector('.dropdown-test-creat');
expect(dropdownMenu.style.display).to.not.ok;
expect(dropdown.visible).to.be.true;
triggerEvent(triggerElm, 'mouseleave');
setTimeout(_ => {
expect(dropdownMenu.style.display).to.be.equal('none');
expect(dropdown.visible).to.not.true;
done();
}, 600);
}, 300);
}, 400);
});
it('menu click', done => {

577
test/unit/specs/form.spec.js Normal file
View File

@ -0,0 +1,577 @@
import { createVue } from '../util';
describe('Form', () => {
it('label width', done => {
const vm = createVue({
template: `
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: ''
}
};
}
}, true);
expect(vm.$el.querySelector('.el-form-item__label').style.width).to.equal('80px');
expect(vm.$el.querySelector('.el-form-item__content').style.marginLeft).to.equal('80px');
done();
});
it('inline form', done => {
const vm = createVue({
template: `
<el-form ref="form" :model="form" inline>
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: '',
address: ''
}
};
}
}, true);
expect(vm.$el.classList.contains('el-form--inline')).to.be.true;
done();
});
it('label position', done => {
const vm = createVue({
template: `
<div>
<el-form :model="form" label-position="top" ref="labelTop">
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
<el-form :model="form" label-position="left" ref="labelLeft">
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
</div>
`,
data() {
return {
form: {
name: '',
address: ''
}
};
}
}, true);
expect(vm.$refs.labelTop.$el.classList.contains('el-form--label-top')).to.be.true;
expect(vm.$refs.labelLeft.$el.classList.contains('el-form--label-left')).to.be.true;
done();
});
it('reset field', done => {
const vm = createVue({
template: `
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" ref="fieldName"></el-input>
</el-form-item>
<el-form-item label="活动地址" prop="address">
<el-input v-model="form.address" ref="fieldAddr"></el-input>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: '',
address: '',
type: []
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
address: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
]
}
};
},
methods: {
setValue() {
this.form.name = 'jack';
this.form.address = 'aaaa';
this.form.type.push('地推活动');
}
}
}, true);
vm.setValue();
vm.$refs.form.resetFields();
vm.$refs.form.$nextTick(_ => {
expect(vm.form.name).to.equal('');
expect(vm.form.address).to.equal('');
expect(vm.form.type.length).to.equal(0);
done();
});
});
it('form item nest', done => {
const vm = createVue({
template: `
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
date1: '',
date2: ''
},
rules: {
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
]
}
};
},
methods: {
setValue() {
this.name = 'jack';
this.address = 'aaaa';
}
}
}, true);
vm.$refs.form.validate(valid => {
expect(valid).to.not.true;
done();
});
});
describe('validate', () => {
it('input', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
]
}
};
},
methods: {
setValue(value) {
this.form.name = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('请输入活动名称');
vm.setValue('aaaaa');
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('');
vm.setValue('aa');
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('请输入活动名称');
done();
});
});
});
});
});
it('textarea', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name">
<el-input type="textarea" v-model="form.name"></el-input>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
]
}
};
},
methods: {
setValue(value) {
this.form.name = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('请输入活动名称');
vm.setValue('aaaaa');
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('');
vm.setValue('aa');
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('请输入活动名称');
done();
});
});
});
});
});
it('selector', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="记住密码" prop="region">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
region: 'shanghai'
},
rules: {
region: [
{required: true, message: '请选择活动区域', trigger: 'change' }
]
}
};
},
methods: {
setValue(value) {
this.form.region = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.true;
vm.setValue('');
setTimeout(_ => {
expect(fields.region.error).to.equal('请选择活动区域');
vm.setValue('shanghai');
setTimeout(_ => {
expect(fields.region.error).to.equal('');
done();
}, 100);
}, 100);
});
});
it('datepicker', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="记住密码" prop="date">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
date: ''
},
rules: {
date: [
{type: 'date', required: true, message: '请选择日期', trigger: 'change' }
]
}
};
},
methods: {
setValue(value) {
this.form.date = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(fields.date.error).to.equal('请选择日期');
vm.setValue(new Date());
vm.$refs.form.$nextTick(_ => {
expect(fields.date.error).to.equal('');
done();
});
});
});
});
it('timepicker', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="记住密码" prop="date">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
date: ''
},
rules: {
date: [
{type: 'date', required: true, message: '请选择时间', trigger: 'change' }
]
}
};
},
methods: {
setValue(value) {
this.form.date = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(fields.date.error).to.equal('请选择时间');
vm.setValue(new Date());
vm.$refs.form.$nextTick(_ => {
expect(fields.date.error).to.equal('');
done();
});
});
});
});
it('checkbox group', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
type: []
},
rules: {
type: [
{ type: 'array', required: true, message: '请选择活动类型', trigger: 'change' }
]
}
};
},
methods: {
setValue(value) {
this.form.type = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(fields.type.error).to.equal('请选择活动类型');
vm.setValue(['地推活动']);
vm.$refs.form.$nextTick(_ => {
expect(fields.type.error).to.equal('');
done();
});
});
});
});
it('radio group', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="type">
<el-radio-group v-model="form.type">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
type: ''
},
rules: {
type: [
{ required: true, message: '请选择活动类型', trigger: 'change' }
]
}
};
},
methods: {
setValue(value) {
this.form.type = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(fields.type.error).to.equal('请选择活动类型');
vm.setValue('线下场地免费');
vm.$refs.form.$nextTick(_ => {
expect(fields.type.error).to.equal('');
done();
});
});
});
});
it('validate field', done => {
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
]
}
};
},
methods: {
setValue(value) {
this.form.name = value;
}
}
}, true);
vm.$refs.form.validateField('name', valid => {
expect(valid).to.not.true;
done();
});
});
it('custom validate', done => {
var checkName = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error('长度至少为5'));
} else {
callback();
}
};
const vm = createVue({
template: `
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ validator: checkName, trigger: 'change' }
]
}
};
},
methods: {
setValue(value) {
this.form.name = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('长度至少为5');
vm.setValue('aaaaaa');
vm.$refs.form.$nextTick(_ => {
expect(fields.name.error).to.equal('');
done();
});
});
});
});
});
});