import { createVue, destroyVM } from '../util';
describe('Form', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('label width', done => {
vm = createVue({
template: `
`,
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 => {
vm = createVue({
template: `
`,
data() {
return {
form: {
name: '',
address: ''
}
};
}
}, true);
expect(vm.$el.classList.contains('el-form--inline')).to.be.true;
done();
});
it('label position', done => {
vm = createVue({
template: `
`,
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('show message', done => {
vm = createVue({
template: `
`,
data() {
return {
form: {
name: ''
}
};
}
}, true);
vm.$refs.form.validate(valid => {
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(vm.$el.querySelector('.el-form-item__error')).to.not.exist;
done();
});
});
});
it('reset field', done => {
vm = createVue({
template: `
`,
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 => {
vm = createVue({
template: `
-
`,
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 => {
vm = createVue({
template: `
`,
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 field = vm.$refs.field;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请输入活动名称');
vm.setValue('aaaaa');
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('');
vm.setValue('aa');
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请输入活动名称');
done();
});
});
});
});
});
it('textarea', done => {
vm = createVue({
template: `
`,
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 field = vm.$refs.field;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请输入活动名称');
vm.setValue('aaaaa');
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('');
vm.setValue('aa');
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请输入活动名称');
done();
});
});
});
});
});
it('selector', done => {
vm = createVue({
template: `
`,
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 field = vm.$refs.field;
expect(valid).to.true;
vm.setValue('');
setTimeout(_ => {
expect(field.validateMessage).to.equal('请选择活动区域');
vm.setValue('shanghai');
setTimeout(_ => {
expect(field.validateMessage).to.equal('');
done();
}, 100);
}, 100);
});
});
it('datepicker', done => {
vm = createVue({
template: `
`,
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 field = vm.$refs.field;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请选择日期');
vm.setValue(new Date());
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('');
done();
});
});
});
});
it('timepicker', done => {
vm = createVue({
template: `
`,
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 field = vm.$refs.field;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请选择时间');
vm.setValue(new Date());
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('');
done();
});
});
});
});
it('checkbox group', done => {
vm = createVue({
template: `
`,
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 field = vm.$refs.field;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请选择活动类型');
vm.setValue(['地推活动']);
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('');
done();
});
});
});
});
it('radio group', done => {
vm = createVue({
template: `
`,
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 field = vm.$refs.field;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('请选择活动类型');
vm.setValue('线下场地免费');
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('');
done();
});
});
});
});
it('validate field', done => {
vm = createVue({
template: `
`,
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();
}
};
vm = createVue({
template: `
`,
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ validator: checkName, trigger: 'change' }
]
}
};
},
methods: {
setValue(value) {
this.form.name = value;
}
}
}, true);
vm.$refs.form.validate(valid => {
let field = vm.$refs.field;
expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('长度至少为5');
vm.setValue('aaaaaa');
vm.$refs.form.$nextTick(_ => {
expect(field.validateMessage).to.equal('');
done();
});
});
});
});
it('error', done => {
vm = createVue({
template: `
`,
data() {
return {
error: 'dsad',
form: {
name: 'sada'
},
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 field = vm.$refs.field;
expect(valid).to.true;
vm.error = '输入不合法';
vm.$refs.field.$nextTick(_ => {
expect(field.validateState).to.equal('error');
expect(field.validateMessage).to.equal('输入不合法');
done();
});
});
});
});
});