refactor: refs #8413 update date input test cases to use dot separators for date formatting

src/components/common/VnInputDate.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { nextTick, watch, computed, ref, useAttrs } from 'vue';
-import { date } from 'quasar';
+import { date, getCssVar } from 'quasar';
 import VnDate from './VnDate.vue';
 import { useRequired } from 'src/composables/useRequired';
 
@@ -20,7 +20,8 @@ const $props = defineProps({
 });
 
 const vnInputDateRef = ref(null);
-const inputBgColor = ref('');
+const errColor = getCssVar('negative');
+const textColor = ref('');
 
 const dateFormat = 'DD/MM/YYYY';
 const isPopupOpen = ref();
@@ -64,21 +65,21 @@ watch(
 
 const formatDate = () => {
     let value = inputValue.value;
-    if (value === model.value || value === '') {
-        inputBgColor.value = '';
+    if (!value || value === model.value) {
+        textColor.value = '';
         return;
     } 
     const regex =
         /^([0]?[1-9]|[12][0-9]|3[01])([./-])([0]?[1-9]|1[0-2])([./-](\d{1,4}))?$/;
     if (!regex.test(value)){
-        inputBgColor.value = 'red';
+        textColor.value = errColor;
         return;
     } 
 
     value = value.replace(/[.-]/g, '/');
     const parts = value.split('/');
     if (parts.length < 2) {
-        inputBgColor.value = 'red';
+        textColor.value = errColor;
          return;
     }
 
@@ -89,7 +90,8 @@ const formatDate = () => {
     const currentYear = Date.vnNew().getFullYear();
     if (!year) year = currentYear;
     const millennium = currentYear.toString().slice(0, 1);
-    switch (year?.length) {
+
+    switch (year.length) {
         case 1:
             year = `${millennium}00${year}`;
             break;
@@ -103,8 +105,13 @@ const formatDate = () => {
             break;
     }
 
-    const isoCandidate = `${year}-${month}-${day}`;
-    const parsedDate = new Date(isoCandidate);
+    let isoCandidate = `${year}/${month}/${day}`;
+    isoCandidate = date.formatDate(
+                    new Date(isoCandidate).toISOString(),
+                    'YYYY-MM-DDTHH:mm:ss.SSSZ',
+                );
+    const [isoYear, isoMonth, isoDay] = isoCandidate.split('-').map((e) => parseInt(e));
+    const parsedDate = new Date(isoYear, isoMonth - 1, isoDay);
 
     const isValidDate = 
         parsedDate instanceof Date &&
@@ -114,7 +121,7 @@ const formatDate = () => {
         parsedDate.getDate() === parseInt(day);
 
     if (!isValidDate) {
-        inputBgColor.value = 'red';
+        textColor.value = errColor;
         return;
     }
 
@@ -130,7 +137,8 @@ const formatDate = () => {
     }
 
     model.value = parsedDate.toISOString();
-    inputBgColor.value = '';
+
+    textColor.value = '';
 };
 
 const handleEnter = (event) => {
@@ -150,6 +158,7 @@ const handleEnter = (event) => {
 
 <template>
     <div @mouseover="hover = true" @mouseleave="hover = false">
+        {{ console.log($q) }}
         <QInput
             ref="vnInputDateRef"
             v-model="inputValue"
@@ -159,7 +168,7 @@ const handleEnter = (event) => {
             :class="{ required: isRequired }"
             :rules="mixinRules"
             :clearable="false"
-            :bg-color="inputBgColor"
+            :input-style="{color: textColor}"
             @click="isPopupOpen = !isPopupOpen"
             @keydown="isPopupOpen = false"
             @blur="formatDate"

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

@@ -38,7 +38,7 @@ describe('VnInputDate', () => {
 
         it('formatDate should format the date correctly when a valid date is entered with full year', async () => {
             const input = wrapper.find('input');
-            await input.setValue('25/12/2002');
+            await input.setValue('25.12/2002');
             await vm.$nextTick();
             await vm.formatDate();
             expect(vm.model).toBe('2002-12-24T23:00:00.000Z');
@@ -46,7 +46,7 @@ describe('VnInputDate', () => {
 
         it('should format the date correctly when a valid date is entered with short year', async () => {
             const input = wrapper.find('input');
-            await input.setValue('31/12/23');
+            await input.setValue('31.12-23');
             await vm.$nextTick();
             await vm.formatDate();
             expect(vm.model).toBe('2023-12-30T23:00:00.000Z');
@@ -54,7 +54,7 @@ describe('VnInputDate', () => {
 
         it('should format the date correctly when a valid date is entered without year', async () => {
             const input = wrapper.find('input');
-            await input.setValue('12/03');
+            await input.setValue('12.03');
             await vm.$nextTick();
             await vm.formatDate();
             expect(vm.model).toBe('2001-03-11T23:00:00.000Z');