alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[Improvement] Picker: rewrite (#370)

Browse Source 
* [Improvement] Picker code review

* fix: Picker text cases

* fix: Picker watch defaultIndex

* [Improvement] Picker support simple data struct

* [bugfix] Picker defaultIndex out of range
This commit is contained in:
neverland
2017-12-05 13:07:25 +08:00
committed by GitHub
parent b07f55bb51
commit 32801b453b
15 changed files with 540 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/unit/specs/area.spec.js
+5 -4
View File
@@ -1,6 +1,7 @@
import Area from 'packages/area';
import { mount } from 'avoriaz';
import AreaList from '../mock/area.json';
import { setTimeout } from 'timers';
describe('Area', () => {
let wrapper;
@@ -47,17 +48,17 @@ describe('Area', () => {
value: '110101'
}
});
expect(wrapper.hasClass('van-area')).to.be.true;
expect(wrapper.vm.$refs.picker.getColumnValue(2).code).to.equal('110101');
wrapper.setProps({
value: '110102'
});
wrapper.vm.$nextTick(() => {
setTimeout(() => {
expect(wrapper.vm.$refs.picker.getColumnValue(2).code).to.equal('110102');
done();
});
}, 50);
});
it('create an area with invalid areaList', () => {
test/unit/specs/datetime-picker.spec.js
+13 -22
View File
@@ -1,15 +1,6 @@
import DatetimePicker from 'packages/datetime-picker';
import { mount } from 'avoriaz';
import { triggerTouch } from '../utils';
const dragHelper = (el, position) => {
triggerTouch(el, 'touchstart', 0, 0);
triggerTouch(el, 'touchmove', 0, position / 4);
triggerTouch(el, 'touchmove', 0, position / 3);
triggerTouch(el, 'touchmove', 0, position / 2);
triggerTouch(el, 'touchmove', 0, position);
triggerTouch(el, 'touchend', 0, position);
};
import { dragHelper } from '../utils';
const testTime = '10:00';
const testDate = new Date('2017/03/10 10:00');
@@ -64,12 +55,12 @@ describe('DatetimePicker', () => {
}
});
const [hour, minute] = wrapper.find('.van-picker-column-wrapper');
const [hour, minute] = wrapper.find('.van-picker-column ul');
dragHelper(hour, -50);
dragHelper(minute, -50);
setTimeout(() => {
expect(wrapper.vm.innerValue).to.equal('5:05');
expect(wrapper.vm.innerValue).to.equal('10:01');
done();
}, 10);
});
@@ -86,7 +77,7 @@ describe('DatetimePicker', () => {
});
setTimeout(() => {
const [year, month, day] = wrapper.find('.van-picker-column-wrapper');
const [year, month, day] = wrapper.find('.van-picker-column ul');
dragHelper(year, -50);
dragHelper(month, -50);
dragHelper(day, -50);
@@ -94,9 +85,9 @@ describe('DatetimePicker', () => {
const newYear = wrapper.vm.innerValue.getFullYear();
const newMonth = wrapper.vm.innerValue.getMonth() + 1;
const newDay = wrapper.vm.innerValue.getDate();
expect(newYear).to.equal(2022);
expect(newMonth).to.equal(8);
expect(newDay).to.equal(15);
expect(newYear).to.equal(2018);
expect(newMonth).to.equal(4);
expect(newDay).to.equal(1);
done();
}, 10);
}, 10);
@@ -114,7 +105,7 @@ describe('DatetimePicker', () => {
});
setTimeout(() => {
const [year, month, day, hour, minute] = wrapper.find('.van-picker-column-wrapper');
const [year, month, day, hour, minute] = wrapper.find('.van-picker-column ul');
dragHelper(year, -50);
dragHelper(month, -50);
dragHelper(day, -50);
@@ -126,11 +117,11 @@ describe('DatetimePicker', () => {
const newDay = wrapper.vm.innerValue.getDate();
const newHour = wrapper.vm.innerValue.getHours();
const newMinute = wrapper.vm.innerValue.getMinutes();
expect(newYear).to.equal(2022);
expect(newMonth).to.equal(8);
expect(newDay).to.equal(15);
expect(newHour).to.equal(15);
expect(newMinute).to.equal(5);
expect(newYear).to.equal(2018);
expect(newMonth).to.equal(4);
expect(newDay).to.equal(1);
expect(newHour).to.equal(11);
expect(newMinute).to.equal(1);
done();
}, 10);
}, 10);
test/unit/specs/picker.spec.js
+43 -76
View File
@@ -1,8 +1,7 @@
import Picker from 'packages/picker';
import PickerColumn from 'packages/picker/PickerColumn';
import { mount } from 'avoriaz';
const itemHeight = 44;
import { dragHelper } from '../utils';
const pickerColumns = [
{
@@ -29,7 +28,6 @@ describe('Picker', () => {
});
expect(wrapper.hasClass('van-picker')).to.be.true;
expect(wrapper.contains('.van-picker__columns--2')).to.be.true;
expect(wrapper.vm.getColumnValues(0).length).to.equal(2);
expect(wrapper.vm.getValues().length).to.equal(2);
@@ -42,7 +40,6 @@ describe('Picker', () => {
}
});
expect(wrapper.contains('.van-picker__columns--2')).to.be.true;
expect(wrapper.vm.getColumnValues(0).length).to.equal(2);
expect(wrapper.vm.getColumnValues(1).length).to.equal(6);
@@ -52,16 +49,25 @@ describe('Picker', () => {
wrapper.vm.setColumnValue(0, 'normal');
expect(wrapper.vm.getColumnValue(0)).to.equal('normal');
wrapper.vm.setColumnIndex(0, 0);
expect(wrapper.vm.getColumnValue(0)).to.equal('vip');
wrapper.vm.setColumnValue(1, '1991');
expect(wrapper.vm.getColumnValue(1)).to.equal('1991');
wrapper.vm.setColumnValues(0, ['vip', 'normal', 'other']);
expect(wrapper.vm.getColumnValues(0).length).to.equal(3);
expect(wrapper.vm.getValues().length).to.equal(2);
wrapper.vm.setValues(['vip', '1992']);
expect(wrapper.vm.getColumnValue(0)).to.equal('vip');
expect(wrapper.vm.getColumnValue(1)).to.equal('1992');
expect(wrapper.vm.getColumnIndex(0)).to.equal(0);
expect(wrapper.vm.getColumnIndex(1)).to.equal(2);
expect(wrapper.vm.getColumnIndex(2)).to.equal(undefined);
wrapper.vm.setIndexes([1, 4]);
expect(wrapper.vm.getColumnValue(0)).to.equal('normal');
expect(wrapper.vm.getColumnValue(1)).to.equal('1994');
expect(wrapper.vm.getColumnValue(2)).to.equal(undefined);
});
it('create a invalid columns picker', () => {
@@ -72,7 +78,7 @@ describe('Picker', () => {
});
expect(wrapper.hasClass('van-picker')).to.be.true;
expect(wrapper.vm.values.length).to.equal(0);
expect(wrapper.vm.currentColumns.length).to.equal(0);
});
it('set invalid index columns', () => {
@@ -99,10 +105,7 @@ describe('Picker', () => {
});
const eventStub = sinon.stub(wrapper.vm, '$emit');
const firstColumn = wrapper.find(PickerColumn)[0];
firstColumn.vm.currentValue = 'normal';
firstColumn.update();
wrapper.vm.setColumnValue(0, 'normal');
wrapper.vm.$nextTick(() => {
expect(eventStub.calledOnce).to.be.true;
expect(eventStub.calledWith('change'));
@@ -119,7 +122,7 @@ describe('Picker', () => {
expect(wrapper.hasClass('van-picker')).to.be.true;
expect(wrapper.contains('.van-picker__toolbar')).to.be.true;
expect(wrapper.vm.values.length).to.equal(0);
expect(wrapper.vm.currentColumns.length).to.equal(0);
const eventStub = sinon.stub(wrapper.vm, '$emit');
const cancelBtn = wrapper.find('.van-picker__cancel')[0];
@@ -164,25 +167,20 @@ describe('PickerColumn', () => {
wrapper = mount(PickerColumn);
expect(wrapper.hasClass('van-picker-column')).to.be.true;
expect(wrapper.vm.values.length).to.equal(0);
expect(wrapper.vm.visibleContentHeight).to.equal(itemHeight * 5);
expect(wrapper.vm.dragRange[0]).to.equal(3 * itemHeight);
expect(wrapper.vm.dragRange[1]).to.equal(2 * itemHeight);
expect(wrapper.vm.options.length).to.equal(0);
});
it('change picker-column value', (done) => {
wrapper = mount(PickerColumn, {
propsData: {
values: [1, 2, 3, 4, 5],
options: [1, 2, 3, 4, 5],
value: 1
}
});
expect(wrapper.hasClass('van-picker-column')).to.be.true;
expect(wrapper.vm.values.length).to.equal(5);
expect(wrapper.vm.options.length).to.equal(5);
wrapper.vm.value = 3;
wrapper.update();
wrapper.vm.setValue(3);
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.currentValue).to.equal(3);
done();
@@ -192,77 +190,46 @@ describe('PickerColumn', () => {
it('change picker-column values', (done) => {
wrapper = mount(PickerColumn);
expect(wrapper.hasClass('van-picker-column')).to.be.true;
expect(wrapper.vm.values.length).to.equal(0);
expect(wrapper.vm.options.length).to.equal(0);
wrapper.vm.values = [1, 2];
wrapper.update();
wrapper.vm.options = [1, 2];
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.values.length).to.equal(2);
expect(wrapper.vm.currentValues.length).to.equal(2);
expect(wrapper.vm.options.length).to.equal(2);
done();
});
});
it('create a picker test translate', () => {
it('select disabled options', () => {
wrapper = mount(PickerColumn, {
propsData: {
values: [1, 2, 3, 4, 5],
value: 1
options: [
{ text: '1', disabled: true },
{ text: '2' },
{ text: '3', disabled: true },
{ text: '4', disabled: true }
],
valueKey: 'text'
}
});
expect(wrapper.vm.currentIndex).to.equal(1);
expect(wrapper.vm.values.length).to.equal(5);
expect(wrapper.vm.value2Translate(2)).to.equal((1 - Math.floor(5 / 2)) * (-itemHeight));
expect(wrapper.vm.translate2Value(0)).to.equal(3);
wrapper.vm.setIndex(3);
expect(wrapper.vm.currentIndex).to.equal(1);
});
it('test draggable', done => {
it('drag options', () => {
wrapper = mount(PickerColumn, {
propsData: {
values: [1, 2, 3, 4, 5]
},
attachToDocument: true
options: pickerColumns[1].values
}
});
expect(wrapper.vm.currentIndex).to.equal(0);
expect(wrapper.vm.values.length).to.equal(5);
const column = wrapper.find('.van-picker-column ul')[0];
dragHelper(column, 0);
expect(wrapper.vm.currentIndex).to.equal(0);
setTimeout(() => {
const nColumn = wrapper.find('.van-picker-column-wrapper')[0];
const eventMouseObject = new window.Event('mousedown');
eventMouseObject.pageY = 0;
nColumn.element.dispatchEvent(eventMouseObject);
const eventTouchObject = new window.Event('touchstart');
eventTouchObject.changedTouches = [{ pageY: 0 }];
nColumn.element.dispatchEvent(eventTouchObject);
}, 500);
setTimeout(() => {
const nColumn = wrapper.find('.van-picker-column-wrapper')[0];
const eventMouseMoveObject = new window.Event('mousemove');
eventMouseMoveObject.pageY = 40;
document.dispatchEvent(eventMouseMoveObject);
const eventObject = new window.Event('touchmove');
eventObject.changedTouches = [{ pageY: 40 }];
nColumn.element.dispatchEvent(eventObject);
// 结束滚动
const eventMouseUpObject = new window.Event('mouseup');
document.dispatchEvent(eventMouseUpObject);
const eventEndObject = new window.Event('touchend');
eventEndObject.changedTouches = [{}];
nColumn.element.dispatchEvent(eventEndObject);
}, 1000);
setTimeout(() => {
const nItem = wrapper.find('.van-picker-column__item');
expect(nItem[1].hasClass('van-picker-column__item--selected')).to.be.true;
done();
}, 1200);
dragHelper(column, -100);
expect(wrapper.vm.currentIndex).to.equal(2);
});
});
test/unit/utils.js
+9
View File
@@ -73,3 +73,12 @@ export function triggerTouch(wrapper, eventName, x, y) {
el.dispatchEvent(event);
}
export function dragHelper(el, position) {
triggerTouch(el, 'touchstart', 0, 0);
triggerTouch(el, 'touchmove', 0, position / 4);
triggerTouch(el, 'touchmove', 0, position / 3);
triggerTouch(el, 'touchmove', 0, position / 2);
triggerTouch(el, 'touchmove', 0, position);
triggerTouch(el, 'touchend', 0, position);
}