diff --git a/examples/docs/zh-cn/form.md b/examples/docs/zh-cn/form.md index ab4589de..141fe6cc 100644 --- a/examples/docs/zh-cn/form.md +++ b/examples/docs/zh-cn/form.md @@ -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 | — | — | diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue index 6dbf1b00..92266f9f 100644 --- a/packages/form/src/form-item.vue +++ b/packages/form/src/form-item.vue @@ -85,7 +85,6 @@ methods: { validate(trigger, cb) { var rules = this.getFilteredRule(trigger); - if (!rules || rules.length === 0) { cb && cb(); return true; diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue index adebb2e1..bc47ab9d 100644 --- a/packages/form/src/form.vue +++ b/packages/form/src/form.vue @@ -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--; diff --git a/test/unit/specs/dropdown.spec.js b/test/unit/specs/dropdown.spec.js index 26a0452f..1aedc8fe 100644 --- a/test/unit/specs/dropdown.spec.js +++ b/test/unit/specs/dropdown.spec.js @@ -4,7 +4,7 @@ describe('Dropdown', () => { it('create', done => { const vm = createVue({ template: ` - + 下拉菜单 @@ -18,19 +18,19 @@ describe('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 => { diff --git a/test/unit/specs/form.spec.js b/test/unit/specs/form.spec.js new file mode 100644 index 00000000..9d5639bd --- /dev/null +++ b/test/unit/specs/form.spec.js @@ -0,0 +1,577 @@ +import { createVue } from '../util'; + +describe('Form', () => { + it('label width', done => { + const 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 => { + const 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 => { + const 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('reset field', done => { + const 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 => { + const 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 => { + const 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 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: ` + + + + + + `, + 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: ` + + + + + + + + + `, + 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: ` + + + + + + `, + 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: ` + + + + + + `, + 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: ` + + + + + + + + + + + `, + 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: ` + + + + + + + + + `, + 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: ` + + + + + + `, + 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: ` + + + + + + `, + 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(); + }); + }); + }); + }); + }); +});