From 81f15e868a279da122416e90e86a96f78a8cd453 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 28 Dec 2020 20:58:09 +0800 Subject: [PATCH] test(Stepper): update test cases --- .../test/__snapshots__/index.legacy.js.snap | 13 - .../test/__snapshots__/index.spec.js.snap | 47 ++ src/stepper/test/index.legacy.js | 415 ----------------- src/stepper/test/index.spec.js | 424 ++++++++++++++++++ 4 files changed, 471 insertions(+), 428 deletions(-) delete mode 100644 src/stepper/test/__snapshots__/index.legacy.js.snap create mode 100644 src/stepper/test/__snapshots__/index.spec.js.snap delete mode 100644 src/stepper/test/index.legacy.js create mode 100644 src/stepper/test/index.spec.js diff --git a/src/stepper/test/__snapshots__/index.legacy.js.snap b/src/stepper/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 00ace123a..000000000 --- a/src/stepper/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`button-size prop 1`] = `
`; - -exports[`disable stepper input 1`] = `
`; - -exports[`disabled stepper 1`] = `
`; - -exports[`input-width prop 1`] = `
`; - -exports[`placeholder prop 1`] = ``; - -exports[`show-plus & show-minus props 1`] = `
`; diff --git a/src/stepper/test/__snapshots__/index.spec.js.snap b/src/stepper/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..f3d38fd37 --- /dev/null +++ b/src/stepper/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should disable buttons and input when using disabled prop 1`] = ` +
+ + + +
+`; + +exports[`should update input height and button size when using button-size prop 1`] = ` +
+ + + +
+`; diff --git a/src/stepper/test/index.legacy.js b/src/stepper/test/index.legacy.js deleted file mode 100644 index 41d22efa6..000000000 --- a/src/stepper/test/index.legacy.js +++ /dev/null @@ -1,415 +0,0 @@ -import Stepper from '..'; -import { mount, later } from '../../../test'; - -test('disabled stepper', () => { - const wrapper = mount(Stepper, { - props: { - disabled: true, - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('disable stepper input', () => { - const wrapper = mount(Stepper, { - props: { - disableInput: true, - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('disable button', async () => { - const wrapper = mount(Stepper, { - props: { - value: 5, - }, - }); - - const plus = wrapper.find('.van-stepper__plus'); - const minus = wrapper.find('.van-stepper__minus'); - - minus.trigger('click'); - - expect(wrapper.emitted('overlimit')).toBeFalsy(); - expect(wrapper.emitted('minus')).toBeTruthy(); - expect(wrapper.emitted('change')[0]).toEqual([4, { name: '' }]); - - wrapper.setProps({ - disablePlus: true, - disableMinus: true, - }); - - await later(); - - minus.trigger('click'); - expect(wrapper.emitted('overlimit')[0][0]).toBe('minus'); - plus.trigger('click'); - expect(wrapper.emitted('overlimit')[1][0]).toBe('plus'); -}); - -test('click button', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - max: 2, - }, - }); - - const plus = wrapper.find('.van-stepper__plus'); - const minus = wrapper.find('.van-stepper__minus'); - - plus.trigger('click'); - plus.trigger('click'); - minus.trigger('click'); - minus.trigger('click'); - - expect(wrapper.emitted('input')).toEqual([[2], [1]]); - expect(wrapper.emitted('overlimit')).toEqual([['plus'], ['minus']]); -}); - -test('long press', async () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - }, - }); - - const plus = wrapper.find('.van-stepper__plus'); - - plus.trigger('touchstart'); - plus.trigger('touchend'); - plus.trigger('click'); - - expect(wrapper.emitted('input')[0][0]).toEqual(2); - - plus.trigger('touchstart'); - await later(1000); - plus.trigger('touchend'); - expect(wrapper.emitted('input')).toEqual([[2], [3], [4]]); -}); - -test('disable long press', async () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - longPress: false, - }, - }); - - const plus = wrapper.find('.van-stepper__plus'); - plus.trigger('touchstart'); - await later(800); - plus.trigger('touchend'); - - expect(wrapper.emitted('input')).toBeFalsy(); -}); - -test('filter value during user input', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - }, - }); - - const input = wrapper.find('.van-stepper__input'); - input.element.value = ''; - input.trigger('input'); - expect(wrapper.emitted('input')[0][0]).toEqual(''); - - input.element.value = 'a'; - input.trigger('input'); - expect(input.element.value).toEqual(''); - expect(wrapper.emitted('input')[1]).toBeFalsy(); - - input.element.value = '2'; - input.trigger('input'); - expect(input.element.value).toEqual('2'); - expect(wrapper.emitted('input')[1][0]).toEqual(2); -}); - -test('shoud watch value and format it', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - max: 5, - }, - }); - - wrapper.setData({ value: 10 }); - expect(wrapper.emitted('input')[0][0]).toEqual(5); -}); - -test('only allow interger', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - integer: true, - }, - }); - - const input = wrapper.find('input'); - input.element.value = '2.2'; - input.trigger('input'); - input.trigger('blur'); - - expect(wrapper.emitted('input')[0][0]).toEqual(2); -}); - -test('input invalid value and blur', () => { - const wrapper = mount(Stepper, { - props: { - value: '', - }, - }); - - const input = wrapper.find('input'); - input.element.value = '.'; - input.trigger('input'); - input.trigger('blur'); - - expect(wrapper.emitted('input').pop()).toEqual([1]); -}); - -test('stepper focus', () => { - const wrapper = mount(Stepper, { - props: { - disableInput: true, - }, - }); - const input = wrapper.find('input'); - - input.trigger('focus'); - expect(wrapper.emitted('focus')).toBeFalsy(); - - wrapper.setProps({ disableInput: false }); - input.trigger('focus'); - expect(wrapper.emitted('focus')).toBeTruthy(); -}); - -test('stepper blur', () => { - const wrapper = mount(Stepper, { - props: { - value: 5, - min: 3, - }, - }); - - wrapper.vm.$on('input', (value) => { - wrapper.setProps({ value }); - }); - - const input = wrapper.find('input'); - input.element.value = ''; - input.trigger('input'); - expect(wrapper.emitted('input')[0][0]).toEqual(''); - - input.trigger('blur'); - expect(wrapper.emitted('input')[1][0]).toEqual(3); - expect(wrapper.emitted('blur')).toBeTruthy(); -}); - -test('input-width prop', () => { - const wrapper = mount(Stepper, { - props: { - inputWidth: '10rem', - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('button-size prop', () => { - const wrapper = mount(Stepper, { - props: { - buttonSize: '2rem', - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('async-change prop', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - asyncChange: true, - }, - }); - - const plus = wrapper.find('.van-stepper__plus'); - plus.trigger('click'); - - expect(wrapper.emitted('input')[0][0]).toEqual(2); - expect(wrapper.emitted('change')[0][0]).toEqual(2); - - const input = wrapper.find('input'); - input.element.value = '3'; - input.trigger('input'); - - expect(wrapper.emitted('input')[1][0]).toEqual(3); - expect(wrapper.emitted('change')[1][0]).toEqual(3); -}); - -test('min value is 0', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - min: 0, - }, - }); - - const input = wrapper.find('input'); - input.element.value = ''; - input.trigger('input'); - input.trigger('blur'); - - expect(input.element.value).toEqual('0'); -}); - -test('show-plus & show-minus props', () => { - const wrapper = mount(Stepper, { - props: { - showPlus: false, - showMinus: false, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('should hide input when show-input prop is false', () => { - const wrapper = mount(Stepper, { - propsData: { - showInput: false, - }, - }); - - expect(wrapper.find('input').element.style.display).toEqual('none'); -}); - -test('decimal-length prop', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - step: 0.2, - decimalLength: 2, - }, - }); - - expect(wrapper.emitted('input')[0][0]).toEqual('1.00'); - - const plus = wrapper.find('.van-stepper__plus'); - plus.trigger('click'); - expect(wrapper.emitted('input')[1][0]).toEqual('1.20'); -}); - -test('should limit decimal-length when input', () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - step: 0.2, - decimalLength: 1, - }, - }); - - const input = wrapper.find('input'); - input.element.value = '1.25'; - input.trigger('input'); - - expect(input.element.value).toEqual('1.2'); -}); - -test('name prop', () => { - const wrapper = mount(Stepper); - - const plus = wrapper.find('.van-stepper__plus'); - - plus.trigger('click'); - expect(wrapper.emitted('change')[0][1]).toEqual({ name: '' }); - - wrapper.setProps({ name: 'name' }); - plus.trigger('click'); - expect(wrapper.emitted('change')[1][1]).toEqual({ name: 'name' }); -}); - -test('change min and max', async () => { - const wrapper = mount(Stepper, { - props: { - value: 1, - }, - }); - - wrapper.setProps({ - min: 10, - }); - - await later(); - - expect(wrapper.emitted('input')[0][0]).toEqual(10); - - wrapper.setProps({ - min: 3, - max: 8, - }); - - await later(); - - expect(wrapper.emitted('input')[1][0]).toEqual(8); -}); - -test('change decimal-length', async () => { - const wrapper = mount(Stepper, { - props: { - value: 1.33, - }, - }); - - wrapper.setProps({ - decimalLength: 1, - }); - - await later(); - - expect(wrapper.emitted('input')[0][0]).toEqual('1.3'); -}); - -test('change integer', async () => { - const wrapper = mount(Stepper, { - props: { - value: 1.33, - }, - }); - - wrapper.setProps({ - integer: true, - }); - - await later(); - - expect(wrapper.emitted('input')[0][0]).toEqual(1); -}); - -test('placeholder prop', () => { - const wrapper = mount(Stepper, { - props: { - placeholder: 'foo', - }, - }); - expect(wrapper.find('.van-stepper__input')).toMatchSnapshot(); -}); - -test('allow-empty prop', () => { - const wrapper = mount(Stepper, { - props: { - value: '', - allowEmpty: true, - }, - }); - - const input = wrapper.find('input'); - input.trigger('blur'); - expect(wrapper.emitted('input')).toBeFalsy(); - - wrapper.setProps({ allowEmpty: false }); - input.trigger('blur'); - expect(wrapper.emitted('input')[0][0]).toEqual(1); -}); diff --git a/src/stepper/test/index.spec.js b/src/stepper/test/index.spec.js new file mode 100644 index 000000000..2e36015a0 --- /dev/null +++ b/src/stepper/test/index.spec.js @@ -0,0 +1,424 @@ +import Stepper from '..'; +import { mount, later } from '../../../test'; + +test('should disable buttons and input when using disabled prop', () => { + const wrapper = mount(Stepper, { + props: { + disabled: true, + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should make input readonly when using disable-input prop', () => { + const wrapper = mount(Stepper, { + props: { + disableInput: true, + }, + }); + expect(wrapper.find('input').element.hasAttribute('readonly')).toBeTruthy(); +}); + +test('should emit minus event when clicking the minus button', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 2, + }, + }); + const minus = wrapper.find('.van-stepper__minus'); + await minus.trigger('click'); + + expect(wrapper.emitted('overlimit')).toBeFalsy(); + expect(wrapper.emitted('minus')).toBeTruthy(); + expect(wrapper.emitted('change')[0]).toEqual([1, { name: '' }]); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(1); +}); + +test('should emit plus event when clicking the plus button', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 2, + }, + }); + const plus = wrapper.find('.van-stepper__plus'); + await plus.trigger('click'); + + expect(wrapper.emitted('overlimit')).toBeFalsy(); + expect(wrapper.emitted('plus')).toBeTruthy(); + expect(wrapper.emitted('change')[0]).toEqual([3, { name: '' }]); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(3); +}); + +test('should emit overlimit event when clicking disabled buttons', async () => { + const wrapper = mount(Stepper, { + props: { + max: 1, + modelValue: 1, + }, + }); + + const minus = wrapper.find('.van-stepper__minus'); + await minus.trigger('click'); + expect(wrapper.emitted('overlimit')[0][0]).toEqual('minus'); + + const plus = wrapper.find('.van-stepper__plus'); + await plus.trigger('click'); + expect(wrapper.emitted('overlimit')[1][0]).toEqual('plus'); +}); + +test('should disable plus button when disable-plus prop is true', async () => { + const wrapper = mount(Stepper); + const plus = wrapper.find('.van-stepper__plus').element; + expect(plus.classList.contains('van-stepper__plus--disabled')).toBeFalsy(); + await wrapper.setProps({ disablePlus: true }); + expect(plus.classList.contains('van-stepper__plus--disabled')).toBeTruthy(); +}); + +test('should disable minus button when disable-minus prop is true', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 2, + }, + }); + const minus = wrapper.find('.van-stepper__minus').element; + expect(minus.classList.contains('van-stepper__minus--disabled')).toBeFalsy(); + await wrapper.setProps({ disableMinus: true }); + expect(minus.classList.contains('van-stepper__minus--disabled')).toBeTruthy(); +}); + +test('should limit max value when using max prop', async () => { + const wrapper = mount(Stepper, { + props: { + max: 2, + modelValue: 1, + }, + }); + + const plus = wrapper.find('.van-stepper__plus'); + const minus = wrapper.find('.van-stepper__minus'); + + await plus.trigger('click'); + await plus.trigger('click'); + await minus.trigger('click'); + await minus.trigger('click'); + + expect(wrapper.emitted('update:modelValue')).toEqual([[2], [1]]); + expect(wrapper.emitted('overlimit')).toEqual([['plus'], ['minus']]); +}); + +test('should update value after long pressing', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 1, + }, + }); + + const plus = wrapper.find('.van-stepper__plus'); + + await plus.trigger('touchstart'); + await plus.trigger('touchend'); + await plus.trigger('click'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(2); + + await plus.trigger('touchstart'); + await later(1000); + await plus.trigger('touchend'); + expect(wrapper.emitted('update:modelValue')).toEqual([[2], [3], [4]]); +}); + +test('should allow to disable long press', async () => { + const wrapper = mount(Stepper, { + props: { + longPress: false, + modelValue: 1, + }, + }); + + const plus = wrapper.find('.van-stepper__plus'); + await plus.trigger('touchstart'); + await later(800); + await plus.trigger('touchend'); + + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); +}); + +test('should filter invalid value during user input', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 1, + }, + }); + + const input = wrapper.find('.van-stepper__input'); + input.element.value = ''; + await input.trigger('input'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(''); + + input.element.value = 'a'; + await input.trigger('input'); + expect(input.element.value).toEqual(''); + expect(wrapper.emitted('update:modelValue')[1]).toBeFalsy(); + + input.element.value = '2'; + await input.trigger('input'); + expect(input.element.value).toEqual('2'); + expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(2); +}); + +test('shoud watch modelValue and format it', async () => { + const wrapper = mount(Stepper, { + props: { + max: 5, + modelValue: 1, + }, + }); + + await wrapper.setProps({ modelValue: 10 }); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(5); +}); + +test('should format value to integer when using integer prop', async () => { + const wrapper = mount(Stepper, { + props: { + integer: true, + modelValue: 1, + }, + }); + + const input = wrapper.find('input'); + input.element.value = '2.2'; + await input.trigger('input'); + await input.trigger('blur'); + + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(2); +}); + +test('should format value to default value when input is invalid', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: '', + }, + }); + + const input = wrapper.find('input'); + input.element.value = '.'; + await input.trigger('input'); + await input.trigger('blur'); + + expect(wrapper.emitted('update:modelValue').pop()).toEqual([1]); +}); + +test('should emit focus event when input is focused', async () => { + const wrapper = mount(Stepper, { + props: { + disableInput: true, + }, + }); + + const input = wrapper.find('input'); + await input.trigger('focus'); + expect(wrapper.emitted('focus')).toBeFalsy(); + + await wrapper.setProps({ disableInput: false }); + await input.trigger('focus'); + expect(wrapper.emitted('focus')).toBeTruthy(); +}); + +test('should format input value when stepper blured', async () => { + const wrapper = mount(Stepper, { + props: { + min: 3, + modelValue: 5, + }, + }); + + const input = wrapper.find('input'); + input.element.value = ''; + await input.trigger('input'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(''); + + await input.trigger('blur'); + expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(3); + expect(wrapper.emitted('blur')).toBeTruthy(); +}); + +test('should update input width when using input-width prop', () => { + const wrapper = mount(Stepper, { + props: { + inputWidth: '10rem', + }, + }); + expect(wrapper.find('input').element.style.width).toEqual('10rem'); +}); + +test('should update input height and button size when using button-size prop', () => { + const wrapper = mount(Stepper, { + props: { + buttonSize: '2rem', + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should allow to using before-change prop', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 1, + beforeChange: () => false, + }, + }); + + const plus = wrapper.find('.van-stepper__plus'); + await plus.trigger('click'); + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); +}); + +test('should allow min value to be 0', async () => { + const wrapper = mount(Stepper, { + props: { + min: 0, + modelValue: 1, + }, + }); + + const input = wrapper.find('input'); + input.element.value = ''; + await input.trigger('input'); + await input.trigger('blur'); + + expect(input.element.value).toEqual('0'); +}); + +test('should hide plus button when show-plus prop is false', () => { + const wrapper = mount(Stepper, { + props: { + showPlus: false, + }, + }); + const plus = wrapper.find('.van-stepper__plus').element; + expect(plus.style.display).toEqual('none'); +}); + +test('should hide minus button when show-minus prop is false', () => { + const wrapper = mount(Stepper, { + props: { + showMinus: false, + }, + }); + const minus = wrapper.find('.van-stepper__minus').element; + expect(minus.style.display).toEqual('none'); +}); + +test('should hide input when show-input prop is false', () => { + const wrapper = mount(Stepper, { + propsData: { + showInput: false, + }, + }); + expect(wrapper.find('input').element.style.display).toEqual('none'); +}); + +test('should limit dicimal length when using decimal-length prop', async () => { + const wrapper = mount(Stepper, { + props: { + step: 0.2, + modelValue: 1, + decimalLength: 2, + }, + }); + const plus = wrapper.find('.van-stepper__plus'); + await plus.trigger('click'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1.20'); +}); + +test('should limit decimal-length when inputing', async () => { + const wrapper = mount(Stepper, { + props: { + step: 0.2, + modelValue: 1, + decimalLength: 1, + }, + }); + + const input = wrapper.find('input'); + input.element.value = '1.25'; + await input.trigger('input'); + + expect(input.element.value).toEqual('1.2'); +}); + +test('should emit change event with name when using name prop', async () => { + const wrapper = mount(Stepper); + const plus = wrapper.find('.van-stepper__plus'); + + await plus.trigger('click'); + expect(wrapper.emitted('change')[0][1]).toEqual({ name: '' }); + + await wrapper.setProps({ name: 'name' }); + await plus.trigger('click'); + expect(wrapper.emitted('change')[1][1]).toEqual({ name: 'name' }); +}); + +test('should watch min and max props and format modelValue', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 1, + }, + }); + + await wrapper.setProps({ min: 10 }); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(10); + + await wrapper.setProps({ + min: 3, + max: 8, + }); + expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(8); +}); + +test('should watch decimal-length prop and format modelValue', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 1.33, + }, + }); + await wrapper.setProps({ decimalLength: 1 }); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1.3'); +}); + +test('should watch integer prop and format modelValue', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: 1.33, + }, + }); + await wrapper.setProps({ integer: true }); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(1); +}); + +test('should render placeholder correctly', () => { + const wrapper = mount(Stepper, { + props: { + placeholder: 'foo', + }, + }); + const input = wrapper.find('.van-stepper__input').element; + expect(input.getAttribute('placeholder')).toEqual('foo'); +}); + +test('should allow input be to empty when using allow-empty prop', async () => { + const wrapper = mount(Stepper, { + props: { + modelValue: '', + allowEmpty: true, + }, + }); + + const input = wrapper.find('input'); + await input.trigger('blur'); + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); + + await wrapper.setProps({ allowEmpty: false }); + await input.trigger('blur'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(1); +});