ref #6104 mock axios test call and refactor e2e

2023-10-04 15:46:15 +02:00 · 2023-10-04 15:46:15 +02:00 · 868ecdf680
parent 801ed8ab50
commit 868ecdf680
6 changed files with 112 additions and 117 deletions
--- a/src/components/common/VnLog.vue
+++ b/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');
                }
            "
--- a/src/composables/useIso8601.js
+++ b/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;
-}
--- a/test/cypress/integration/workerList.spec.js
+++ b/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');
--- a/test/cypress/support/commands.js
+++ b/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();
--- a/test/vitest/tests/components/common/VnLog.spec.js
+++ b/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 () => {
-        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'),
+        ]);
    });
 });
--- a/test/vitest/helper.js
+++ b/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 {