Merge pull request '#6893 redirect on fetch just one record' (!257) from 6893-redirectOnFetchOneRecord into dev

Reviewed-on: verdnatura/salix-front#257
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

CHANGELOG.md

@@ -10,11 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 -   (Tickets) => Se añade la opción de clonar ticket. #6951
+-   (Parking) => Se añade la sección Parking. #5186
 
 ### Changed
 
 ### Fixed
 
+-   (General) => Se corrige la redirección cuando hay 1 solo registro y cuando se aplica un filtro diferente al id al hacer una búsqueda general. #6893
+
 ## [2400.01] - 2024-01-04
 
 ### Added

src/components/ui/VnSearchbar.vue

@@ -1,11 +1,9 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-
-import VnInput from 'src/components/common/VnInput.vue';
-
 import { useArrayData } from 'composables/useArrayData';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const quasar = useQuasar();
 
@@ -68,9 +66,8 @@ const props = defineProps({
 });
 
 const router = useRouter();
-const route = useRoute();
 const arrayData = useArrayData(props.dataKey, { ...props });
-const store = arrayData.store;
+const { store } = arrayData;
 const searchText = ref('');
 
 onMounted(() => {
@@ -92,18 +89,26 @@ async function search() {
     });
     if (!props.redirect) return;
 
-    if (props.customRouteRedirectName) {
-        router.push({
+    if (props.customRouteRedirectName)
+        return router.push({
             name: props.customRouteRedirectName,
             params: { id: searchText.value },
         });
-        return;
-    }
 
-    const { matched: matches } = route;
-    const { path } = matches[matches.length - 1];
-    const newRoute = path.replace(':id', searchText.value);
-    await router.push(newRoute);
+    const { matched: matches } = router.currentRoute.value;
+    const { path } = matches.at(-1);
+    const [, moduleName] = path.split('/');
+
+    if (!store.data.length || store.data.length > 1)
+        return router.push({ path: `/${moduleName}/list` });
+
+    const targetId = store.data[0].id;
+    let targetUrl;
+
+    if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
+    else if (path.includes(':id')) targetUrl = path.replace(':id', targetId);
+
+    await router.push({ path: targetUrl });
 }
 </script>
 

test/cypress/integration/vnSearchBar.spec.js

@@ -1,19 +1,42 @@
 /// <reference types="cypress" />
 describe('VnSearchBar', () => {
+    const employeeId = ' #1';
+    const salesPersonId = ' #18';
+    const idGap = '.q-item > .q-item__label';
+    const cardList = '.vn-card-list';
+
+    let url;
     beforeEach(() => {
         cy.login('developer');
-        cy.visit('/');
+        cy.visit('#/customer/list');
+        cy.url().then((currentUrl) => (url = currentUrl));
     });
 
-    it('should redirect to new customer', () => {
-        cy.visit('#/customer/1112/basic-data');
-        cy.openLeftMenu();
-        cy.get('.q-item > .q-item__label').should('have.text', ' #1112');
-        cy.closeSideMenu();
-        cy.clearSearchbar();
-        cy.writeSearchbar('1{enter}');
-        cy.openLeftMenu();
-        cy.get('.q-item > .q-item__label').should('have.text', ' #1');
-        cy.closeSideMenu();
+    it('should redirect to customer summary page', () => {
+        searchAndCheck('1', employeeId);
+        searchAndCheck('salesPerson', salesPersonId);
     });
+
+    it('should stay on the list page if there are several results or none', () => {
+        cy.writeSearchbar('salesA{enter}');
+        checkCardListAndUrl(2);
+
+        cy.clearSearchbar();
+
+        cy.writeSearchbar('0{enter}');
+        checkCardListAndUrl(0);
+    });
+
+    const searchAndCheck = (searchTerm, expectedText) => {
+        cy.clearSearchbar();
+        cy.writeSearchbar(`${searchTerm}{enter}`);
+        cy.get(idGap).should('have.text', expectedText);
+    };
+
+    const checkCardListAndUrl = (expectedLength) => {
+        cy.get(cardList).then(($cardList) => {
+            expect($cardList.find('.q-card').length).to.equal(expectedLength);
+            cy.url().then((currentUrl) => expect(currentUrl).to.equal(url));
+        });
+    };
 });

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

@@ -1,11 +1,11 @@
-import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { vi, describe, expect, it, beforeAll, afterEach, beforeEach } from 'vitest';
+import { createWrapper } from 'app/test/vitest/helper';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-
-
+// Probar a importar como plugin vue-router en archivo helper
 describe('VnSearchBar', () => {
     let vm;
     let wrapper;
+    let pushSpy;
 
     beforeAll(() => {
         wrapper = createWrapper(VnSearchbar, {
@@ -16,7 +16,7 @@ describe('VnSearchBar', () => {
             },
         });
         vm = wrapper.vm;
-        vm.route.matched = [
+        vm.router.currentRoute.value.matched = [
             {
                 path: '/',
             },
@@ -30,24 +30,33 @@ describe('VnSearchBar', () => {
                 path: '/customer/:id/basic-data',
             },
         ];
+
+        pushSpy = vi.spyOn(vm.router, 'push');
+        vi.spyOn(vm.arrayData, 'applyFilter');
     });
 
-    afterEach(() => {
-        vi.clearAllMocks();
-    });
+    beforeEach(() => (vm.store.data = [{ id: 1112, name: 'Trash' }]));
+    afterEach(() => vi.clearAllMocks());
+
     it('should be defined', async () => {
         expect(vm.searchText).toBeDefined();
         expect(vm.searchText).toEqual('');
     });
-    it('should redirect', async () => {
-        vi.spyOn(vm.router,'push');
-        vm.searchText = '1';
+
+    it('should redirect to list page if there are several results', async () => {
+        vm.store.data.push({ id: 1, name: 'employee' });
         await vm.search();
-        expect(vm.router.push).toHaveBeenCalledWith('/customer/1/basic-data');
-        vm.searchText = '1112';
-        expect(vm.searchText).toEqual('1112');
-        vi.spyOn(vm.router,'push');
+        expect(pushSpy).toHaveBeenCalledWith({ path: '/customer/list' });
+    });
+
+    it('should redirect to list page if there is no results', async () => {
+        vm.store.data.pop();
         await vm.search();
-        expect(vm.router.push).toHaveBeenCalledWith('/customer/1112/basic-data');
-     });
+        expect(pushSpy).toHaveBeenCalledWith({ path: '/customer/list' });
+    });
+
+    it('should redirect to basic-data page if there is only one result', async () => {
+        await vm.search();
+        expect(pushSpy).toHaveBeenCalledWith({ path: '/customer/1112/basic-data' });
+    });
 });