Skip to content
This repository has been archived by the owner on Jan 8, 2025. It is now read-only.

Commit

Permalink
test(time-picker): fix test error
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeADre
BeADre committed Feb 21, 2022
1 parent e8f2676 commit 53a7bc4
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 35 deletions.
4 changes: 2 additions & 2 deletions packages/varlet-vue2-ui/src/time-picker/TimePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,10 @@ export default defineComponent({
},
methods: {
update(newTime) {
const { onInput } = this.getListeners()
const { onInput, onChange } = this.getListeners()
onInput?.(newTime)
this.onChange?.(newTime)
onChange?.(newTime)
},
rad2deg(rad) {
return rad * 57.29577951308232
Expand Down
48 changes: 39 additions & 9 deletions packages/varlet-vue2-ui/src/time-picker/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -749,14 +749,7 @@ exports[`test timePicker style and format 2`] = `
<!---->
<!---->
</div>
<div class=\\"var-time-picker-title__ampm\\">
<div class=\\"var-time-picker-title__btn var-time-picker-title__btn--active\\">
AM
</div>
<div class=\\"var-time-picker-title__btn\\">
PM
</div>
</div>
<!---->
</div>
<div class=\\"var-time-picker-body\\">
<div class=\\"var-time-picker-clock__container\\">
Expand Down Expand Up @@ -799,7 +792,44 @@ exports[`test timePicker style and format 2`] = `
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 24.99999999999998%; top: 6.698729810778076%;\\">
11
</div>
<!---->
<div class=\\"var-time-picker-clock__inner\\">
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 50%; top: 0%;\\">
00
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 75%; top: 6.698729810778064%;\\">
13
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 93.30127018922192%; top: 25%;\\">
14
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 100%; top: 50%;\\">
15
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 93.30127018922194%; top: 74.99999999999999%;\\">
16
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 75.00000000000003%; top: 93.30127018922192%;\\">
17
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 50%; top: 100%;\\">
18
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 25.00000000000001%; top: 93.30127018922194%;\\">
19
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 6.698729810778076%; top: 75.00000000000003%;\\">
20
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 0%; top: 50.000000000000014%;\\">
21
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 6.6987298107780475%; top: 25.000000000000032%;\\">
22
</div>
<div class=\\"var-time-picker-clock__item\\" style=\\"left: 24.99999999999998%; top: 6.698729810778076%;\\">
23
</div>
</div>
</div>
</transition-stub>
</div>
Expand Down
35 changes: 20 additions & 15 deletions packages/varlet-vue2-ui/src/time-picker/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ test('test timePicker style and format', async () => {

expect(wrapper.html()).toMatchSnapshot()

await wrapper.setData({ type: '24hr' })
await wrapper.setData({ format: '24hr' })

expect(wrapper.html()).toMatchSnapshot()
})
Expand Down Expand Up @@ -73,20 +73,21 @@ test('test max and min', async () => {

await wrapper.setData({ max: '11:11', min: '11:11' })
await delay(200)
expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11')
const text = wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')
expect(text).toBe('11:11')

const el = wrapper.find('.var-time-picker-clock__container')
await trigger(el, 'touchstart', 50, 30)
await trigger(el, 'touchmove', 60, 25)
await trigger(el, 'touchend', 60, 25)

await delay(200)
expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11')
expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11')

await wrapper.find('.var-time-picker-title__btn').trigger('click')
await wrapper.find('.var-time-picker-clock__item').trigger('click')

expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11')
expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11')
})

test('test useSeconds prop', () => {
Expand Down Expand Up @@ -123,12 +124,12 @@ test('test readonly prop', async () => {
await trigger(el, 'touchend', 30, 25)

await delay(200)
expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11')
expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11')

await wrapper.find('.var-time-picker-title__btn').trigger('click')
await wrapper.find('.var-time-picker-clock__item').trigger('click')

expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11')
expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11')
})

test('test v-model and onChange event', async () => {
Expand Down Expand Up @@ -160,23 +161,27 @@ test('test v-model and onChange event', async () => {

await delay(200)
expect(wrapper.find('.var-time-picker-title__time').text()).not.toBe('11:11:11')
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[1].text()).toBe('11')
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].text()).toBe('11')
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(1).text()).toBe('11')
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).text()).toBe('11')

await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[1].trigger('click')
await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(1).trigger('click')
await delay(200)
await trigger(el, 'touchstart', 40, 30)
await trigger(el, 'touchmove', 20, 25)
await trigger(el, 'touchend', 30, 25)
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[1].text()).not.toBe('11')
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].text()).toBe('11')
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(1).text()).not.toBe(
'11'
)
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).text()).toBe('11')

await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].trigger('click')
await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).trigger('click')
await delay(200)
await trigger(el, 'touchstart', 40, 30)
await trigger(el, 'touchmove', 20, 25)
await trigger(el, 'touchend', 30, 25)
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].text()).not.toBe('11')
expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).text()).not.toBe(
'11'
)
expect(wrapper.vm.time).not.toBe('11:11:11')
expect(change).toHaveBeenCalled()
})
Expand All @@ -198,11 +203,11 @@ test('test switch timePicker ampm', async () => {
})

await delay(0)
await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn')[1].trigger('click')
await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn').at(1).trigger('click')
expect(wrapper.vm.time).toBe('17:10:22')

await wrapper.setData({ min: '6:00:00' })
await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn')[0].trigger('click')
await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn').at(0).trigger('click')

expect(wrapper.vm.time).toBe('06:10:22')
})
15 changes: 6 additions & 9 deletions packages/varlet-vue2-ui/src/time-picker/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import type { PropType } from 'vue'
export type Format = 'ampm' | '24hr'
export type AmPm = 'am' | 'pm'
export type Time = {
hour: string;
minute: string;
second?: string;
hour: string
minute: string
second?: string
}

export type AllowedTime = {
hours?: (hour: number) => boolean;
minutes?: (minute: number) => boolean;
seconds?: (second: number) => boolean;
hours?: (hour: number) => boolean
minutes?: (minute: number) => boolean
seconds?: (second: number) => boolean
}

export const hoursAmpm = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
Expand Down Expand Up @@ -58,7 +58,4 @@ export const props = {
type: Boolean,
default: false,
},
onChange: {
type: Function as PropType<(value: string) => void>,
},
}

0 comments on commit 53a7bc4

Please sign in to comment.