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

[improvement] NumberKeyboard: improve click experience (#4116)

Browse Source
This commit is contained in:
neverland
2019-08-14 11:42:41 +08:00
committed by GitHub
parent 2843352adb
commit 468fec2d86
3 changed files with 67 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/number-keyboard/test/__snapshots__/index.spec.js.snap
+18
View File
@@ -12,6 +12,24 @@ exports[`focus on key 2`] = `
</div>
`;
exports[`move and blur key 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`move and blur key 2`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`move and blur key 3`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`render title 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>
src/number-keyboard/test/index.spec.js
+29 -21
View File
@@ -1,6 +1,11 @@
import NumberKeyboard from '..';
import { mount, trigger } from '../../../test/utils';
function clickKey(key) {
trigger(key, 'touchstart');
trigger(key, 'touchend');
}
test('click number key', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
@@ -9,10 +14,7 @@ test('click number key', () => {
}
});
wrapper
.findAll('.van-key')
.at(0)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(0));
expect(wrapper.emitted('input')[0][0]).toEqual(1);
wrapper.destroy();
@@ -20,19 +22,14 @@ test('click number key', () => {
it('click delete key', () => {
const wrapper = mount(NumberKeyboard);
wrapper
.findAll('.van-key')
.at(11)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(11));
expect(wrapper.emitted('delete')).toBeTruthy();
});
it('click empty key', () => {
const wrapper = mount(NumberKeyboard);
wrapper
.findAll('.van-key')
.at(9)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(9));
expect(wrapper.emitted('input')).toBeFalsy();
});
@@ -44,10 +41,7 @@ test('click close button', () => {
}
});
wrapper
.findAll('.van-key')
.at(12)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(12));
expect(wrapper.emitted('close')).toBeTruthy();
});
@@ -127,6 +121,20 @@ test('focus on key', () => {
expect(wrapper).toMatchSnapshot();
});
test('move and blur key', () => {
const wrapper = mount(NumberKeyboard);
const key = wrapper.find('.van-key');
trigger(key, 'touchstart');
expect(wrapper).toMatchSnapshot();
trigger(key, 'touchmove', 0, 0);
expect(wrapper).toMatchSnapshot();
trigger(key, 'touchmove', 100, 0);
expect(wrapper).toMatchSnapshot();
trigger(key, 'touchend');
expect(wrapper.emitted('input')).toBeFalsy();
});
test('bind value', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
@@ -140,12 +148,12 @@ test('bind value', () => {
});
const keys = wrapper.findAll('.van-key');
keys.at(0).trigger('click');
keys.at(1).trigger('click');
clickKey(keys.at(0));
clickKey(keys.at(1));
expect(wrapper.vm.value).toEqual('12');
keys.at(11).trigger('click');
clickKey(keys.at(11));
expect(wrapper.vm.value).toEqual('1');
});
@@ -165,8 +173,8 @@ test('maxlength', () => {
});
const keys = wrapper.findAll('.van-key');
keys.at(0).trigger('click');
keys.at(1).trigger('click');
clickKey(keys.at(0));
clickKey(keys.at(1));
expect(wrapper.vm.value).toEqual('1');
expect(onInput).toHaveBeenCalledTimes(1);