test: add VnInputDateTime component tests

src/components/common/VnInputDateTime.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed, useAttrs } from 'vue';
 import { date } from 'quasar';
+import VnDate from './VnDate.vue';
+import VnTime from './VnTime.vue';
 
 const $attrs = useAttrs();
 const model = defineModel({ type: [Date] });
@@ -34,6 +36,9 @@ const selectedDate = computed({
         model.value = Date.convertToISODateTime(value);
     },
 });
+const manageDate = (date) => {
+    selectedDate.value = date;
+};
 </script>
 
 <template>
@@ -48,6 +53,7 @@ const selectedDate = computed({
             @click="isPopupOpen = !isPopupOpen"
             @keydown="isPopupOpen = false"
             hide-bottom-space
+            @update:model-value="manageDate"
             :data-cy="$attrs.dataCy ?? $attrs.label + '_inputDateTime'"
         >
             <template #prepend>

src/components/common/__tests__/VnInputDateTime.spec.js

@@ -0,0 +1,81 @@
+import { createWrapper } from 'app/test/vitest/helper.js';
+import { describe, it, expect, beforeAll } from 'vitest';
+import VnInputDateTime from 'components/common/VnInputDateTime.vue';
+import vnDateBoot from 'src/boot/vnDate';
+
+let vm;
+let wrapper;
+
+beforeAll(() => {
+    // Initialize the vnDate boot
+    vnDateBoot();
+});
+function generateWrapper(date, outlined, showEvent) {
+    wrapper = createWrapper(VnInputDateTime, {
+        props: {
+            modelValue: date,
+            isOutlined: outlined,
+            showEvent: showEvent,
+        },
+    });
+    wrapper = wrapper.wrapper;
+    vm = wrapper.vm;
+}
+
+describe('VnInputDateTime', () => {
+    describe('selectedDate', () => {
+        it('formats a valid datetime correctly', async () => {
+            generateWrapper('2023-12-25T10:30:00', false, true);
+            await vm.$nextTick();
+            expect(vm.selectedDate).toBe('25-12-2023 10:30');
+        });
+
+        it('handles null date value', async () => {
+            generateWrapper(null, false, true);
+            await vm.$nextTick();
+            expect(vm.selectedDate).toBeInstanceOf(Date);
+        });
+
+        it('updates the model value when a new datetime is set', async () => {
+            vm.selectedDate = '31-12-2023 15:45';
+            await vm.$nextTick();
+            expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
+        });
+    });
+
+    describe('styleAttrs', () => {
+        it('should return empty styleAttrs when isOutlined is false', async () => {
+            generateWrapper('2023-12-25T10:30:00', false, true);
+            await vm.$nextTick();
+            expect(vm.styleAttrs).toEqual({});
+        });
+
+        it('should set styleAttrs when isOutlined is true', async () => {
+            generateWrapper('2023-12-25T10:30:00', true, true);
+            await vm.$nextTick();
+            expect(vm.styleAttrs).toEqual({
+                dense: true,
+                outlined: true,
+                rounded: true,
+            });
+        });
+    });
+
+    describe('component rendering', () => {
+        it('should render date and time icons', async () => {
+            generateWrapper('2023-12-25T10:30:00', false, true);
+            await vm.$nextTick();
+            const icons = wrapper.findAllComponents({ name: 'QIcon' });
+            expect(icons.length).toBe(2);
+            expect(icons[0].props('name')).toBe('today');
+            expect(icons[1].props('name')).toBe('access_time');
+        });
+
+        it('should render popup proxies for date and time', async () => {
+            generateWrapper('2023-12-25T10:30:00', false, true);
+            await vm.$nextTick();
+            const popups = wrapper.findAllComponents({ name: 'QPopupProxy' });
+            expect(popups.length).toBe(2);
+        });
+    });
+});