index.spec.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import NumberKeyboard from '..';
  2. import { mount } from '../../../test/utils';
  3. function mockTouch(wrapper, event, keyIndex) {
  4. const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
  5. const touchStart = document.createEvent('CustomEvent');
  6. touchStart.initCustomEvent(event, true, true, {});
  7. key.dispatchEvent(touchStart);
  8. }
  9. test('click number key', () => {
  10. const wrapper = mount(NumberKeyboard, {
  11. propsData: {
  12. theme: 'custom',
  13. closeButtonText: 'close'
  14. }
  15. });
  16. mockTouch(wrapper, 'touchstart', 10);
  17. mockTouch(wrapper, 'touchstart', 0);
  18. mockTouch(wrapper, 'touchend', 0);
  19. wrapper.destroy();
  20. expect(wrapper.emitted('input')[0][0]).toEqual(1);
  21. });
  22. it('click delete key', () => {
  23. const wrapper = mount(NumberKeyboard);
  24. mockTouch(wrapper, 'touchstart', 11);
  25. expect(wrapper.emitted('delete')).toBeTruthy();
  26. });
  27. test('click close button', () => {
  28. const wrapper = mount(NumberKeyboard, {
  29. propsData: {
  30. theme: 'custom',
  31. closeButtonText: 'close'
  32. }
  33. });
  34. mockTouch(wrapper, 'touchstart', 12);
  35. expect(wrapper.emitted('close')).toBeTruthy();
  36. });
  37. test('keey-alive live cycle', () => {
  38. const wrapper = mount({
  39. template: `
  40. <keep-alive>
  41. <number-keyboard v-if="show" />
  42. </keep-alive>
  43. `,
  44. props: ['show'],
  45. components: { NumberKeyboard }
  46. }, {
  47. attachToDocument: true,
  48. propsData: {
  49. show: true
  50. }
  51. });
  52. expect(wrapper.vm.$el).toBeTruthy();
  53. wrapper.vm.show = false;
  54. expect(wrapper.vm.el).toBeFalsy();
  55. });
  56. test('listen to show/hide event when has transtion', () => {
  57. const wrapper = mount(NumberKeyboard);
  58. wrapper.vm.show = true;
  59. wrapper.trigger('animationend');
  60. wrapper.vm.show = false;
  61. wrapper.trigger('animationend');
  62. expect(wrapper.emitted('show')).toBeTruthy();
  63. expect(wrapper.emitted('hide')).toBeTruthy();
  64. });
  65. test('listen to show event when no transtion', () => {
  66. const wrapper = mount(NumberKeyboard, {
  67. propsData: {
  68. transition: false
  69. }
  70. });
  71. wrapper.vm.show = true;
  72. wrapper.vm.show = false;
  73. expect(wrapper.emitted('show')).toBeTruthy();
  74. expect(wrapper.emitted('hide')).toBeTruthy();
  75. });
  76. test('title-left slot', () => {
  77. const wrapper = mount({
  78. template: `
  79. <number-keyboard show>
  80. <template v-slot:title-left>Custom Title Left</template>
  81. </number-keyboard>
  82. `
  83. }, {
  84. components: {
  85. NumberKeyboard
  86. }
  87. });
  88. expect(wrapper).toMatchSnapshot();
  89. });