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/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);
});
});