diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js index 823b0d579..51d52eea3 100644 --- a/src/number-keyboard/index.js +++ b/src/number-keyboard/index.js @@ -122,6 +122,7 @@ export default createComponent({ }; const onAnimationEnd = () => { + console.log('onAnimationEnd'); emit(props.show ? 'show' : 'hide'); }; diff --git a/src/number-keyboard/test/__snapshots__/index.legacy.js.snap b/src/number-keyboard/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index ad366e2b4..000000000 --- a/src/number-keyboard/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,442 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`extra-key prop 1`] = ` - -`; - -exports[`extra-key slot 1`] = ` - -`; - -exports[`focus on key 1`] = ` - -`; - -exports[`focus on key 2`] = ` - -`; - -exports[`move and blur key 1`] = ` - -`; - -exports[`move and blur key 2`] = ` - -`; - -exports[`move and blur key 3`] = ` - -`; - -exports[`render title 1`] = ` - -`; - -exports[`title-left slot 1`] = ` - -`; diff --git a/src/number-keyboard/test/__snapshots__/index.spec.js.snap b/src/number-keyboard/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..36bedb46c --- /dev/null +++ b/src/number-keyboard/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render extra key correctly when using extra-key prop 1`] = ` +
+ foo +
+`; + +exports[`should render extra-key slot correctly 1`] = ` +
+ Custom Extra Key +
+`; + +exports[`should render title and close button correctly 1`] = ` +
+

+ Title +

+ +
+`; + +exports[`should render title-left slot correctly 1`] = ` +
+ + Custom Title Left + +
+`; diff --git a/src/number-keyboard/test/index.legacy.js b/src/number-keyboard/test/index.legacy.js deleted file mode 100644 index 80b299be3..000000000 --- a/src/number-keyboard/test/index.legacy.js +++ /dev/null @@ -1,259 +0,0 @@ -import NumberKeyboard from '..'; -import { mount, trigger } from '../../../test'; - -function clickKey(key) { - trigger(key, 'touchstart'); - trigger(key, 'touchend'); -} - -test('click number key', () => { - const wrapper = mount(NumberKeyboard, { - props: { - theme: 'custom', - closeButtonText: 'close', - }, - }); - - clickKey(wrapper.findAll('.van-key')[0]); - expect(wrapper.emitted('input')[0][0]).toEqual(1); - - wrapper.unmount(); -}); - -test('click delete key', () => { - const wrapper = mount(NumberKeyboard); - - clickKey(wrapper.findAll('.van-key').at(11)); - expect(wrapper.emitted('delete')).toBeTruthy(); -}); - -test('click collapse key', () => { - const wrapper = mount(NumberKeyboard); - clickKey(wrapper.findAll('.van-key').at(9)); - expect(wrapper.emitted('input')).toBeFalsy(); - expect(wrapper.emitted('blur')).toBeFalsy(); - - wrapper.setProps({ show: true }); - clickKey(wrapper.findAll('.van-key').at(9)); - expect(wrapper.emitted('blur')).toBeTruthy(); -}); - -test('click close button', () => { - const wrapper = mount(NumberKeyboard, { - props: { - theme: 'custom', - closeButtonText: 'close', - }, - }); - - clickKey(wrapper.findAll('.van-key').at(12)); - expect(wrapper.emitted('close')).toBeTruthy(); -}); - -test('listen to show/hide event when has transtion', () => { - const wrapper = mount(NumberKeyboard); - wrapper.vm.show = true; - wrapper.trigger('animationend'); - wrapper.vm.show = false; - wrapper.trigger('animationend'); - expect(wrapper.emitted('show')).toBeTruthy(); - expect(wrapper.emitted('hide')).toBeTruthy(); -}); - -test('listen to show event when no transtion', () => { - const wrapper = mount(NumberKeyboard, { - props: { - transition: false, - }, - }); - wrapper.vm.show = true; - wrapper.vm.show = false; - expect(wrapper.emitted('show')).toBeTruthy(); - expect(wrapper.emitted('hide')).toBeTruthy(); -}); - -test('render title', () => { - const wrapper = mount(NumberKeyboard, { - props: { - title: 'Title', - closeButtonText: 'Close', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('title-left slot', () => { - const wrapper = mount(NumberKeyboard, { - slots: { - 'title-left': () => 'Custom Title Left', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('extra-key prop', () => { - const wrapper = mount(NumberKeyboard, { - props: { - extraKey: 'foo', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('extra-key slot', () => { - const wrapper = mount(NumberKeyboard, { - slots: { - 'extra-key': () => 'Custom Extra Key', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('hideOnClickOutside', () => { - const wrapper = mount(NumberKeyboard, { - props: { - show: true, - }, - }); - - trigger(document.body, 'touchstart'); - expect(wrapper.emitted('blur')).toBeTruthy(); -}); - -test('disable hideOnClickOutside', () => { - const wrapper = mount(NumberKeyboard, { - props: { - show: true, - hideOnClickOutside: false, - }, - }); - - trigger(document.body, 'touchstart'); - expect(wrapper.emitted('blur')).toBeFalsy(); -}); - -test('focus on key', () => { - const wrapper = mount(NumberKeyboard); - - const key = wrapper.find('.van-key'); - trigger(key, 'touchstart'); - expect(wrapper.html()).toMatchSnapshot(); - trigger(key, 'touchend'); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('move and blur key', () => { - const wrapper = mount(NumberKeyboard); - - const key = wrapper.find('.van-key'); - trigger(key, 'touchstart'); - expect(wrapper.html()).toMatchSnapshot(); - trigger(key, 'touchmove', 0, 0); - expect(wrapper.html()).toMatchSnapshot(); - trigger(key, 'touchmove', 100, 0); - expect(wrapper.html()).toMatchSnapshot(); - trigger(key, 'touchend'); - expect(wrapper.emitted('input')).toBeFalsy(); -}); - -test('bind value', () => { - const wrapper = mount(NumberKeyboard, { - props: { - value: '', - }, - listeners: { - 'update:value': (value) => { - wrapper.setProps({ value }); - }, - }, - }); - - const keys = wrapper.findAll('.van-key'); - clickKey(keys[0]); - clickKey(keys[1]); - - expect(wrapper.vm.value).toEqual('12'); - - clickKey(keys.at(11)); - expect(wrapper.vm.value).toEqual('1'); -}); - -test('maxlength', () => { - const onInput = jest.fn(); - const wrapper = mount(NumberKeyboard, { - props: { - value: '', - maxlength: 1, - }, - listeners: { - input: onInput, - 'update:value': (value) => { - wrapper.setProps({ value }); - }, - }, - }); - - const keys = wrapper.findAll('.van-key'); - clickKey(keys[0]); - clickKey(keys[1]); - - expect(wrapper.vm.value).toEqual('1'); - expect(onInput).toHaveBeenCalledTimes(1); -}); - -test('show-delete-key prop', () => { - const wrapper = mount(NumberKeyboard, { - props: { - showDeleteKey: true, - }, - }); - - expect(wrapper.contains('.van-key--delete')).toBeTruthy(); - - wrapper.setData({ showDeleteKey: false }); - expect(wrapper.contains('.van-key--delete')).toBeFalsy(); - - wrapper.setData({ - theme: 'custom', - showDeleteKey: true, - }); - expect(wrapper.contains('.van-key--delete')).toBeTruthy(); - - wrapper.setData({ showDeleteKey: false }); - expect(wrapper.contains('.van-key--delete')).toBeFalsy(); -}); - -test('close-button-loading prop', () => { - const wrapper = mount(NumberKeyboard, { - props: { - show: true, - theme: 'custom', - closeButtonLoading: true, - }, - }); - - expect(wrapper.contains('.van-key__loading-icon')).toBeTruthy(); -}); -test('random-key-order prop', () => { - const wrapper = mount(NumberKeyboard, { - propsData: { - show: true, - randomKeyOrder: true, - }, - }); - - const keys = []; - const clickKeys = []; - for (let i = 0; i < 9; i++) { - keys.push(i + 1); - - clickKey(wrapper.findAll('.van-key').at(i)); - clickKeys.push(wrapper.emitted('input')[i][0]); - } - - expect(keys.every((v, k) => keys[k] === clickKeys[k])).toEqual(false); -}); diff --git a/src/number-keyboard/test/index.spec.js b/src/number-keyboard/test/index.spec.js new file mode 100644 index 000000000..406493276 --- /dev/null +++ b/src/number-keyboard/test/index.spec.js @@ -0,0 +1,232 @@ +import NumberKeyboard from '..'; +import { mount, trigger, later } from '../../../test'; + +function clickKey(key) { + trigger(key, 'touchstart'); + trigger(key, 'touchend'); +} + +test('should emit input event after clicking number key', () => { + const wrapper = mount(NumberKeyboard); + clickKey(wrapper.findAll('.van-key')[0]); + expect(wrapper.emitted('input')[0][0]).toEqual(1); + wrapper.unmount(); +}); + +test('should emit delete event after clicking delete key', () => { + const wrapper = mount(NumberKeyboard); + clickKey(wrapper.findAll('.van-key')[11]); + expect(wrapper.emitted('delete')).toBeTruthy(); +}); + +test('should emit blur event after clicking collapse key', () => { + const wrapper = mount(NumberKeyboard, { + props: { + show: true, + }, + }); + clickKey(wrapper.findAll('.van-key')[9]); + expect(wrapper.emitted('blur')).toBeTruthy(); +}); + +test('should should emit blur event when hidden', () => { + const wrapper = mount(NumberKeyboard); + clickKey(wrapper.findAll('.van-key')[9]); + expect(wrapper.emitted('input')).toBeFalsy(); + expect(wrapper.emitted('blur')).toBeFalsy(); +}); + +test('should emit close event after clicking close button', () => { + const wrapper = mount(NumberKeyboard, { + props: { + theme: 'custom', + }, + }); + clickKey(wrapper.findAll('.van-key')[12]); + expect(wrapper.emitted('close')).toBeTruthy(); +}); + +test('should emit show/blur event when visibility changed and transition is disabled', async () => { + const wrapper = mount(NumberKeyboard, { + props: { + transition: false, + }, + }); + + wrapper.setProps({ show: true }); + await later(); + expect(wrapper.emitted('show')).toBeTruthy(); + wrapper.setProps({ show: false }); + await later(); + expect(wrapper.emitted('hide')).toBeTruthy(); +}); + +test('should render title and close button correctly', () => { + const wrapper = mount(NumberKeyboard, { + props: { + title: 'Title', + closeButtonText: 'Close', + }, + }); + + expect(wrapper.find('.van-number-keyboard__header').html()).toMatchSnapshot(); +}); + +test('should render title-left slot correctly', () => { + const wrapper = mount(NumberKeyboard, { + slots: { + 'title-left': () => 'Custom Title Left', + }, + }); + + expect(wrapper.find('.van-number-keyboard__header').html()).toMatchSnapshot(); +}); + +test('should render extra key correctly when using extra-key prop', () => { + const wrapper = mount(NumberKeyboard, { + props: { + extraKey: 'foo', + }, + }); + + expect(wrapper.findAll('.van-key')[9].html()).toMatchSnapshot(); +}); + +test('should render extra-key slot correctly', () => { + const wrapper = mount(NumberKeyboard, { + slots: { + 'extra-key': () => 'Custom Extra Key', + }, + }); + + expect(wrapper.findAll('.van-key')[9].html()).toMatchSnapshot(); +}); + +test('should emit blur event after clicking outside', () => { + const wrapper = mount(NumberKeyboard, { + props: { + show: true, + }, + }); + + trigger(document.body, 'touchstart'); + expect(wrapper.emitted('blur')).toBeTruthy(); +}); + +test('should not emit blur event after clicking outside when hideOnClickOutside is false', () => { + const wrapper = mount(NumberKeyboard, { + props: { + show: true, + hideOnClickOutside: false, + }, + }); + + trigger(document.body, 'touchstart'); + expect(wrapper.emitted('blur')).toBeFalsy(); +}); + +test('should add "van-key--active" className to key when focused', async () => { + const wrapper = mount(NumberKeyboard); + const key = wrapper.find('.van-key'); + + await trigger(key, 'touchstart'); + expect(key.classes()).toContain('van-key--active'); + + await trigger(key, 'touchend'); + expect(key.classes()).not.toContain('van-key--active'); + + expect(wrapper.emitted('input')).toBeTruthy(); +}); + +test('should remove "van-key--active" className from key when touch moved', async () => { + const wrapper = mount(NumberKeyboard); + const key = wrapper.find('.van-key'); + + await trigger(key, 'touchstart'); + expect(key.classes()).toContain('van-key--active'); + + await trigger(key, 'touchmove', 0, 0); + expect(key.classes()).toContain('van-key--active'); + + await trigger(key, 'touchmove', 100, 0); + expect(key.classes()).not.toContain('van-key--active'); + + await trigger(key, 'touchend'); + expect(wrapper.emitted('input')).toBeFalsy(); +}); + +test('should emit "update:modelValue" event after clicking key', () => { + const wrapper = mount(NumberKeyboard); + const keys = wrapper.findAll('.van-key'); + + clickKey(keys[0]); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1'); + + clickKey(keys[1]); + expect(wrapper.emitted('update:modelValue')[1][0]).toEqual('2'); +}); + +test('should limit max length of modelValue when using maxlength prop', async () => { + const onInput = jest.fn(); + const wrapper = mount(NumberKeyboard, { + props: { + onInput, + maxlength: 1, + }, + }); + + const keys = wrapper.findAll('.van-key'); + + clickKey(keys[0]); + expect(onInput).toHaveBeenCalledTimes(1); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1'); + await wrapper.setProps({ modelValue: '1' }); + + clickKey(keys[1]); + expect(onInput).toHaveBeenCalledTimes(1); + expect(wrapper.emitted('update:modelValue').length).toEqual(1); +}); + +test('should not render delete key when show-delete-key prop is false', async () => { + const wrapper = mount(NumberKeyboard, { + props: { + showDeleteKey: true, + }, + }); + expect(wrapper.find('.van-key--delete').exists()).toBeTruthy(); + + await wrapper.setProps({ showDeleteKey: false }); + expect(wrapper.find('.van-key--delete').exists()).toBeFalsy(); +}); + +test('should render loading icon when using close-button-loading prop', () => { + const wrapper = mount(NumberKeyboard, { + props: { + show: true, + theme: 'custom', + closeButtonLoading: true, + }, + }); + + expect(wrapper.find('.van-key__loading-icon').exists()).toBeTruthy(); +}); + +test('should shuffle key order when using random-key-order prop', () => { + const wrapper = mount(NumberKeyboard, { + propsData: { + show: true, + randomKeyOrder: true, + }, + }); + + const keys = []; + const clickKeys = []; + + for (let i = 0; i < 9; i++) { + keys.push(i + 1); + clickKey(wrapper.findAll('.van-key')[i]); + clickKeys.push(wrapper.emitted('input')[i][0]); + } + + expect(keys.every((v, k) => keys[k] === clickKeys[k])).toEqual(false); +});