ref #6104 mock axios test call and refactor e2e

src/components/common/VnLog.vue

@@ -3,11 +3,11 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
+import { date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import { toRelativeDate, toDateString, toDateHour } from 'src/filters';
+import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
 import { useFirstUpper } from 'src/composables/useFirstUpper';
-import { useIso8601 } from 'src/composables/useIso8601';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
@@ -63,8 +63,8 @@ const changeInput = ref();
 const searchInput = ref();
 const userRadio = ref();
 const userSelect = ref();
-const date = ref();
-const dateDialog = ref(false);
+const dateFrom = ref();
+const dateFromDialog = ref(false);
 const dateTo = ref();
 const dateToDialog = ref(false);
 const selectedFilters = ref({});
@@ -164,7 +164,8 @@ function getLogs(data) {
     let modelLog = null;
     let prevLog;
     let nLogs;
-
+    console.log('EEEEEEE', data);
+    console.log('validations', validations);
     data.forEach((log) => {
         const locale = validations[log.changedModel]?.locale || {};
 
@@ -267,18 +268,25 @@ async function applyFilter() {
 }
 
 function setDate(type) {
-    const from = date.value
-        ? useIso8601(date.value.split('-').reverse().join('-'))
+    let from = dateFrom.value
+        ? date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
         : undefined;
-    const to = dateTo.value
-        ? useIso8601(`${dateTo.value.split('-').reverse().join('-')} 21:59:59.999`)
-        : useIso8601(`${date.value.split('-').reverse().join('-')} 21:59:59.999`);
+    from = date.adjustDate(from, { hour: 0, minute: 0, second: 0, millisecond: 0 }, true);
+
+    let to = dateTo.value
+        ? date.formatDate(dateTo.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
+        : date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD');
+    to = date.adjustDate(
+        to,
+        { hour: 21, minute: 59, second: 59, millisecond: 999 },
+        true
+    );
 
     switch (type) {
         case 'from':
             return { between: [from, to] };
         case 'to': {
-            if (date.value) {
+            if (dateFrom.value) {
                 return {
                     between: [from, to],
                 };
@@ -325,7 +333,7 @@ function selectFilter(type, dateType) {
             userSelect.value !== null ? userSelect.value : undefined;
     }
     if (type === 'date') {
-        if (!date.value && !dateTo.value) {
+        if (!dateFrom.value && !dateTo.value) {
             selectedFilters.value.creationDate = undefined;
         } else if (dateType === 'to') {
             selectedFilters.value.creationDate = setDate('to');
@@ -352,7 +360,7 @@ async function clearFilter() {
     userSelect.value = undefined;
     searchInput.value = undefined;
     changeInput.value = undefined;
-    date.value = undefined;
+    dateFrom.value = undefined;
     dateTo.value = undefined;
     Object.keys(checkboxOptions.value).forEach(
         (opt) => (checkboxOptions.value[opt].selected = false)
@@ -493,8 +501,10 @@ setLogTree();
                                     <div
                                         class="date text-grey text-caption q-mr-sm"
                                         :title="
-                                            toDateHour(log.creationDate) ??
-                                            `date:'dd/MM/yyyy HH:mm:ss'`
+                                            date.formatDate(
+                                                log.creationDate,
+                                                'DD/MM/YYYY hh:mm:ss'
+                                            ) ?? `date:'dd/MM/yyyy HH:mm:ss'`
                                         "
                                     >
                                         {{ toRelativeDate(log.creationDate) }}
@@ -775,10 +785,10 @@ setLogTree();
                     <QInput
                         class="full-width"
                         :label="t('globals.date')"
-                        @click="dateDialog = true"
+                        @click="dateFromDialog = true"
                         @focus="(evt) => evt.target.blur()"
                         @clear="selectFilter('date', 'to')"
-                        v-model="date"
+                        v-model="dateFrom"
                         clearable
                         clear-icon="close"
                     />
@@ -798,18 +808,17 @@ setLogTree();
             </QList>
         </QScrollArea>
     </QDrawer>
-    <QDialog v-model="dateDialog">
+    <QDialog v-model="dateFromDialog">
         <QDate
             :years-in-month-view="false"
-            v-model="date"
+            v-model="dateFrom"
             dense
             flat
             minimal
             @update:model-value="
                 (value) => {
-                    dateDialog = false;
-                    const formatDate = toDateString(new Date(value));
-                    date = formatDate.split('-').reverse().join('-');
+                    dateFromDialog = false;
+                    dateFrom = date.formatDate(value, 'DD-MM-YYYY');
                     selectFilter('date', 'from');
                 }
             "
@@ -824,8 +833,7 @@ setLogTree();
             @update:model-value="
                 (value) => {
                     dateToDialog = false;
-                    const formatDate = toDateString(new Date(value));
-                    dateTo = formatDate.split('-').reverse().join('-');
+                    dateTo = date.formatDate(value, 'DD-MM-YYYY');
                     selectFilter('date', 'to');
                 }
             "

src/composables/useIso8601.js

@@ -1,18 +0,0 @@
-export function useIso8601(dateString) {
-    // Crear un objeto Date a partir de la cadena de texto
-    const date = new Date(dateString);
-
-    // Obtener los componentes de fecha y hora
-    const year = date.getUTCFullYear();
-    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-    const day = String(date.getUTCDate()).padStart(2, '0');
-    const hours = String(date.getUTCHours()).padStart(2, '0');
-    const minutes = String(date.getUTCMinutes()).padStart(2, '0');
-    const seconds = String(date.getUTCSeconds()).padStart(2, '0');
-    const milliseconds = String(date.getUTCMilliseconds()).padStart(3, '0');
-
-    // Formatear la cadena en el formato ISO 8601
-    const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}Z`;
-
-    return formattedDate;
-}

test/cypress/integration/workerList.spec.js

@@ -1,4 +1,6 @@
 describe('WorkerList', () => {
+    const workerFieldNames =
+        '.card-list-body > .list-items > :nth-child(2) > .value > span';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
@@ -6,19 +8,13 @@ describe('WorkerList', () => {
     });
 
     it('should load workers', () => {
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(0)
-            .should('have.text', 'JessicaJones');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
-            .should('have.text', 'BruceBanner');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
-            .should('have.text', 'CharlesXavier');
+        cy.get(workerFieldNames).eq(0).should('have.text', 'JessicaJones');
+        cy.get(workerFieldNames).eq(1).should('have.text', 'BruceBanner');
+        cy.get(workerFieldNames).eq(2).should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
+        cy.openListSummary(0);
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');

test/cypress/support/commands.js

@@ -127,4 +127,8 @@ Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
         }
     });
 });
+
+Cypress.Commands.add('openListSummary', (row) => {
+    cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(row).click();
+});
 // registerCommands();

test/vitest/__tests__/components/common/VnLog.spec.js

@@ -1,50 +1,9 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper } from 'app/test/vitest/helper';
+import { createWrapper, axios } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
 describe('VnLog', () => {
     let vm;
-    const mockValidations = {
-        Claim: {
-            locale: {
-                name: 'reclamación',
-            },
-        },
-        ClaimObservation: {
-            locale: {
-                name: 'observación',
-            },
-        },
-        ClaimDms: {
-            locale: {
-                name: 'documento',
-            },
-        },
-        ClaimBeginning: {
-            locale: {
-                name: 'comienzo',
-            },
-        },
-    };
-
-    beforeAll(() => {
-        vm = createWrapper(VnLog, {
-            global: {
-                stubs: [],
-                mocks: {},
-            },
-            propsData: {
-                model: 'Claim',
-            },
-        }).vm;
-        vm.validations = mockValidations;
-    });
-
-    afterEach(() => {
-        vi.clearAllMocks();
-    });
-
-    it('should correctly set logTree', async () => {
     const fakeLogTreeData = [
         {
             id: 2,
@@ -100,13 +59,57 @@ describe('VnLog', () => {
             },
         },
     ];
+    const mockValidations = {
+        Claim: {
+            locale: {
+                name: 'reclamación',
+            },
+        },
+        ClaimObservation: {
+            locale: {
+                name: 'observación',
+            },
+        },
+        ClaimDms: {
+            locale: {
+                name: 'documento',
+            },
+        },
+        ClaimBeginning: {
+            locale: {
+                name: 'comienzo',
+            },
+        },
+    };
+
+    beforeAll(async () => {
+        axios.get.mockImplementation(() => {
+            return { data: fakeLogTreeData };
+        });
+
+        vm = createWrapper(VnLog, {
+            global: {
+                stubs: [],
+                mocks: {},
+            },
+            propsData: {
+                model: 'Claim',
+            },
+        }).vm;
+        vm.validations = mockValidations;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should correctly set logTree', async () => {
         vm.logTree = vm.getLogs(fakeLogTreeData);
         expect(vm.logTree[0].originFk).toEqual(1);
         expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });
 
-    it('should correctly set the selectedFilters when filtering', async () => {
-        await vm.$nextTick();
+    it('should correctly set the selectedFilters when filtering', () => {
         vm.searchInput = '1';
         vm.userSelect = '21';
         vm.checkboxOptions.insert.selected = true;
@@ -121,10 +124,11 @@ describe('VnLog', () => {
     });
 
     it('should correctly set the date from', () => {
-        vm.date = '18-09-2023';
+        vm.dateFrom = '18-09-2023';
         vm.selectFilter('date', 'from');
-        expect(vm.selectedFilters.creationDate).toEqual({
-            between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
-        });
+        expect(vm.selectedFilters.creationDate.between).toEqual([
+            new Date('2023-09-18T00:00:00.000Z'),
+            new Date('2023-09-18T21:59:59.999Z'),
+        ]);
     });
 });

test/vitest/helper.js

@@ -13,7 +13,6 @@ installQuasarPlugin({
         Dialog,
     },
 });
-axios.defaults.baseURL = 'http://localhost:9000/api/';
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
 
@@ -35,8 +34,10 @@ vi.mock('vue-router', () => ({
     }),
 }));
 
+vi.mock('axios');
+
 vi.spyOn(useValidator, 'useValidator').mockImplementation(() => {
-    return { validate: vi.fn(), fetch: vi.fn() };
+    return { validate: vi.fn() };
 });
 
 class FormDataMock {