ref #6104 tests created and searchFn fixed

package.json

@@ -9,7 +9,7 @@
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
         "test:e2e": "cypress open",
-        "test:e2e:ci": "cypress run --browser chromium",
+        "test:e2e:ci": "cypress run --browser chrome",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
         "test:unit:ci": "vitest run"

src/components/common/VnLog.vue

@@ -15,15 +15,16 @@ import FetchData from '../FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const stateStore = useStateStore();
+
 const route = useRoute();
 const { t } = useI18n();
-const validationsStore = useValidationsStore();
 const props = defineProps({
     model: {
         type: String,
         default: null,
     },
 });
+
 const filter = {
     fields: [
         'id',
@@ -160,19 +161,21 @@ function getLogs(data) {
     let originLog = null;
     let userLog = null;
     let modelLog = null;
-    let prevLog, prevUser, prevModel;
+    let prevLog;
     let nLogs;
 
     data.forEach((log) => {
-        const locale = validationsStore.validations[log.changedModel]?.locale || {};
+        const locale = validations[log.changedModel]?.locale || {};
 
         // Origin
-        if (!prevLog || prevLog.originFk != log.originFk) {
+        const originChanged = !prevLog || log.originFk != prevLog.originFk;
+        if (originChanged) {
             logs.push((originLog = { originFk: log.originFk, logs: [] }));
             prevLog = log;
         }
         // User
-        if (prevUser != log.userFk) {
+        const userChanged = originChanged || log.userFk != prevLog.userFk;
+        if (userChanged) {
             originLog.logs.push(
                 (userLog = {
                     user: log.user,
@@ -180,15 +183,14 @@ function getLogs(data) {
                     logs: [],
                 })
             );
-            prevUser = log.userFk;
         }
         // Model
-        if (
-            !prevModel ||
-            prevModel.changedModelId != log.changedModelId ||
-            prevModel.changedModel != log.changedModel ||
-            nLogs >= 6
-        ) {
+        const modelChanged =
+            userChanged ||
+            log.changedModel != prevLog.changedModel ||
+            log.changedModelId != prevLog.changedModelId ||
+            nLogs >= 6;
+        if (modelChanged) {
             userLog.logs.push(
                 (modelLog = {
                     model: log.changedModel,
@@ -198,10 +200,6 @@ function getLogs(data) {
                     logs: [],
                 })
             );
-            prevModel = {
-                changedModelId: log.changedModelId,
-                changedModel: log.changedModel,
-            };
             nLogs = 0;
         }
         nLogs++;
@@ -224,12 +222,12 @@ async function openPointRecord(id, modelLog) {
     pointRecord.value = null;
     const { data } = await axios.get(`${props.model}Logs/${id}/pitInstance`);
     const propNames = Object.keys(data);
-    const locale = validationsStore.validations[modelLog.model]?.locale || {};
+    const locale = validations[modelLog.model]?.locale || {};
     pointRecord.value = parseProps(propNames, locale, data);
 }
 async function setLogTree() {
     if (!validations) {
-        validations = await validationsStore.fetchModels();
+        validations = await useValidationsStore();
     }
     filter.where = { and: [{ originFk: route.params.id }] };
     const { data } = await axios.get(`${props.model}Logs`, {
@@ -377,7 +375,7 @@ function filterFn(val, update, abortFn, type) {
         const needle = val.toLowerCase();
         if (type === 'actions')
             filteredActions.value = actions.value.filter((item) =>
-                item.toLowerCase().includes(needle)
+                t(`models.${item}`).toLowerCase().includes(needle)
             );
         if (type === 'workers') {
             if (isNaN(needle))
@@ -417,11 +415,11 @@ setLogTree();
         :key="originLogIndex"
     >
         <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
-            <h6 class="origin-id">
-                {{ originLog.modelI18n }}
+            <h6 class="origin-id text-grey">
+                {{ useFirstUpper(validations[props.model].locale.name) }}
                 #{{ originLog.originFk }}
             </h6>
-            <div class="line"></div>
+            <div class="line bg-grey"></div>
         </QItem>
         <div
             class="user-log q-mb-sm row"
@@ -686,7 +684,7 @@ setLogTree();
                             </QItem>
                         </template>
                         <template #selected-item="{ opt }">
-                            {{ t(opt) }}
+                            {{ t(`models.${opt}`) }}
                         </template>
                     </QSelect>
                 </QItem>
@@ -875,6 +873,9 @@ setLogTree();
         margin-top: 0;
     }
     & > .origin-info {
+        width: 100%;
+        max-width: 42em;
+        margin-top: 28px;
         gap: 6px;
 
         & > .origin-id {
@@ -885,13 +886,13 @@ setLogTree();
         }
         & > .line {
             flex-grow: 1;
-            background-color: $primary;
             height: 2px;
         }
     }
 }
 .user-log {
-    width: 40em;
+    width: 100%;
+    max-width: 40em;
 
     & > .timeline {
         position: relative;

src/css/app.scss

@@ -14,10 +14,6 @@ a {
     color: $orange-4;
 }
 
-.rounded--full {
-    border-radius: 50%;
-}
-
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -109,7 +109,7 @@ const setData = (entity) => {
                 <template #value>
                     <span class="link">
                         {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.userFk" />
+                        <WorkerDescriptorProxy :id="entity.worker.id" />
                     </span>
                 </template>
             </VnLv>

src/stores/useValidationsStore.js

@@ -1,19 +1,26 @@
 import axios from 'axios';
 import { defineStore } from 'pinia';
 
-export const useValidationsStore = defineStore('validationsStore', {
-    state: () => ({
-        validations: null,
-    }),
-    actions: {
-        async fetchModels() {
-            if (this.validations) return;
-            try {
-                const { data } = await axios.get('Schemas/modelinfo');
-                this.validations = data;
-            } catch (error) {
-                console.error('Error al obtener las validaciones:', error);
-            }
+export const useValidationsStore = async () => {
+    const validationsStore = defineStore('validationsStore', {
+        state: () => ({
+            validations: null,
+        }),
+        actions: {
+            async fetchModels() {
+                if (this.validations) return;
+                try {
+                    const { data } = await axios.get('Schemas/modelinfo');
+                    this.validations = data;
+                } catch (error) {
+                    console.error('Error al obtener las validaciones:', error);
+                }
+            },
         },
-    },
-});
+    });
+    const v = validationsStore();
+    if (!v.validations) {
+        await v.fetchModels();
+    }
+    return v.validations;
+};

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

@@ -2,18 +2,40 @@ import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';
 
+const mockValidations = {
+    Claim: {
+        locale: {
+            name: 'reclamación',
+        },
+    },
+    ClaimObservation: {
+        locale: {
+            name: 'observación',
+        },
+    },
+    ClaimDms: {
+        locale: {
+            name: 'documento',
+        },
+    },
+    ClaimBeginning: {
+        locale: {
+            name: 'comienzo',
+        },
+    },
+};
+
 describe('VnLog', () => {
     let vm;
+
     beforeAll(() => {
         vm = createWrapper(VnLog, {
             global: {
-                stubs: ['FetchData', 'VnPaginate'],
-                mocks: {
-                    fetch: vi.fn(),
-                },
+                stubs: [],
+                mocks: {},
             },
             propsData: {
-                model: "Claim",
+                model: 'Claim',
             },
         }).vm;
     });
@@ -22,54 +44,88 @@ describe('VnLog', () => {
         vi.clearAllMocks();
     });
 
-    describe('formatValue()', () => {
-        it('should return Yes if has a true boolean', async () => {
-            const result = vm.formatValue(true);
-
-            expect(result).toEqual('Yes');
-        });
-        it('should return No if has a true boolean', async () => {
-            const result = vm.formatValue(false);
-
-            expect(result).toEqual('No');
-        });
-        it('should return Nothing if has no params', async () => {
-            const result = vm.formatValue();
-
-            expect(result).toEqual('Nothing');
-        });
-        it('should return a string from a string value', async () => {
-            const result = vm.formatValue('Something');
-
-            expect(result).toEqual(`"Something"`);
-        });
-        it('should call to format a date', async () => {
-            vi.mock('src/filters', () => ({
-                toDate: ()=>{
-                    return "Date formatted"
+    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',
                 },
-            }));
-
-           const result = vm.formatValue('01-01-1970');
-           expect(result).toEqual("Date formatted");
-        });
+                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.validations = mockValidations;
+        vm.logTree = vm.getLogs(fakeLogTreeData);
+        expect(vm.logTree[0].originFk).toEqual(1);
+        expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
     });
 
-    describe('actionColor()', () => {
-        it('should return positive if insert', async () => {
-            const result = vm.actionColor('insert');
+    it('should correctly set the selectedFilters when filtering', async () => {
+        await vm.$nextTick();
+        vm.searchInput = '1';
+        vm.userSelect = '21';
+        vm.checkboxOptions.insert.selected = true;
+        vm.checkboxOptions.update.selected = true;
 
-            expect(result).toEqual('positive');
-        });
-        it('should return positive if update', async () => {
-            const result = vm.actionColor('update');
+        vm.selectFilter('search');
+        vm.selectFilter('userSelect');
 
-            expect(result).toEqual('positive');
-        });
-        it('should return negative if delete', async () => {
-            const result = vm.actionColor('delete');
+        expect(vm.selectedFilters.changedModelId).toEqual('1');
+        expect(vm.selectedFilters.userFk).toEqual('21');
+        expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
+    });
 
-            expect(result).toEqual('negative');
+    it('should correctly set the date from', () => {
+        vm.date = '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'],
         });
     });
 });

test/vitest/helper.js

@@ -12,7 +12,7 @@ installQuasarPlugin({
         Dialog,
     },
 });
-
+axios.defaults.baseURL = 'http://localhost:9000/api/';
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();