File size: 2,751 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import { describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { ref } from 'vue'
import DateRangePicker from '../DateRangePicker.vue'
const messages: Record<string, string> = {
'dates.today': 'Today',
'dates.yesterday': 'Yesterday',
'dates.last24Hours': 'Last 24 Hours',
'dates.last7Days': 'Last 7 Days',
'dates.last14Days': 'Last 14 Days',
'dates.last30Days': 'Last 30 Days',
'dates.thisMonth': 'This Month',
'dates.lastMonth': 'Last Month',
'dates.startDate': 'Start Date',
'dates.endDate': 'End Date',
'dates.apply': 'Apply',
'dates.selectDateRange': 'Select date range'
}
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key: string) => messages[key] ?? key,
locale: ref('en')
})
}))
const formatLocalDate = (date: Date): string => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
describe('DateRangePicker', () => {
it('uses last 24 hours as the default recognized preset', () => {
const now = new Date()
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
const wrapper = mount(DateRangePicker, {
props: {
startDate: formatLocalDate(yesterday),
endDate: formatLocalDate(now)
},
global: {
stubs: {
Icon: true
}
}
})
expect(wrapper.text()).toContain('Last 24 Hours')
})
it('emits range updates with last24Hours preset when applied', async () => {
const now = new Date()
const today = formatLocalDate(now)
const wrapper = mount(DateRangePicker, {
props: {
startDate: today,
endDate: today
},
global: {
stubs: {
Icon: true
}
}
})
await wrapper.find('.date-picker-trigger').trigger('click')
const presetButton = wrapper.findAll('.date-picker-preset').find((node) =>
node.text().includes('Last 24 Hours')
)
expect(presetButton).toBeDefined()
await presetButton!.trigger('click')
await wrapper.find('.date-picker-apply').trigger('click')
const nowAfterClick = new Date()
const yesterdayAfterClick = new Date(nowAfterClick.getTime() - 24 * 60 * 60 * 1000)
const expectedStart = formatLocalDate(yesterdayAfterClick)
const expectedEnd = formatLocalDate(nowAfterClick)
expect(wrapper.emitted('update:startDate')?.[0]).toEqual([expectedStart])
expect(wrapper.emitted('update:endDate')?.[0]).toEqual([expectedEnd])
expect(wrapper.emitted('change')?.[0]).toEqual([
{
startDate: expectedStart,
endDate: expectedEnd,
preset: 'last24Hours'
}
])
})
})
|