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 dateFrom = ref();
-const dateDialog = ref(false);
+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
+    let from = dateFrom.value
-        ? useIso8601(date.value.split('-').reverse().join('-'))
+        ? date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
         : undefined;
-    const to = dateTo.value
+    from = date.adjustDate(from, { hour: 0, minute: 0, second: 0, millisecond: 0 }, true);
-        ? useIso8601(`${dateTo.value.split('-').reverse().join('-')} 21:59:59.999`)
+
-        : useIso8601(`${date.value.split('-').reverse().join('-')} 21:59:59.999`);
+    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.formatDate(
-                                            `date:'dd/MM/yyyy HH:mm:ss'`
+                                                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;
+                    dateFromDialog = false;
-                    const formatDate = toDateString(new Date(value));
+                    dateFrom = date.formatDate(value, 'DD-MM-YYYY');
-                    date = formatDate.split('-').reverse().join('-');
                     selectFilter('date', 'from');
                 }
             "
@@ -824,8 +833,7 @@ setLogTree();
             @update:model-value="
                 (value) => {
                     dateToDialog = false;
-                    const formatDate = toDateString(new Date(value));
+                    dateTo = date.formatDate(value, 'DD-MM-YYYY');
-                    dateTo = formatDate.split('-').reverse().join('-');
                     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')
+        cy.get(workerFieldNames).eq(0).should('have.text', 'JessicaJones');
-            .eq(0)
+        cy.get(workerFieldNames).eq(1).should('have.text', 'BruceBanner');
-            .should('have.text', 'JessicaJones');
+        cy.get(workerFieldNames).eq(2).should('have.text', 'CharlesXavier');
-        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');
     });
 
     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,9 +1,64 @@
 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 fakeLogTreeData = [
+        {
+            id: 2,
+            originFk: 1,
+            userFk: 18,
+            action: 'update',
+            changedModel: 'ClaimObservation',
+            oldInstance: {},
+            newInstance: {
+                claimFk: 1,
+                text: 'Waiting for customer',
+            },
+            creationDate: '2023-09-18T12:25:34.000Z',
+            changedModelId: '1',
+            changedModelValue: null,
+            description: null,
+            user: {
+                id: 18,
+                name: 'salesPerson',
+                nickname: 'salesPersonNick',
+                image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                worker: {
+                    id: 18,
+                    userFk: 18,
+                },
+            },
+        },
+        {
+            id: 1,
+            originFk: 1,
+            userFk: 18,
+            action: 'update',
+            changedModel: 'Claim',
+            oldInstance: {
+                hasToPickUp: false,
+            },
+            newInstance: {
+                hasToPickUp: true,
+            },
+            creationDate: '2023-09-18T12:25:34.000Z',
+            changedModelId: '1',
+            changedModelValue: null,
+            description: null,
+            user: {
+                id: 18,
+                name: 'salesPerson',
+                nickname: 'salesPersonNick',
+                image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
+                worker: {
+                    id: 18,
+                    userFk: 18,
+                },
+            },
+        },
+    ];
     const mockValidations = {
         Claim: {
             locale: {
@@ -27,7 +82,11 @@ describe('VnLog', () => {
         },
     };
 
-    beforeAll(() => {
+    beforeAll(async () => {
+        axios.get.mockImplementation(() => {
+            return { data: fakeLogTreeData };
+        });
+
         vm = createWrapper(VnLog, {
             global: {
                 stubs: [],
@@ -45,68 +104,12 @@ describe('VnLog', () => {
     });
 
     it('should correctly set logTree', async () => {
-        const fakeLogTreeData = [
-            {
-                id: 2,
-                originFk: 1,
-                userFk: 18,
-                action: 'update',
-                changedModel: 'ClaimObservation',
-                oldInstance: {},
-                newInstance: {
-                    claimFk: 1,
-                    text: 'Waiting for customer',
-                },
-                creationDate: '2023-09-18T12:25:34.000Z',
-                changedModelId: '1',
-                changedModelValue: null,
-                description: null,
-                user: {
-                    id: 18,
-                    name: 'salesPerson',
-                    nickname: 'salesPersonNick',
-                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
-                    worker: {
-                        id: 18,
-                        userFk: 18,
-                    },
-                },
-            },
-            {
-                id: 1,
-                originFk: 1,
-                userFk: 18,
-                action: 'update',
-                changedModel: 'Claim',
-                oldInstance: {
-                    hasToPickUp: false,
-                },
-                newInstance: {
-                    hasToPickUp: true,
-                },
-                creationDate: '2023-09-18T12:25:34.000Z',
-                changedModelId: '1',
-                changedModelValue: null,
-                description: null,
-                user: {
-                    id: 18,
-                    name: 'salesPerson',
-                    nickname: 'salesPersonNick',
-                    image: '4fa3ada0-3ac4-11eb-9ab8-27f6fc3b85fd',
-                    worker: {
-                        id: 18,
-                        userFk: 18,
-                    },
-                },
-            },
-        ];
         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 () => {
+    it('should correctly set the selectedFilters when filtering', () => {
-        await vm.$nextTick();
         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({
+        expect(vm.selectedFilters.creationDate.between).toEqual([
-            between: ['2023-09-18T00:00:00.000Z', '2023-09-18T19:59:59.999Z'],
+            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 {