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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import { mount } from '@vue/test-utils';
import { createStore } from 'vuex';
import TableDateFilter from '@/components/Global/TableDateFilter';
describe('TableDateFilter.vue', () => {
const store = createStore({
modules: {
global: {
namespaced: true,
getters: {
languagePreference: () => 'en-US',
},
},
},
});
const wrapper = mount(TableDateFilter, {
global: {
plugins: [store],
stubs: {
'b-row': { template: '<div><slot /></div>' },
'b-col': { template: '<div><slot /></div>' },
'b-form-group': { template: '<div><slot /></div>' },
'b-input-group': { template: '<div><slot /></div>' },
'b-form-input': {
template:
'<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" @blur="$emit(\'blur\')" />',
props: ['modelValue', 'state'],
emits: ['update:modelValue', 'blur'],
},
'b-form-invalid-feedback': { template: '<div><slot /></div>' },
},
},
});
// Reset validation state between tests
beforeEach(async () => {
wrapper.vm.fromDate = '';
wrapper.vm.toDate = '';
wrapper.vm.v$.$reset();
await wrapper.vm.$nextTick();
});
it('should exist', () => {
expect(wrapper.exists()).toBe(true);
});
it('should render from and to date inputs', () => {
expect(wrapper.find('#input-from-date').exists()).toBe(true);
expect(wrapper.find('#input-to-date').exists()).toBe(true);
});
describe('Date validation', () => {
it('should accept valid ISO date format (YYYY-MM-DD)', async () => {
await wrapper.find('#input-from-date').setValue('2025-01-15');
wrapper.vm.v$.fromDate.$touch();
await wrapper.vm.$nextTick();
expect(wrapper.vm.v$.fromDate.pattern.$invalid).toBe(false);
});
it('should have no validation error when dates are empty', async () => {
wrapper.vm.v$.fromDate.$touch();
wrapper.vm.v$.toDate.$touch();
await wrapper.vm.$nextTick();
// Empty dates should pass pattern validation (pattern only validates non-empty)
expect(wrapper.vm.v$.fromDate.$error).toBe(false);
expect(wrapper.vm.v$.toDate.$error).toBe(false);
});
it('should validate fromDate is not after toDate', async () => {
wrapper.vm.fromDate = '2025-01-20';
wrapper.vm.toDate = '2025-01-15';
wrapper.vm.v$.fromDate.$touch();
await wrapper.vm.$nextTick();
expect(wrapper.vm.v$.fromDate.maxDate.$invalid).toBe(true);
});
it('should pass validation when fromDate is before toDate', async () => {
wrapper.vm.fromDate = '2025-01-10';
wrapper.vm.toDate = '2025-01-20';
wrapper.vm.v$.fromDate.$touch();
wrapper.vm.v$.toDate.$touch();
await wrapper.vm.$nextTick();
expect(wrapper.vm.v$.fromDate.maxDate.$invalid).toBe(false);
expect(wrapper.vm.v$.toDate.minDate.$invalid).toBe(false);
});
it('should validate toDate is not before fromDate', async () => {
wrapper.vm.fromDate = '2025-01-20';
wrapper.vm.toDate = '2025-01-10';
wrapper.vm.v$.toDate.$touch();
await wrapper.vm.$nextTick();
expect(wrapper.vm.v$.toDate.minDate.$invalid).toBe(true);
});
it('should emit change event with valid date range', async () => {
wrapper.vm.fromDate = '2025-01-01';
wrapper.vm.toDate = '2025-01-31';
await wrapper.vm.$nextTick();
const emitted = wrapper.emitted('change');
expect(emitted).toBeTruthy();
expect(emitted[emitted.length - 1][0]).toHaveProperty('fromDate');
expect(emitted[emitted.length - 1][0]).toHaveProperty('toDate');
});
});
});
|
