elementui源码学习.zip

import { createTest, createVue, destroyVM, triggerEvent, wait } from '../util'; import DatePicker from 'packages/date-picker'; const DELAY = 50; const LEFT = 37; const ENTER = 13; const TAB = 9; const keyDown = (el, keyCode) => { const evt = document.createEvent('Events'); evt.initEvent('keydown', true, true); evt.keyCode = keyCode; el.dispatchEvent(evt); }; describe('DatePicker', () => { let vm; afterEach(() => { destroyVM(vm); }); it('create', () => { vm = createTest(DatePicker, { readonly: true, placeholder: '23333', format: 'HH-mm-ss' }, true); const input = vm.$el.querySelector('input'); expect(input.getAttribute('placeholder')).to.equal('23333'); expect(input.getAttribute('readonly')).to.equal('readonly'); }); it('select date', done => { vm = createVue({ template: ` <el-date-picker ref="compo" v-model="value"></el-date-picker> `, data() { return { value: '' }; } }, true); const input = vm.$el.querySelector('input'); const date = new Date(); input.blur(); input.focus(); setTimeout(_ => { const $el = vm.$refs.compo.picker.$el; const spans = $el.querySelectorAll('.el-date-picker__header-label'); const arrowLeftElm = $el.querySelector('.el-date-picker__prev-btn.el-icon-arrow-left'); const arrowRightElm = $el.querySelector('.el-date-picker__next-btn.el-icon-arrow-right'); expect(spans[0].textContent).to.include(date.getFullYear()); expect(spans[1].textContent).to.include(date.getMonth() + 1); $el.querySelector('.el-date-picker__prev-btn.el-icon-d-arrow-left').click(); let count = 20; while (--count) { arrowLeftElm.click(); } count = 20; while (--count) { arrowRightElm.click(); } setTimeout(_ => { expect(spans[0].textContent).to.include(date.getFullYear() - 1); expect(spans[1].textContent).to.include(date.getMonth() + 1); $el.querySelector('td.available').click(); vm.$nextTick(_ => { expect(vm.value).to.exist; }); done(); }, DELAY); }, DELAY); }); it('clear value', done => { vm = createVue({ template: ` <el-date-picker v-model="value" ref="compo"></el-date-picker> `, data() { return { value: '' }; } }, true); const input = vm.$el.querySelector('input'); input.focus(); setTimeout(_ => { const $el = vm.$refs.compo.picker.$el; $el.querySelector('td.available').click(); setTimeout(_ => { vm.$refs.compo.showClose = true; vm.$refs.compo.handleClickIcon({ stopPropagation: () => null }); setTimeout(_ => { expect(vm.value).to.equal(null); done(); }, DELAY); }, DELAY); }, DELAY); }); it('disabled clear value', done => { vm = createVue({ template: ` <el-date-picker v-model="value" ref="compo" :clearable="false"></el-date-picker> `, data() { return { value: '' }; } }, true); const input = vm.$el.querySelector('input'); input.focus(); setTimeout(_ => { const $el = vm.$refs.compo.picker.$el; $el.querySelector('td.available').click(); vm.$nextTick(_ => { vm.$el.querySelector('.el-input__icon').click(); setTimeout(_ => { expect(vm.value).to.be.exist; done(); }, DELAY); }); }, DELAY); }); it('reset', done => { vm = createVue({ template: ` <el-date-picker ref="compo" v-model="value"></el-date-picker> `, data() { return { value: '' }; } }, true); const input = vm.$el.querySelector('input'); input.blur(); input.focus(); setTimeout(_ => { const $el = vm.$refs.compo.picker.$el; $el.querySelector('.el-date-picker__next-btn.el-icon-arrow-right').click(); setTimeout(_ => { $el.querySelector('td.available').click(); vm.$nextTick(_ => { vm.value = ''; setTimeout(_ => { expect(vm.$refs.compo.picker.date.getDate()).to.equal(new Date().getDate()); done(); }, DELAY); }); }, DELAY); }, DELAY); }); it('focus', done => { vm = createVue({ template: ` <el-date-picker ref="picker"></el-date-picker> ` }, true); const spy = sinon.spy(); vm.$refs.picker.$on('focus', spy); vm.$refs.picker.focus(); vm.$nextTick(_ => { expect(spy.calledOnce).to.be.true; done(); }); }); it('change event', done => { let onChangeValue; vm = createVue({ template: ` <el-date-picker ref="compo" v-model="value" @change="handleChange" />`, methods: { handleChange(val) { onChangeValue = val; } }, data() { return { value: '' }; } }, true); const input = vm.$el.querySelector('input'); input.blur(); input.focus(); setTimeout(_ => { const picker = vm.$refs.compo.picker; // programatic modification of bound value does not emit cange vm.value = new Date(2000, 9, 2); setTimeout(_ => { expect(onChangeValue).to.not.exist; // user interaction does emit change picker.$el.querySelector('td.available').click(); setTimeout(_ => { expect(onChangeValue.getTime()).to.equal(vm.value.getTime()); done(); }, DELAY); }, DELAY); }, DELAY); }); it('change event: when clear(), without opening picker', done => { vm = createVue({ template: ` <el-date-picker ref="compo" v-model="value" />`, data() { return { value: new Date() }; } }, true); const spy = sinon.spy(); vm.$refs.compo.$on('change', spy); setTimeout(_ => { vm.$refs.compo.showClose = true; vm.$refs.compo.handleClickIcon({ stopPropagation: () => null }); setTimeout(_ => { expect(spy.calledOnce).to.equal(true); expect(spy.calledWith(null)).to.equal(true); done(); }, DELAY); }, DELAY); }); it('nuke invalid input on close', done => { vm = createVue({ template: '<el-date-picker v-model="value" value-format="yyyy-MM-dd" ref="compo" />', data() { return { value: '2010-10-01' }; } }, true); const compo = vm.$refs.compo; const input = compo.$el.querySelector('input'); input.blur(); input.focus(); setTimeout(_ => { compo.userInput = 'abc'; compo.handleChange(); // simplified test compo.handleClose(); setTimeout(_ => { expect(input.value).to.equal('2010-10-01'); expect(vm.value).to.equal('2010-10-01'); done(); }, DELAY); }, DELAY); }); it('select datetime with defaultTime', done => { vm = createVue({ template: ` <el-date-picker ref="compo" type="datetime" v-model="value" default-time="12:00:00"></el-date-picker> `, data() { return { value: '' }; } }, true); const input = vm.$el.querySelector('input'); input.blur(); input.focus(); setTimeout(_ => { const picker = vm.$refs.compo.picker; picker.$el.querySelector('td.available').click(); setTimeout(_ => { const date = vm.$refs.compo.picker.date; expect(date.getHours()).to.equal(12); expect(date.getMinutes()).to.equal(0); expect(date.getSeconds()).to.equal(0); done(); }, DELAY); }, DELAY); }); describe('input event', () => { // mimic standard <select>'s behavior // emit input if and only if value changes afterEach(() => { destroyVM(vm); });