xref: /openbmc/webui-vue/tests/unit/Global/TableDateFilter.spec.js (revision 313d15cf9f14e8a264f97a3370c3be4e494e5e0d) 
1import { mount } from '@vue/test-utils';
2import { createStore } from 'vuex';
3import TableDateFilter from '@/components/Global/TableDateFilter';
4
5describe('TableDateFilter.vue', () => {
6  const store = createStore({
7    modules: {
8      global: {
9        namespaced: true,
10        getters: {
11          languagePreference: () => 'en-US',
12        },
13      },
14    },
15  });
16
17  const wrapper = mount(TableDateFilter, {
18    global: {
19      plugins: [store],
20      stubs: {
21        'b-row': { template: '<div><slot /></div>' },
22        'b-col': { template: '<div><slot /></div>' },
23        'b-form-group': { template: '<div><slot /></div>' },
24        'b-input-group': { template: '<div><slot /></div>' },
25        'b-form-input': {
26          template:
27            '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" @blur="$emit(\'blur\')" />',
28          props: ['modelValue', 'state'],
29          emits: ['update:modelValue', 'blur'],
30        },
31        'b-form-invalid-feedback': { template: '<div><slot /></div>' },
32      },
33    },
34  });
35
36  // Reset validation state between tests
37  beforeEach(async () => {
38    wrapper.vm.fromDate = '';
39    wrapper.vm.toDate = '';
40    wrapper.vm.v$.$reset();
41    await wrapper.vm.$nextTick();
42  });
43
44  it('should exist', () => {
45    expect(wrapper.exists()).toBe(true);
46  });
47
48  it('should render from and to date inputs', () => {
49    expect(wrapper.find('#input-from-date').exists()).toBe(true);
50    expect(wrapper.find('#input-to-date').exists()).toBe(true);
51  });
52
53  describe('Date validation', () => {
54    it('should accept valid ISO date format (YYYY-MM-DD)', async () => {
55      await wrapper.find('#input-from-date').setValue('2025-01-15');
56      wrapper.vm.v$.fromDate.$touch();
57      await wrapper.vm.$nextTick();
58
59      expect(wrapper.vm.v$.fromDate.pattern.$invalid).toBe(false);
60    });
61
62    it('should have no validation error when dates are empty', async () => {
63      wrapper.vm.v$.fromDate.$touch();
64      wrapper.vm.v$.toDate.$touch();
65      await wrapper.vm.$nextTick();
66
67      // Empty dates should pass pattern validation (pattern only validates non-empty)
68      expect(wrapper.vm.v$.fromDate.$error).toBe(false);
69      expect(wrapper.vm.v$.toDate.$error).toBe(false);
70    });
71
72    it('should validate fromDate is not after toDate', async () => {
73      wrapper.vm.fromDate = '2025-01-20';
74      wrapper.vm.toDate = '2025-01-15';
75      wrapper.vm.v$.fromDate.$touch();
76      await wrapper.vm.$nextTick();
77
78      expect(wrapper.vm.v$.fromDate.maxDate.$invalid).toBe(true);
79    });
80
81    it('should pass validation when fromDate is before toDate', async () => {
82      wrapper.vm.fromDate = '2025-01-10';
83      wrapper.vm.toDate = '2025-01-20';
84      wrapper.vm.v$.fromDate.$touch();
85      wrapper.vm.v$.toDate.$touch();
86      await wrapper.vm.$nextTick();
87
88      expect(wrapper.vm.v$.fromDate.maxDate.$invalid).toBe(false);
89      expect(wrapper.vm.v$.toDate.minDate.$invalid).toBe(false);
90    });
91
92    it('should validate toDate is not before fromDate', async () => {
93      wrapper.vm.fromDate = '2025-01-20';
94      wrapper.vm.toDate = '2025-01-10';
95      wrapper.vm.v$.toDate.$touch();
96      await wrapper.vm.$nextTick();
97
98      expect(wrapper.vm.v$.toDate.minDate.$invalid).toBe(true);
99    });
100
101    it('should emit change event with valid date range', async () => {
102      wrapper.vm.fromDate = '2025-01-01';
103      wrapper.vm.toDate = '2025-01-31';
104      await wrapper.vm.$nextTick();
105
106      const emitted = wrapper.emitted('change');
107      expect(emitted).toBeTruthy();
108      expect(emitted[emitted.length - 1][0]).toHaveProperty('fromDate');
109      expect(emitted[emitted.length - 1][0]).toHaveProperty('toDate');
110    });
111  });
112});
113